Tuesday, June 24, 2014

Highlight code on blogger


So if you've run into this post, you must be wondering how to apply code highlighting on popular blogging platform blogger.com and you're at the right place. Before we go to instructions here are some examples of highlighted code just for motivation. If you like it, you can proceed and integrate this handy feature.  
some random c code ...

// little c code
int main(int argc, char argv**) {
 int i;
 for(i = 0; i <= 99; i++)
   fprintf(stdout, "%d\n", i);

 return 0;
}

Or some php code:


require_once 'Zend/Uri/Http.php';

namespace Location\Web;

interface Factory
{
    static function _factory();
}

abstract class URI extends BaseURI implements Factory
{
    abstract function test();

    /**
     * Returns a URI
     *
     * @return URI
     */
    static public function _factory($stats = array(), $uri = 'http')
    {
        echo __METHOD__;
        $uri = explode(':', $uri, 0b10);
        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
        $desc = 'Multi
line description';

        // Security check
        if (!ctype_alnum($scheme)) {
            throw new Zend_Uri_Exception('Illegal scheme');
        }

        return [
            'uri'   => $uri,
            'value' => null,
        ];
    }
}
some html code ...

<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <div checked="" class="title" id="title">
Title</div>
<!-- here goes the rest of the page -->
</body>


css code ...

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
  body {
    background: linear-gradient(45deg, blue, red);
  }
}

If you like what you see, and want to implement this feature, follow few simple steps (by the way it's very easy):

On the left menu on your blogger account go to templates click "edit html" just before closing of:
</header> tag add 3 lines (2 comment lines are there just to remind you what you've added and where, in case you what to remove code highlighting later...)


<!-- highlight.js -->
<link href='http://yandex.st/highlightjs/8.0/styles/default.min.css' rel='stylesheet'/>
 <script src='http://yandex.st/highlightjs/8.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
<!-- / highlight.js -->


click "save template" and you're done.

Ok what now? How do I use code highlighting?

It turn out it's quite easy, when you want to highlight some code, first you write it in WYSIWYG editor like you normally would and then switch to HTML mode of editing post, and put around your code html tags like this:

<pre><code> your code ... </pre></code>


And your code will be heightlighted. If you want to specify what language you use in your code, that can be done like this:


<pre><code class='hljs python'> your code here ... </pre></code>


where instead of python you add language of your choosing. Here are some possible languages of highlight.js lib:

python
c
cpp
java
objectivec
cs (C#)
sql
lisp
xml
css
scala
go
javascript
json
bash
...

There are others as well. For full list of code markup highlighting check out: highlightjs test page
Also visit http://highlightjs.org/ for more info and details about some advanced features of this library.

happy coding!   

No comments:

Post a Comment