Create Beautiful Code Frames Widgets With Highlight Js

Hello Blogger user guys, if you have my blog, you can see that my code sharing frame has many beautiful colors, right? Now I will share with you how to create.

In this article, we will use the source code Highlight.js

what is Highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup doesn't depend on any framework and has automatic language detection.

Perform

Find the closing </body> tag and insert the following code:

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

If your theme does not have jquery yet, please add this paragraph

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</script>

Then save and enjoy the results.

If you use Jagodesain's interface like Median UI, Fletro Pro, then you go to the CSS line

.post pre span{color:var(--highlight-green)} .post pre span.block{color:#fff;background:var(--highlight-blue)}

Instructions for Use

If the type you share is HTML then use this code

<pre class='html'><code>
	Your_code_here
</code></pre>

If it's CSS then use this code

<pre class='css'><code>
	Your_code_here
</code></pre>

And Javascript uses this code

<pre class='js'><code>
	Your_code_here
</code></pre>