drunken programmer has been complaining that his blog posts can't include his code properly. So I dug out some research I did a few months ago on how to set up your blog to include code snippets. Of course, some smart cookie has thought of how to do this already.
Here's a quick step by step...
1) add the syntax highlighter css and js to the < head> section of your site.
2) add the required css to the <head> section of your site
3) that's it!!! (some ppl say that you need to set the convert line break option in blogger OFF, but mine is running ok wih it ON)
4) now for actually using the syntax highlighter. make sure that your code is surrounded by <pre> tags. Here is an example
5) note that the brush type specified in this case is "js" so that it will do syntax highlighting appropriate for javascript. The list of all supported brush types can be found here. Note that the brush list matches the javascript import statements you added to your <head> section in step 1.
6) finally, make sure that any content you put in between the <pre> tags are bracket escaped using something similar to this
Here's a quick step by step...
1) add the syntax highlighter css and js to the < head> section of your site.
<link href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/2.0.278/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
<script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.0.278/scripts/shBrushXml.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
2) add the required css to the <head> section of your site
.syntaxhighlighter .line .content .block
{
background: none !important;
}
3) that's it!!! (some ppl say that you need to set the convert line break option in blogger OFF, but mine is running ok wih it ON)
4) now for actually using the syntax highlighter. make sure that your code is surrounded by <pre> tags. Here is an example
<pre class="brush:js">
alert("Hello world");
</pre>
5) note that the brush type specified in this case is "js" so that it will do syntax highlighting appropriate for javascript. The list of all supported brush types can be found here. Note that the brush list matches the javascript import statements you added to your <head> section in step 1.
6) finally, make sure that any content you put in between the <pre> tags are bracket escaped using something similar to this
Comments (0)
Post a Comment