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>

Semantic way of giving caption to an image in HTML5

Whenever there is an image on our website, it's always a great idea to have a relevant and appropriate image caption. If we check websites where images play an important role as a part of the main content, then image caption is a compulsory element for such websites.

News websites, magazine sites, modeling, art and photography related websites have lots of image contents. An Image caption is equally important element for such websites to help users understand the details of image very quickly.

Difference between <img> & <figure> elements

So how do we do it in HTML?
An old & unstructured way of giving a caption to an image does not have any disadvantages as such but it was not a semantic way. Following is one of the old ways of creating image element with a caption. Developers usually give some class to an image and DIV tag so it will get proper alignment and finally appears as an image caption.

  <img src="imagename.jpg" class="classname" />
  <div>This is image caption</div>

Improved & Semantic way to give image caption in HTML5.
So is there any standard way to write these elements to your browser? Yes, HTML5 is the answer to your question. All of us know that HTML5 have really come up with lots of new tags and features, but it's still not completely adapted and many of its newly added elements and attributes are not used. <figure> - Yes I am talking about this newly added element which is used for adding captions to images in an semantic way. So lets take a look at new way of writing this element.

 <figure>
    <img src="imagename.jpg" class="someClass" />
    <figcaption>
        <p>This is an image caption in Semantic way :)</p>
    </figcaption>
 </figure>

The sameple above shows the use of newly created HTML5 elements <figure> & <figcaption>. Use of these two elements is collectively called as semantic way of integrating image captions. You can use above code sample in your next projects.
Happy HTML5:)