Syntax highlighting using Rainbow

Rainbow is syntax highlighting library written in Javascript. It is lightweight and primary focused on syntax highlighting for programming languages. It is easy to use and easy customization is possible. It is also easily themable using CSS.

To use the rainbow syntax highlighter, download it in your local server and link it to your webpage. Also link the theme for rainbow highlighter.

<link href="rainbow.css" type="text/css" rel="stylesheet" />
<script src="rainbow-custom.min.js" type="text/javascript"></script>

Rainbow will pickup the language to be highlighted using the data-language attribute for the <code> . The <code> needs to be covered by <pre> tag.

Following is the example of highlighting for PHP

<h3>PHP Code</h3>
 <pre>
 <code data-language="php">
     $a = 3;
     $b = 4;
     function add($a, $b){
         $c = $a + $b;
         return $c;
     }
     
     $c = add($a, $b);
     
     echo "The sum is ". $c;
 </code>
 </pre>

The output of above code will look like this on the browser

Following is the example of syntax highlighting for CSS language

<h3>CSS Code</h3>
<pre>
    <code data-language="css">
        .myclass{
            height: 300px;
            width: 200px;
            color: #FFEEFF;
            background: #DDAACC;
        }
    </code>
</pre>

This will output in the following way on the browser.

Number of themes are available for Rainbow syntax highlighting. Those can be downloaded in their github page. https://github.com/ccampbell/rainbow/tree/master/themes/css