-1

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 ?

2

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();
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.