" You can't use up creativity. The more you use the more you have. "

Maya Angelou

Code Highlighting with Prism





Code highlighting puts life into a boring piece of code. Almost all sites uses code highlighting feature as it makes the code more readable. There are lots of ways to add code higlighting into your webpages like Google Code Prettify, Highlight, Prism . In this post we will see how we can use Prism to add code highlighting feature to our dull looking webpages. So lets get started.


Below we are showing a piece of java code by putting it in between <pre> tags 

        public class DontTellMyMother{

            public static void main(String ... args){
             System.out.println("Don't tell my mother, I'm not coming home today!")
            }

        }

Although above Java code looks Ok but still reader have to put some effort to read the code. Next we will use Prism to highlight the code. To highlight the code with Prism first download the Prism javascript and css file from Prism Download. Once you are on download page select the theme (my favorite is Okaidia) as shown below


Next select the languages that you would like to highlight


The last thing that you would like to add is Line Numbers plugin, which enables you to show line numbers along with code highlighting


Now click on Download JS and Download CSS button to download prism.js and prism.css respectively


Now we are ready to highlight our previous Java code with Prism, just reference downloaded prism.js and prism.css file within your webpage, put the code that you want to highlight into <code class="language-java"> tag then wrap the <code> tag with <pre > 

    
     public class DontTellMyMother{

            public static void main(String ... args){
             System.out.println("Don't tell my mother, I'm not coming home today!")
            }

        }

Highlighting Python code : To highlight python code we will put the actual python code inside <code class="language-python"> tag and then wrap the <code> tag with <pre > 

     
     from sys import argv

     script, filename = argv

     txt = open(filename)
     print "Here's your file %r:" % filename
     print txt.read()

     print "Type the filename again:"
     file_again = raw_input("> ")
     txt_again = open(file_again)
     print txt_again.read()

Highlighting HTML code : To highlight HTML we will use language-markup class, and one more thing while highlighting HTML and XML code you have to escape less than symbol (<) with &lt; notepad++ find and repace feature can save your day here 


    
  <select>
    <option value="london">London</option>
    <option value="paris">Paris</option>
    <option value="nyk">New York</option>
    <option value="sfo">San Francisco</option>
  </select>

Highlighting CSS code : To highlight CSS we use language-css class 

    
   @import url(http://fonts.googleapis.com/css?family=Questrial);
   @import url(http://fonts.googleapis.com/css?family=Arvo);

   @font-face {
	src: url(http://lea.verou.me/logo.otf);
	font-family: 'LeaVerou';
   }

   /*
      Shared styles
   */

   section h1,
   #features li strong,
   header h2,
   footer p {
	font: 100% Rockwell, Arvo, serif;
   }

We can also show line numbers with the code by simply adding the class line-numbers with enclosing <pre> tag 

    
    @import url(http://fonts.googleapis.com/css?family=Questrial);
    @import url(http://fonts.googleapis.com/css?family=Arvo);

    @font-face {
	 src: url(http://lea.verou.me/logo.otf);
	 font-family: 'LeaVerou';
    }

     /*
       Shared styles
    */

    section h1,
    #features li strong,
    header h2,
    footer p {
	  font: 100% Rockwell, Arvo, serif;
    }

Highlighting JavaScript code : To highlight JavaScript code we use the class language-javascript with <code> tag 

    
     function myFunction() {
       var str = document.getElementById("p1").innerHTML;
       var pos = str.lastIndexOf("locate");
       document.getElementById("demo").innerHTML = pos;
     }




If you have any queries or suggestions, please mention it in the comments below.