1.5K
Hi,
This post is about all Blogger, who write code and want to share their code on their website of community. If the code is in HTML, JavaScript or other browser understandable language, browser renders and displays output instead of code. Visitor will see nothing instead of garbage while in case of other programming languages, formatting, wrapping, alignment and other styles are lost and user is confused about its actual structure.To remove this we are going to implement SyntaxHighlighter functionality in our blog. Here we will work with Blogger blog, the method is same for html webpage. SyntaxHighlighter is a JavaScript library written by Alex Gorbatchev in year 2004. Because of its feature, it becomes more famous and still maintained at his website.
This post is about all Blogger, who write code and want to share their code on their website of community. If the code is in HTML, JavaScript or other browser understandable language, browser renders and displays output instead of code. Visitor will see nothing instead of garbage while in case of other programming languages, formatting, wrapping, alignment and other styles are lost and user is confused about its actual structure.To remove this we are going to implement SyntaxHighlighter functionality in our blog. Here we will work with Blogger blog, the method is same for html webpage. SyntaxHighlighter is a JavaScript library written by Alex Gorbatchev in year 2004. Because of its feature, it becomes more famous and still maintained at his website.
Procedure
Include the JavaScript files in head section of your website code using External Script linking method. For blogger, open your Template and search for closing of head tag.
</head>
Then paste these links for including files. You can also download latest version from Original Website and use in your own web host also but blogger does not allow you to upload JavaScript files.
<link href='http://www.johnbhatt.com/SharedResources/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://www.johnbhatt.com/SharedResources/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shCore.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushXml.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://www.johnbhatt.com/SharedResources/scripts/shBrushSql.js' type='text/javascript'/>
You need to include file that you are going to use. Above links are of default CSS style sheets and CSS, JavaScript, XML, CSharp, Php, SQL languages. XML includes HTML, XHTML and XML. Next step is to write a simple JavaScript function and tell browser to run the code.
<script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
Now you are all set to write code in your post. Open editor in HTML mode and write code inside HTML pre (Pre formatted) tag with a class attribute (stylesheet identifier) defining its programming language. Lets see below example to get clear view.
<pre class="brush:html"> // Replace your brush with your own. <html> <head> <title>Adding SyntaxHighlighter to Blogger Blog by John Bhatt</title> </head> <body> Body can contain codes also, that too highlighted and formatted, well aligned. Congrats. </body> </html> </pre>
Important: You may have to change html tags < and > to html ISO codes. Simply open any code editor Notepad will also rock. Open Replace box using Ctrl+H shortcut or from Edit menu and search for < (Less than) and replace with <. Once again search for > (Greater than) and replace with > using Replace all method. This will not produce any error in case of HTML and other html tags.
Output is in your page. We have done this using this plugin. You have many themes (styles) to make it look better. You can include CSS as per your requirement.
Do not forget to share and post suggestions.
+John Bhatt
+John Bhatt
