Wednesday, October 28, 2015

Using SyntaxHighlighter in Blogger

SyntaxHighlighter

Copy the following code
 <!-- Syntax Highlighter Additions START -->
 <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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
 <script>
 //<![CDATA[ 
 window.onload = function()
 {
   SyntaxHighlighter.autoloader(
     'applescript            http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js',
     'actionscript3 as3      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js',
     'bash shell             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js',
     'coldfusion cf          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js',
     'cpp c                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js',
     'c# c-sharp csharp      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js',
     'css                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js',
     'delphi pascal          http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js',
     'diff patch pas         http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js',
     'erl erlang             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js',
     'groovy                 http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
     'java                   http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
     'jfx javafx             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js',
     'js jscript javascript  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
     'perl pl                http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js',
     'php                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
     'text plain             http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js',
     'py python              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js',
     'ruby rails ror rb      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js',
     'sass scss              http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSass.js',
     'scala                  http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js',
     'sql                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
     'vb vbnet               http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js',
     'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'
   );
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
 }
 //]]>
 </script>
 <!-- Syntax Highlighter Additions END -->

Paste it into your Blogger Template just above the </head> tag
Save the template

If you want to use some third-party-brushes, just put the link under the SyntaxHighlighter.autoloader phase and set an alias. e.g.

<script>
 //<![CDATA[ 
 window.onload = function()
 {
   SyntaxHighlighter.autoloader(
...
'xml xhtml xslt html    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js',
'latex     http://gist.github.com/argansos/97bba66a54863870e20a/raw/48a77407f846982facbd24c469531e0620dcd750/shBrushLatex.js',
);
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
 }
 //]]>
 </script>
 <!-- Syntax Highlighter Additions END -->

I have put some third-party-brushes here.

How to use the SyntaxHighlighter (Configuration page)

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">
YOUR CODE HERE
</pre>

If you try and publish any code with < or > in it, you'll need to HTML Encode the code before adding it to the blog post. You can search HTML encode via google or use this link. You can check on both of the options to make it more readable.
only encode unsafe and non-ASCII characters
allow named character references in output (incompatible with older browsers)

No comments:

Post a Comment