Pages

Tuesday, December 6, 2011

Highlight Syntax in Blogger

Last time, I've tried to customize my Blogger template so when I posted some code, it can display code more clear. Asked Google and found that it was so easy to highlight code in Blogger using Syntax Highlighter.

All you need to do is:
1. Go to your Blogger setting where you can edit your Blogger template.
2. Use your browser to find </head> tag.

3. Next, paste the following code right after the </head> tag. (The code below load all brush type, and you can delete some unused brush by removing it from your template.)
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">
</script>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
4. Done! Preview and save your Blogger template!

There are some brush aliases that can highlight your code better. You can look lists of all brush aliases here: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

For example, if you want to highlight HTML code, you can do it like this one:
<pre class="brush:html">

<!-- place for your escaped HTML code -->

</pre>

That's all. Easy, right? Happy customizing :)

More? http://alexgorbatchev.com/SyntaxHighlighter/

No comments:

Post a Comment