Wednesday, November 23, 2016

Integrate Syntax Highlighter to Blogger


SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. Basically it highlight your code based on the language you've specified.

Example:
<?php echo "this is a syntax highlighter.";?>

Step 1. Go ahead and login to your blogger account. Navigate to Template > Edit HTML
step one
Step 2. Add the following code before the closing head tag.
<!-- INCLUDE SyntaxHighlighter Components (css and javascript) -->
 <link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
 <link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
 <!-- END INCLUDE SyntaxHighlighter Components -->
 
 <!-- INCLUDE YOUR BRUSHES WHICH YOU WANT TO USE HERE -->
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXML.js" type="text/javascript"></script>
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
 <!-- END INCLUDE BRUSHES -->
 <!-- INIT SyntaxHighlighter -->
 <script type="text/javascript">
           SyntaxHighlighter.config.bloggerMode = true;
           SyntaxHighlighter.all();
 </script>
 <!-- END INIT SyntaxHighlighter -->
You can include other language syntax highlighter by adding scripts on your header with the following file names
Brush name Brush aliases File name

ActionScript3
as3, actionscript3 shBrushAS3.js

Bash/shell
bash, shell shBrushBash.js

ColdFusion
cf, coldfusion shBrushColdFusion.js

C#
c-sharp, csharp shBrushCSharp.js

C++
cpp, c shBrushCpp.js

CSS
css shBrushCss.js

Delphi
delphi, pas, pascal shBrushDelphi.js

Diff
diff, patch shBrushDiff.js

Erlang
erl, erlang shBrushErlang.js

Groovy
groovy shBrushGroovy.js

JavaScript
js, jscript, javascript shBrushJScript.js

Java
java shBrushJava.js

JavaFX
jfx, javafx shBrushJavaFX.js

Perl
perl, pl shBrushPerl.js

PHP
php shBrushPhp.js

Plain Text
plain, text shBrushPlain.js

PowerShell
ps, powershell shBrushPowerShell.js

Python
py, python shBrushPython.js

Ruby
rails, ror, ruby shBrushRuby.js

Scala
scala shBrushScala.js

SQL
sql shBrushSql.js

Visual Basic
vb, vbnet shBrushVb.js

XML
xml, xhtml, xslt, html, xhtml shBrushXml.js

4 comments: