Home

How To Add Code Box In Blogger Post

Create Beautiful And Professional Code Framework For Blog / Website - New Version

How To Add Code Box In Blogger Post
How To Add Code Box In Blogger Post

How to add Code Box In Blogger

STEP 1:

Visit the Blogger / Website admin page, add the whole below before the tag </head> in Template / HTML

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('pre').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
//]]>
</script>

STEP 2:

How to use the code container: You put the code to share in the middle of the card <pre> 

If it's CSS

<pre class='css'>
<!-- If the code is CSS -->
</pre>

If it's Javascript

<pre class='javascript'>
<!-- If the code is javascript -->
</pre>

If it's HTML

<pre class='xml'>
<!-- If the code is  HTML -->
</pre>

Above is the whole code & instructions for using the framework containing the code version 9.15.10 (the latest version of highlight js. If you have any questions or complaints about copyright, please comment below to let me know. I wish you a very effective study and working day !!!
Newer post Older post

RELATED ARTICLES