More from the web

Tuesday, 14 July 2015

Adding Code Syntax Highlighting To Blogger

In this tutorial we are going to use the SyntaxHighlighter scripts provided by Alex Gorbatchev from
here


It can be downloaded here or click  here


After downloading you need to host the files on the web. Blogger doesn't let you upload files, but
there are many options GitHub, Drop Box or from the site itself here

I am using the author's website to host the files.

Each of the lines containing the "BrushPhp" file correspondes to a particular type of highlighting,
the following for example is for php

<script src="https://host/syntaxhighlighter/scripts/shBrushPhp.js" type="text/javascript">

If you want to be able to format a particular language, then you need to provide a script for that language. A list of all the brushes can be found here

Add links to styles/shCore.css, styles/shThemeDefault.css, /scripts/shCore.js and whatever brushes you require ex  /scripts/shBrushBash.js
  
Modify the following to add your own share or use the author's hosting, as i am doing here.

<!-- Syntax Highlighter Additions START -->

<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>  SyntaxHighlighter.config.bloggerMode = true;  SyntaxHighlighter.all(); </script>
<!-- Syntax Highlighter Additions END -->

Go to your Blogger admin screen, and click on Template.

Then click Edit HTML. If you get a warning screen, click proceed.



Next find the <head> tag. This can be done by hitting Ctrl+F and using the find function.


Now copy and paste the code and Save Changes and close.


To add code in a post, Go to HTML mode. You need to wrap your code with <pre> tags and
include the type of programming language, eg for php

<pre class="brush:css">

your code

</pre>

Note: any less than or greater than signs must be replaced with &lt or &gt respectively

you can also add the first-line element to start the numbering
from a different location

<pre class="brush:php;first-line:10">