Syntax highlighting is essential for your blog posts with code snippets. The Just released SyntaxHighlighter 2.0 is a breeze to use and work with.
I will follow you on this post to successfully integrated SyntaxHighlighter 2.0 into your blogger without having to setup an external hosting.
Step 1:
Login into your Blogger go to the Layout tab and then to Edit HTML
Step 2:
browse your template and locate the <head> Tag
add the following javascript includes:
<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushPlain.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCss.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js' type='text/javascript' />
Step 3:
Blogger does not accept <link> tags within the <head> , you need to manually copy&paste css to the <head> tag:
the css required are
http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css
and
http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css
Step 4:
add the following javascript into the head tag :
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.278/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.gutter = false;
SyntaxHighlighter.all();
Step 5:
You now need to wrap the text inside your pre tags which will later include the code snippets. unwakeable provide an excellent css snippet which resolves such issue in almost all modern browsers.
ok, back to the <head> tag , add the following style:
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
That's it ! save you template and Start blogging with code snippets inside <pre> tags.
0 comments:
Post a Comment