Changing Blockquote Tag Being Pre Code Tag With Jquery

Updated on April 03, 2016 - Post a Comment

When new study made a post about tutorial Blogger that include codes CSS , HTML , or Javascript , I use the blockquote tag . Blockquote used to display HTML code and the other is the reason for blockquote tags already available at the post editor with quotes on the menu editor posts.

And to display the HTML code and others in the blog post would be better if you use PRE tag . Unfortunately Blogger does not / has not added a menu of pre tags into the post editor menu. So that is just learning to make posts like Blogger tutorial I use many existing facilities that blockquote .

Author: Adhy Suriady
Over time, many now know how to write HTML code and the other in the post, such as the use of syntax highlighter that not only use pre tag , but using pre code tag . We know Prism , Highlight , and others that make writing code in the post for the better with a variety of views.

But what if we now use syntax highlighter and while posts that use blockquote to display the code is already a lot? Do we have to edit its news one by one?

If we have a lot of time, maybe we can edit them one by one (hehehe at most make curling the fingers ...). But do not worry, with the help of jquery we can change blockquote tag into a pre tag even be pre code tags that can automatically have to see syntax highlighter that we use now.

And my recommendation, try using Highlight.js for syntax highlighter in the post because it does not require an additional class in pre code tag it.

For example, the previous example we create a blockquote in posts to display the code as shown below.

<blockquote>
<h3 class='date-header'><span class='author'><b:if cond='data:top.showAuthor'><data:top.authorLabel/></b:if> : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span class='post-author vcard'>
<span class='fn'><data:post.author/></span>
</span></a> </span>
<span class='clock'> Posted on <data:post.dateHeader/> - <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a> <b:if cond='data:post.allowComments'> with <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
</blockquote>

JSFIDDLE
And now we're going to change the zoom using Highlighter.js without changing <blockquote> </blockquote> directly, but using jquery to convert it to <pre><code> </code></pre> on condition that we've kept code- code Highlighter.js syntax highlighter in our blog template.

Please use the jquery below:

var $span = $("blockquote");
$span.replaceWith(function () {
return $('<code/>', {
html: this.innerHTML
});
});
$( "code" ).wrap( "<pre/>" );

Consider the following code:

var $span = $("blockquote");
$span.replaceWith(function () {
return $('<code/>', {
html: this.innerHTML
});
});

Is replacing blockquote with code , with elements that remain as before (blockquote contents are not removed by this code html:this.innerHTML )

$( "code" ).wrap( "<pre/>" );

Is pre tag wrap the code tag. After blockquote changed to code , then the next code wrapped with pre so that when viewed with inspect element then blockquote the above will be changed as follows.

<pre><code>
<h3 class='date-header'><span class='author'><b:if cond='data:top.showAuthor'><data:top.authorLabel/></b:if> : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span class='post-author vcard'>
<span class='fn'><data:post.author/></span>
</span></a> </span>
<span class='clock'> Posted on <data:post.dateHeader/> - <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a> <b:if cond='data:post.allowComments'> with <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
</code></pre>

DEMO
By doing so it will automatically zoom will change from blockquote be Hightlight.js syntax highlighter because it turns into <pre><code></code></pre>