I had an experience using Geshi before found SyntaxHighlighter library. Geshi is another excellent library for syntax highlighter. It's also have more supported language compared with SyntaxHighlighter. Why i didn't use Geshi?. actually there is no good reason.. just want to try SyntaxHighlighter and share with you all ;)
Alex also provide hosted library for user who are using hosted service like a blogger. His kindness make me easy to use his library.
hosted file located in http://alexgorbatchev.com/pub/sh/[VERSION].
by the way, here is the step how to use his library
Step 1.
copy below code and paste it in your template file before </head>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css" rel="stylesheet" type="text/css">
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"><br /><script language="'javascript'" src="'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js'/">
shBrushPhp.js and shThemeRDark.css is optional depending on what language and theme that you want to use in syntax highlighter. For more detail you may take a look at bundled syntaxes and bundled theme.
Copy below code and paste it before </script>
<script type='text/javascript'>
//<![CDATA[
function FindTagsByName(container, className, tagName)
{
var elements = document.getElementsByTagName(tagName);
for (var i = 0; i < elements.length; i++)
{
var tagClassName = elements[i].className;
if (tagClassName != null && tagClassName.search(className) == 0)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "brush:", "pre");
FindTagsByName(elements, "brush:", "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]);
}
}
}
SyntaxHighlighter.all();
//]]>
wacha..... done
how to use it?.. type in your html editor
<pre class="brush: php">
//your php code here
</pre>
<pre class="brush: delphi">
//your delphi code here
</pre>
0 comments:
Post a Comment