Code Highlighting in BlockQuote

Question

Code Highlighting in BlockQuote

Subin

2013年11月24日 05:04

Many of my Wordpress Blog(http://subinsb.com/) posts have code snippets which is wrapped in blockquote elements. I need to highlight these code snippets. I tried using GeSHi, Prettify Code Syntax, CodeColorer but none of them works for blockquote elements. Is there any plugin that supports code highlighting for blockquotes ?

OR

How can I customize the current highlighting plugins to highlight blockquote elements too ?

Topic code syntax-highlighting Wordpress

Category Web

Subin · Accepted Answer · 2013年11月24日 05:04

I found another way to highlight codes with blockquote elements. Go to Wordpress Template Editor (Appearance -> Editor)

Add the following line just above </head>

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js' type='text/javascript'></script>
<script src='https://google-code-prettify.googlecode.com/svn/loader/prettify.js' type='text/javascript'></script>
<link href='https://google-code-prettify.googlecode.com/svn/loader/prettify.css' rel='stylesheet'></script>
<script>jQuery(".site-content").ready(function(){jQuery("blockquote").each(function(){jQuery(this).html(prettyPrintOne(jQuery(this).html()));});});</script>

Alex Dumitru · Accepted Answer · 2013年11月23日 18:56

First of all you should use the standard pre and code elements instead of blockquotes. But if have too many to change them, there might be a workaround.

If you only use blockquotes for code, then you can use a bit of jQuery to convert those to pre tags, but make sure to do that before Prettify is loaded.

I don't know how the plugins work, but I can help you do it directly with Prettify.

Download it from here and enqueue it on your website.

Then use this jQuery to convert blockquote to pre and trigger Prettify.

$("blockquote").replaceWith(function() { return "<pre>" + $(this).html() + "</pre>"} );
prettyPrint();

Code Highlighting in BlockQuote

About