Syntax highlighter is a way to make your snippet codes look great in the blog post, but how?
In this article we try to show how it's done.
The longest way is using CSS and Javascript to build the code, and integrate it into your blog, the short way is simply use the Syntax Highlighter made by Alex Gorbatchev.
Open your Blogger Dashboard, go to Template and click Edit HTML.
Insert the following library code above the </head> tag, if you insert the code under the </head> tag, the code will not work.
<!--SYNTAX HIGHLIGHTER BEGINS--> <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> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushCss.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/shBrushJScript.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/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/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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!--SYNTAX HIGHLIGHTER ENDS-->
How to use it?
Type your code snippet inside the <pre class="brush:nama_brush"> tag and close it with </pre> tag, the brush can be found here.
the example:
<SCRIPT LANGUAGE="JavaScript">
function slide(jumpSpaces,position) {
var msg = "This JavaScript will slide in your desired message....Cool...isn't it???.......drink more coffee"
var out = ""
if (endScroll) {return false}
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if (position != msg.length) {
var cmd = "slide(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
} else {
scrolling = false
return false
}
return true
}
function ccSetup() {
if (scrolling)
if (!confirm('Re-initialize slide?'))
return false
endScroll = true
scrolling = true
var killID = window.setTimeout('endScroll=false',6)
scrollID = window.setTimeout('slide(100,0)',10)
return true
}
var scrollID = Object
var scrolling = false
var endScroll = false
</SCRIPT>
remember, add the js generator from the library code above with the apropriate generator code with the inserted code.for example:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>if you want to insert the bash shell code.
note: if you enter the web programming code directly typically the post goes wrong, before the post please encode the code first here.
Hopefuly this article is helpfull.
Inspired from here

0 comments:
Post a Comment