Monday, January 16, 2017

Best syntax highlighter for blogs and websites

Few months back I started sharing my codes and programming experience on my blog. I was looking for simple and best solution to highlight the code samples on my blog. There are many online tools which helps you to generate the HTML code which can be directly used on your website with highlighted styles. These online tools works fine, but it generates a lot of HTML and CSS. So I found it's alternate solution "code-prettify" which is much simpler and easy to integrate.

Step 1 - Just include the library & you are done with its setup
Just include below script in your blog / website before closing of head tag. Once it's done you can simply make use of tag to highlight your code. Check the sample code explained in step 2 to learn how to use this script.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Step 2 - Copy the code block in PRE tag with mentioned class
It's very simple to use, you simply have to use PRE tag and give it a class "prettyprint". We also need to specify the second CSS class for script to understand which programming language colour formatting pattern to use. In below example I have used class "lang-html". This will notify script that my code block needs HTML formatting.
<pre class="prettyprint lang-html">
      Your code block here
</pre>
Highlighting PHP code
<pre class="prettyprint lang-PHP">
<?php
 echo "Hello Friends";
?>
</pre>
Highlighting JavaSctipt code
<pre class="prettyprint lang-javascript">
  var DM = 'Hello friends';
</pre>
Note - It works perfectly with many other languages, please check their github link for more details.


HTML5 Way to do the same
If you wish to use standard HTML5 elements to highlight your code then you can use following code block.
<pre class="prettyprint"><code class="language-python">
class Employee:
    def __init__(self, name):
     self.name = name

    def outputName(self):
     print "Name = %d" % Employee.name
</code></pre>

No comments:

Post a Comment