Here I show how to use the latest syntaxhighlighter in your blog.
(Before updating your blogger template, make sure that you have taken the backup of your current template-by clicking 'Layout' -> 'Edit Html' -> 'Download Full Template' under ''backup/restore template)
1. Log-in to blogger.com and Click 'Layout', then click 'Edit HTML' tab
2. Paste the following lines code before </head> or after <head>
(You can copy the code by clicking the 'view source' button(appear when you move the
mouse to the upper right corner of the following code) and copy the content
or
by clicking the 'copy to clipboard' button next to 'view source' button)
<!-- START: Syntax highlighter 2 -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<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>
<!-- END: Syntax highlighter 2 -->
Now your blog has reference to all necessary javascript and css files for syntaxhighlighter.
(You need to only include reference to .js files that are specific for your code language.But don't remove the code from line 2 to 5 and 17 to 21 in the above code. That is, if your code contains only Php, then you only need to include 'shBrushPhp.js'(line number 10) and lines 2 to 5 and 17 to 21)
3.Now you can use your code snippets in your blog in two ways
(a):- Enclose your code between <script type="syntaxhighlighter" class="brush: html"><![CDATA[
and
]]></script>
For example, suppose your code is 'my test code' then your formatted code for syntaxhighligher is:
<script type="syntaxhighlighter" class="brush: html"><![CDATA[
my test code
]]></script>
(b):-Convert your code to html escaped charecters(we can do this by the help of some online tools like This)
Then enclose your html escaped code between <pre class="brush: html">
and
</pre>
For example, suppose your code is 'my test code' then your formatted code for syntaxhighligher is:
<pre class="brush: html"> html escaped my test code </pre>
The part class="brush: html" means your code language is 'html' . If your code language is php,then use "brush: php". similarly, for csharp use "brush: csharp".
A list of available languages can be found Here
You can also change the appearance of your highlighted code by changing the themes. A list of available themes can be found Here
0 comments:
Post a Comment