How To Implement/Add Syntaxhighlighter To A Blogger Blog
How To Install Syntax Highlighter On Blogger
Syntax highlighter comprises of dissimilar languages similar php,python,ruby,javascript,css,mysql etc but inwards this tutorial nosotros are going to hold out install php but earlier nosotros croak along allow brand certain nosotros sympathise the principles behind this tutorial.
The SyntaxHighlighter configuration consists of iv parts:
1. The meat files
2. The SyntaxHighlighter theme
3. The specific brush(es) needed for the blog
4. The configuration script
1) The meat files
The meat files consist of the next JavaScript file together with trend sheet:
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
2) The SyntaxHighlighter theme
There are a publish of themes available for SyntaxHighlighter, the trend canvass below is the default theme.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
Other themes together with How To Implement Theme
To implement other themes,all you lot simply convey to do,is to supersede shThemeDefault.css with wish theme name.
Django
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css" rel="stylesheet" type="text/css" />
Output
Eclipse
<link href="http://alexgorbatchev.com/pub/sh/current/styles/ shThemeEclipse.css " rel="stylesheet" type="text/css" />
Output
Emacs
<link href="http://alexgorbatchev.com/pub/sh/current/styles/ shThemeEmacs.css " rel="stylesheet" type="text/css" />
Output
Fade To Grey
<link href="http://alexgorbatchev.com/pub/sh/current/styles/ shThemeFadeToGrey.css" rel="stylesheet" type="text/css" />
Output
Midnight
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" />
Output
RDark
<link href="http://alexgorbatchev.com/pub/sh/current/styles/ shThemeRDark.css " rel="stylesheet" type="text/css" />
Output
3) The specific brush(es) needed for the blog
Depending on the structured linguistic communication that needs to hold out highlighted, the corresponding brush needs to hold out imported. The SyntaxHighlighter site contains a consummate listing of all available brushes. In this event nosotros volition add together the brushes for 'PHP' .
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/ shBrushPhp.js " type="text/javascript"></scrip>
Only add together the needed brushes every bit for each page the brushes are retrieved from alexgorbatchev.com (the SyntaxHighlighter site) together with this increases your spider web log page charge times!
4) The configuration script
After all needed dependencies convey been added nosotros postulate to enable a specific trend for Blogger together with teach SyntaxHighlighter to highlight all code blocks establish on the spider web page. This is done yesteryear adding a JavaScript snippet every bit shown below.
<script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
These are or together with then related topics to these topic:
- How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting
- How to Use Google Prettify Syntax Highlighter With Blogger
Installation Procedures
• Login into your blogger dashboard
• Click on Theme follow yesteryear Edit HTML
• Press CTRL+F together with search for </head>
• Copy together with glue the below code earlier </head>
<!-- 'SyntaxHighlighter' additions START --> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <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/ shBrushPhp.js " type="text/javascript"></script> <script language="javascript" type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script> <!-- 'SyntaxHighlighter' additions END -->
• Finally Click on Save
Note:If you lot convey follow this steps successfully,you convey implemented SyntaxHighlighter to your blogger blog.
SyntaxHighlighter Usage
In social club to role SyntaxHighlighter nosotros postulate to roll the department to hold out highlighted alongside an XML tag called <pre>. This tag has 1 required parameter called 'brush' which is the same brush that was added inwards department iii of the higher upwards setup.
For this event nosotros volition add together a HelloWorld PHP to a <pre> tag alongside a 'php' brush . Copy the below code together with glue it within a Blogger post.
Make certain all correct angle brackets within the <pre> tags are HTML escaped, inwards other words all < (less than character) must hold out replaced alongside “<” (without quotes)!
<pre class="brush:php"> <?php $hello = "Hello World"; echo $hello; ?> </pre>
SyntaxHighlighter Options
In improver to the mandatory 'brush' parameter, the <pre> tag has a publish of optional parameters. For event it is possible to highlight 1 or to a greater extent than lines to focus the reader’s attending yesteryear adding the 'highlight' parameter every bit shown below. Checkout the full listing of additional parameters that tin hold out configured.
<pre class="brush:php; highlight: [3,4,5]"> <?php $hello = "Hello World"; echo $hello; ?></pre>
SyntaxHighlighter is an open source Java Script customer side code syntax highlighter.
