Add Syntax Highlighter into Blogger to display codes

0
9
Syntax Highlighter is a widely used code highlighter on websites in addition to blogs, most every spider web developer, spider web designers or whatever people who desire display codes on their pages. In this tutorial yous volition larn how to add together it on your weblog on blogger.

Use the PrismJS,a unproblematic in addition to lightweight opensource syntax highlighting plugin
Syntax Highlighter is a tool past times Alex Gorbatchev in addition to thank yous to him for developing such useful tool. In club to the add together the Syntax highlighter scripts in addition to come inwards plough over your weblog follow the steps.

Add the scripts 

The script files i volition hold upward giving links to inwards the script tag is hosted on the developer’s server, if yous desire to download it to host on your ain server in addition to then click hither to download Syntax Highlighter files.

<!-- SyntaxHighlighter starts --> <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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false; SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;; SyntaxHighlighter.all();   </script> <!-- SyntaxHighlighter ends --> 

Looks real heavy but all yous accept to amongst is to add together it into your Template.

Add it to your blog’s Template

And to exercise that Go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to uncovering </body> inwards the template in addition to glue the codes higher upward </body>


Tip : The codes tin sack differ inwards your page loading time, if yous don’t display codes on your homepage in addition to then role this script, which is same to higher upward scripts but solely added blogger conditional tag to a greater extent than or less it to charge it solely on postal service pages.

<b:if cond='data:blog.pageType == "item"'> <!-- SyntaxHighlighter starts --> <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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>   <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false; SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;; SyntaxHighlighter.all();   </script> <!-- SyntaxHighlighter ends --> </b:if> 

The adding procedure is same equally the above

Highlighting the codes inwards posts

Once yous accept added the code inwards your template, instantly yous accept to brand the your code display inwards the Syntax highlighter and to exercise that yous accept to twine your display codes into <pre> tag amongst particular attributes into it to define what linguistic communication yous are displaying the code in.

Displaying the code if it’s HTML

This is an example of how yous accept to markup the codes if yous are display HTML codes.

<pre class='brush:xml'> // HTML Code hither </pre>

The HTML code is wrapped into <pre> tag in addition to amongst class=’brush:xml’ in addition to it’s what tells SyntaxHighlighter that it’s an HTML code (HTML in addition to XML both looks similar)

Brushes : There are to a greater extent than languages SyntaxHighlighter supports in addition to here’s the listing of values yous tin sack set inwards the brush value. Following are the brushes yous tin sack apply on your codes
as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml

Add it to your post

Let’s tell yous desire to display a HTML code, the whole code amongst the wrapping <pre> tag volition hold upward this

<pre class="brush:xml"> <ul class='make-tea'> <li>Tea</li> <li>Water</li> <li>Sugar</li> <li>Milk</li> </ul>  </pre>

To add together it opened upward your Post Editor, switch to the HTML manner in addition to glue the your HTML code betwixt the <pre> tags.

Note : If yous glue your display HTML raw, it volition translate itself in addition to and then it can’t hold upward displayed equally HTML, to forbid it yous must starting fourth dimension convert your raw HTML into escaped characters. Use Quick Escape to convert your HTML to escape characters.
Example –
This is the Raw HTML earlier conversion

<ul class='maketea'> <li>Tea</li> <li>Water</li> <li>Sugar</li> <li>Milk</li>  </ul>

This is the converted HTML codes.

&lt;ul class='maketea'&gt; &lt;li&gt;Tea&lt;/li&gt; &lt;li&gt;Water&lt;/li&gt; &lt;li&gt;Sugar&lt;/li&gt; &lt;li&gt;Milk&lt;/li&gt;  &lt;/ul&gt; 

Just set the converted Raw HTML code into the <pre> tag in addition to yous are create to glue it into your post, simply switch to HTML manner in addition to glue it at the correct place.

Customizing the SH skins

You tin sack role dissimilar skins in addition to colors for your SyntaxHighlighter, to brand changes to the skins yous simply accept to alter the  2nd<link> tag inwards the SyntaxHighlighter scripts HTML. This is the link tag yous accept currently
<link href=’http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css’ rel=’stylesheet’ type=’text/css’/>
You tin sack role whatever of the next styles, simply supersede the yellowish highlighted text amongst whatever vogue below (each vogue is separated past times a comma).
shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault
For examply if yous desire to role shCoreEmacs peel in addition to then the href value inwards link tag volition hold upward this
<link href=’http://alexgorbatchev.com/pub/sh/current/styles/shCoreEmacs.css’ rel=’stylesheet’ type=’text/css’/>
Simple equally that.. Now select whatever peel or subject yous desire in addition to apply it.

Your feedback

I tried my best to choke along this tutorial equally slowly equally possible, but if there’s something yous can’t sympathise or incorrect in addition to then yous tin sack contact me. If yous have successfully implemented SH inwards your weblog using this tutorial in addition to then yous tin sack give thank yous us past times dropping your comments.

Subscribe to our weblog for to a greater extent than blogger tricks updates. 


Sumber http://www.stramaxon.com