Styling Script Code with Syntax Highlighter Blogger

Agratitudesign 20:50 Blog Note , Web Design

Create the articles on blog that using any script code snippets inside without using the style will look so complicated and maybe make some other users boring. Especially if you use script code snippets that was very long, this is make things looks difficult, script code snippet looks like an alien language that very hard to understand, especially for the beginners. Surely it would be better if script code snippets displayed with different style with special size and family of font with others that and given the emphasis using different colors that are used depending on the type script code snippets. So the display of the script code snippets more structured, easy to understand and looks more beauty to the content of our blog content.

Using syntax highlighter by Alex Gorbachev gives a solution of about that case, that is make the style script code snippets with syntax highlighter, in which the syntax components script code are distinguished by the color that look so nice. So the script code snippets looks like written in an automatic syntax of software programme. There are several style script code for the script code snippet that can be an alternative for you. But personally i think syntax highlighter is looks more complete, elegant, the best to use on the article of your content blog.

To make the style to the script code snippets of our blog content, there are some scripts link of js and css that we have to insert into the head of the template that we use. Some Links of brush js script are not all we have to use, insert any brush script js link only that we use. Then choose one color theme css syntax highlighter.

Color themes CSS Style Syntax Highlighter:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

Brush js Scripts Link Syntax Highlighter :

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.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/shBrushCpp.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/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.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/shBrushScala.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 Core CSS and Initialize Shbrush Javascript :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Suppose the type of script code snippets is that we will insert are html, css, javascript, php, and sql, then color theme that we use is themeMidnight.

1. Go to the dashboard of your blog, click on the template>edit html. Find jquery min.js on by pressing Ctrl+F inside script code on your template, and type min.js and just put the syntax highlighter script, below jquery.min.js link or around the head of the template.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<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/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

2. After selecting some brush script js and color theme that used, find any script code snippets html, css, javascript, php and sql that you want to insert into the content in html mode of editor post. You must insert the script code snippets like this!

<pre class="brush:html">… html parse code  that you want to insert…</pre>
<pre class="brush:css">… css code that you want to insert…</pre>
<pre class="brush:js">… javascript or jquery code,in some case must be parsed depending on complexity of your template…</pre>
<pre class="brush:php">…php code that you want to insert…</pre>
<pre class="brush:sql">…sql or database code that you want to insert…</pre>

Especially for html code snippets, parse the code at first, because we will insert the code on the html mode on the content editor blogger. Actually With the way like the script code snippets on the content post will shown more structured, easy to look and elegant. For more clearly let’s see this video tutorial !

Share This Article :