2017/02/21

Add syntax highlight for your code in blogspot.com

There a lots of JavaScript syntax highlight library available, I chose highlight.js which is quite simple and straight forward in my view; and easy enough to put into your blogspot.com.
Here is the steps:
Edit your blog's template HTML by paste following codes before the </head>

    <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css" rel="stylesheet"></link>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

For your blog poster, use

<pre><code class="lang">code in lang ...</code></pre>

This is using the default language packs of highlight.js which support most common languages:
  • Apache 
  • Bash 
  • C# 
  • C++ 
  • CSS 
  • CoffeeScript 
  • Diff 
  • HTML
  • XML 
  • HTTP 
  • Ini 
  • JSON 
  • Java 
  • JavaScript 
  • Makefile 
  • Markdown 
  • Nginx 
  • Objective-C 
  • PHP 
  • Perl 
  • Python 
  • Ruby 
  • SQL

and railscasts color scheme. you can goto https://highlighjs.org to find more language and color scheme.


It is pretty simple, isn't it?
发表评论