30 Jul 2012
Syntax Highlighting in Blogger using Prettify

Prettify is developed by Mike Samuel from Google and is used for displaying code snippets in webpages in a more presentable manner. It is lightweight and gets easily integrated into Blogger. It has four different themes to choose from and also supports C-like and XML-like language's syntax highlighting . In this tutorial we will be seeing how to implement it in your blog and also checking out some of its options. Lets get Started then

Demo

Video Tutorial

Step by Step Guide

1. Go to Blogger Dashboard and then to Template > Edit HTML

2. Now Search (Use CTRL+F) for </body> and add the following JavaScript just before it ( The Code below is very lengthy , copying it manually would be a bit difficult , Use the Copy to Clipboard option)

3. Now search for ]]></b:skin> tag and add the following CSS just before it

.kwd{color:#93C763}
.com{color:#66747B}
.typ{color:#678CB1}
.lit{color:#FACD22}
.tag{color:#8AC763}
.atn{color:#E0E2E4}
.dec{color:purple}
pre.prettyprint{border:0 solid #888}
.prettyprint{background:#000}
li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}
.str,.atv{color:#EC7600}
.pun,.pln{color:#F1F2F3}
.prettyprinted{word-wrap:break-word;background:#000;border-radius:10px}
@media print {
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:700}
.lit{color:#044}
.pun{color:#440}
.pln{color:#000}
.atn{color:#404}
.str,.atv{color:#060}
.kwd,.tag{color:#006;font-weight:700}
}

Note : In case you can't find or its commented out then add the CSS in a style tag just before the </head> tag

4. Save the Template and now you are ready to share Code on your blog in a prettier way !

For adding Code

1. Create a New Post

2. In the HTML section of the Post Editor add your code enclosed in a pre tag like below

 <pre class="prettyprint" >

</pre>

You can also use the code tag instead (Its the HTML5 Convention)

 <code class="prettyprint">
...
</code>

Note: Make sure to Esacpe your Code before pasting it inbetween the pre or code tag . You can Bookmark the Postify Tool for escaping purposes

Some Options

To display Line Numbers

If you want all the lines of the code to have a line number preceding it , then add linenums class in the pre tag

 <pre class="prettyprint linenums" >

</pre>

Language Support

It supports C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles . In case you want to display any other language then extensions are available for the following Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; Llvm; Logtalk; Lua; Matlab; MLs: F#, Ocaml,SML;Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Rust; Scala; SQL; Swift; TCL; Latek; Visual Basic; VHDL; Wiki; XQ; YAML.

After including the Script for the extension you will have to specify a class in the pre tag

 <pre class="prettyprint lang-*">
 The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
</pre>

In HTML5 , it would be like

 
<pre class="prettyprint"><code class="language-*">...</code></pre>

Adding Comments in Code

Comments can be added in the following manner

int x = foo();  /* This is a comment  This is not code
  Continuation of comment */
int y = bar();

Different Themes

The theme given above is by Alex Ford , There are 3 more themes available . To apply them just replace the CSS in Step 3 Above with any one of these

Sunburst

pre .kwd,code .kwd{color:#E28964}pre .com,code .com{color:#AEAEAE;font-style:italic}pre .atn,code .atn{color:#bdb76b}pre.prettyprint,code.prettyprint{background-color:#000;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;white-space:pre-wrap;margin:1em auto;padding:1em}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}pre .str,code .str,pre .atv,code .atv{color:#65B042}pre .typ,code .typ,pre .tag,code .tag{color:#89bdff}pre .lit,code .lit,pre .dec,code .dec{color:#3387CC}pre .pun,code .pun,pre .pln,code .pln{color:#fff}@media print{pre .com,code .com{color:#600;font-style:italic}pre .typ,code .typ{color:#404;font-weight:700}pre .lit,code .lit{color:#044}pre .pun,code .pun{color:#440}pre .pln,code .pln{color:#000}pre .atn,code .atn{color:#404}pre .str,code .str,pre .atv,code .atv{color:#060}pre .kwd,code .kwd,pre .tag,code .tag{color:#006;font-weight:700}}

Default

.pln{color:#000}
pre.prettyprint{border:1px solid #888;padding:2px}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
@media screen {
.com{color:#800}
.lit{color:#066}
.pun,.opn,.clo{color:#660}
.fun{color:red}
.str,.atv{color:#080}
.kwd,.tag{color:#008}
.typ,.atn,.dec,.var{color:#606}
}
@media print,projection {
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:700}
.lit{color:#044}
.pun,.opn,.clo{color:#440}
.atn{color:#404}
.str,.atv{color:#060}
.kwd,.tag{color:#006;font-weight:700}
}

Desert

pre.prettify{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .com{color:#87ceeb}pre .lit{color:#cd5c5c}pre .atn{color:#bdb76b;font-weight:700}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}pre .str,pre .atv{color:#ffa0a0}pre .kwd,pre .tag{color:#f0e68c;font-weight:700}pre .typ,pre .dec{color:#98fb98}pre .pun,pre .pln{color:#fff}@media print{pre.prettify{background-color:none}pre .com,code .com{color:#600;font-style:italic}pre .typ,code .typ{color:#404;font-weight:700}pre .lit,code .lit{color:#044}pre .pun,code .pun{color:#440}pre .pln,code .pln{color:#000}pre .atn,code .atn{color:#404}pre .str,code .str,pre .atv,code .atv{color:#060}pre .kwd,code .kwd,pre .tag,code .tag{color:#006;font-weight:700}}

Moving from Syntax Highlighter

In case you have been using Syntax Highlighter for a long time and want to shift to Prettify , It would be impractical to change all the class names of each code block till now from brush: something to prettyprint. To overcome this problem I have a small trick. In the JavaScript file above search for /\bprettyprint\b/ and /\blinenums\b and replace them with /\bbrush:\b/ and /\bxml\b ( Here I am assuming you used the xml brush in all the codes ) . This will apply Prettify to all the Code Blocks and also add the Line Number as they were shown in Syntax Highlighter.

Hope the tutorial made it easy for you to embed code snippets in your blog. Don't hesitate to ask if you face any problems while implementing or using it

Til next time,
Prayag Verma at 15:09

scribble

30 Jul 2012 Syntax Highlighting in Blogger using Prettify

30 Jul 2012
Syntax Highlighting in Blogger using Prettify