alan dipert - SHJS JavaScript Syntax Highlighting for Tumblr

Oct
22nd

Wed

SHJS JavaScript Syntax Highlighting for Tumblr

I’ve gotten SHJS JavaScript syntax highlighting working in Tumblr.

To use it, you’ll have to customize your Tumblr theme. For HTML, CSS and Java highlighting, put this inside <head>:

<script type="text/javascript" src="http://shjs.sourceforge.net/sh_main.min.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_css.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_html.min.js">
</script>
<script type="text/javascript" 
src="http://shjs.sourceforge.net/lang/sh_java.min.js">
</script>
<link type="text/css" rel="stylesheet" href="http://shjs.sourceforge.net/sh_style.css">

To get the pre tag to wrap text, you can add this hack to your CSS:

pre {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     word-wrap: break-word;
}

Finally, run SHJS by making your <body> opening tag look like this:

<body onload="sh_highlightDocument();">

To have the code you paste into posts get highlighted correctly, go into “HTML” mode in the editor and set up the pre with the correct class for the language. So, to highlight Java, you would make your opening pre tag look like this:

<pre class = "sh_java">
Some Java source code...
</pre>

You can find more language definitions and CSS files over at the SHJS download page.

Comments (View)