We continue adding new modules to our blog using the
dynamic loader. This time, we will add a very useful module for people who needs to show source code in their posts. The following module will allow you to use the
Alex Gorbatchev's SyntaxHighlighter.
// Enable source code syntax highlighting.
function blogModuleCode()
{
// This code will be executed after all scripts has been loaded.
function callback()
{
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.highlight();
}
// Load the code coloring style.
loadExternalfile("css", loadBlogFile("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"));
loadExternalfile("css", loadBlogFile("http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css"));
// Load the scripts.
scriptChainLoad(["http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js",
"http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"], callback)
}
Then you must enable this module with:
<script type="text/javascript">
blogModules += " code";
</script>
Then according to the SyntaxHighlighter web site, you can write your code as (for example):
<pre class="brush:html">
<!DOCTYPE HTML>
<html>
<head>
<title>
Hello World!
</title>
</head>
<body>
<p>
Hello everyone!
</p>
</body>
</html>
</pre>
No comments:
Post a Comment