1. Download Syntax Highlighter from Google
2. Extract files and upload them to a webserver ([your URL])
3. Edit your template and replace
</div></div> <!-- end outer-wrapper -->
</body>
</html>
by
</div></div> <!-- end outer-wrapper -->
<link href='[your URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='[your URL]]/shCore.js' type='text/javascript'/>
<script src='[your URL]/shBrushCpp.js' type='text/javascript'/>
<script src='[your URL]/shBrushCSharp.js' type='text/javascript'/>
<script src='[your URL]/shBrushCss.js'type='text/javascript'/>
<script src='[your URL]/shBrushJava.js' type='text/javascript'/>
<script src='[your URL]/shBrushJScript.js' type='text/javascript'/>
<script src='[your URL]/shBrushSql.js' type='text/javascript'/>
<script src='[your URL]/shBrushXml.js' type='text/javascript'/>
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag){
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++){
if (elements[i].getAttribute("name") == name) {
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);
} else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf =
//"[your URL]/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
</body>
</html>
4. Write your post and add source code (in the HTML tab) using either
<pre name="code" class="java">
// your code here
</pre>
or
<textarea name="code" class="java">
// your code here
</textarea>
As an example, the following code
<textarea name="code" class="java">
/**
* Hello World Example
*/
class HelloWorld {
public static void main(String[] args) {
String message="Hello World!";
System.out.println(message);
}
}
</textarea>
becomes
/**
* Hello World Example
*/
class HelloWorld {
public static void main(String[] args) {
String message="Hello World!";
System.out.println(message);
}
}
Note:
- When posting XML or HTML, replace
<by<and>by> - change
class="java"as needed to java, csharp, css, xml, html, ... (complete list) - JavaScript removes <br/> tags because blogger automatically adds them in case of a line brake but syntax highlighter would display them in plain text
