Syntax highlighting using Prism

Prism is a lightweight, extensible syntax highlighter that’s used in many popular websites like http://drupal.org for syntax highlighting.  The core is as lightweight as 2k and extended for multiple languages with each language pack is around 0.3 to 0.5k in minified version. It is also extensible means you can define your own language for syntax highlighting.

Basic Usage.

You will need to include the prism.css and prism.js files you downloaded in your page. Example:

<link href="prism.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="prism.js"></script>

Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses.

<h3>CSS code </h3>
    <pre>
            <code class="language-css">
                .myclass{
                  height: 200px;
                  width: 200px;
                  margin: 20px 30px 20px 10px;
                  padding: 20px 20px 20px 10px;
                  color: #FFEEFF;
                  background: #AFDFCF;
                }
            </code>
        </pre>
    <h3>PHP code</h3>
    <pre>
        <code class="language-php">
            class MyClass extends parentClass{
              public $a;
              public $b;
              public $c;
              
              function add($a, $b){
                $sum = $a +$this->a;
                $sumb = $b + $this->$b;
                return $sum + $sumb;
              }

              public function printsum(){
                $c = $this-add(20,30);
                print "Sum is "+$this->c;
              }
            }
        </code>
    </pre>

And the output would be like the below.

Prism currently supports over 150 languages. Also it supports number of plugins like line numbers, line highlight etc. No need to download them separately. Just select them in the downloads page