SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = "scripts/clipboard.swf"; ... SyntaxHighlighter.all();I like the nice formatting and colors, including the ability to highlight lines. This also has a nice floating menu to allow the user to easily copy the code to their editor. If you are curious how to do this, read on! The key is a nice javascript library called Syntax Highlighter from Alex Gorbatchev. If you are comfortable with CSS styles and javascript, it should pretty easy to figure out how to use it and incorporate this library into your website or blog. Alex's website has good reference documentation, but it assumes you know how to hook javascript and css into your website.
If you are like me, and CSS and javascript is still a little unfamiliar, here is the recipe that I figured out. Note that this also works on Blogger, which is what I'm using right now . . . you'll just need to edit your template html.
Step 1: Add the javascript libraries to your webpage
Paste the following into your <head> section:<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPerl.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJavaFX.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js"> </script>Note that each script (except for shCore.js) is for a different programming language. These provide the logic for language-specific highlighting. As you'll see, when you do your actual posting, you'll indicate which language your code is in. So, technically, you don't need all these scripts, just the ones for the languages that you'll be quoting on your page. But it doesn't hurt to just paste the whole block in for simplicity's sake.
Step 2: Link to the SyntaxHighlighter CSS styles
Immediately after the stuff you just pasted (and still within the <head > tag), add the following links:<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css" id="shTheme" />
Step 3: Configure
This step may be optional for you. Basically, we make javascript calls into the library to configure the behavior of SyntaxHighlighter. These options are documented here. For a start, just paste the following in after the previous stuff:<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf'; SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.gutter = true; SyntaxHighlighter.all(); </script>Note the highlighted line about the clipboardSwf. This gives the user a nice floating menu that allows them to easily copy your code to the clipboard. Also note the next line referencing bloggerMode. That needs to be set to true to have the formatting work correctly from within the Blogger.com framework.
Step 4: Post your Code!
Now, whenever you want to post some code, you can enclose it in a <pre> tag with a specialclassindicating which language highlighting you would like (java, c#, etc). The class is of the format: "brush:
<pre class="brush: java">
System.out.println("Hello World!");
</pre>
Have fun!
1 comments:
Post a Comment