Not infrequently people are forced to use blockquote to handle this, of course to share script code with their visitors. Now you don't need to worry and can leave the rustic way, because Alex Gorbatchev has created an extraordinary, neat and applicable Highlighter function to highlight common programming languages such as HTML, CSS, JavaScript, Php, Python, SQL, XML, C++, etc. The code is displayed line by line along with its number. It also provides users with the option to print the code, in addition to copying to the clipboard.
Alex has released the latest version (3.0.83) but we will use the old version (2.1.383) because it contains the options I mentioned above. Each type of code comes with a script called Brush. I have used the most popular Brushes as I mentioned earlier but if you want to use your own Brush then you can choose one from THIS Brush list .
1. Setup to Blogger / Blogspot
Simple step by step that you can imagine & apply.
- Go to Blogger -> Design -> Edit HTML
- Backup / Backup your template
- Search for this ]]></b:skin> using CTRL+F on your keyboard.
- Place the following code right below it,
<!--SYNTAX HIGHLIGHTER BY MBT STARTS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY MBT ENDS-->- Save the template, done!
2. How Does It Work?
Whenever you want to share any type of code with your readers, simply enclose it between the following PRE tags,
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
LETAKAN KODE ANDA DI SINI
</pre>I have combined all the brushes into one so that it is easier for newbies to implement the tutorial.
Notes:
- Don't add the code directly, because you will get an error in Blogger Editor, instead, parse the code first using the Parser Tool provided by us!
- Enable HTML mode on blogger text editor to apply pre tag & add the code!
Replace PUT YOUR CODE HERE with the parsed/encoded code, paste it directly and publish your post to see the magic.
That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next post so make sure you don't miss the update.