After you have all the necessary JavaScript and CSS files loaded into your web-page (see below for details on that) you have two choices for wrapping your source code. The "pre" method is necessary for CSS feeds, but the "script/CDATA" method handles embedded HTML tags without escaping them. The title is optional for both.
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
convert("<body>Hello</body>");
if (counter <= 10)
return;
// it works!
}
]]></script>
Examples:
print "Hallo"
If you are using Google's Blogger (aka 'blogspot') as I am, you can prepare for syntax highlighting all blog posts via your Design template. Here are the steps:
- Click 'Design' at the top of your blogspot page.
- Click 'Edit HTML' at the top of that page.
- Find the tag which ends the HEAD section, and before the end insert the following:
<head> ... <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> <script type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script> </head>
Add brushes for everything you might use, or try the new autoload feature of version 3.0. Then, you can use the pre or script/CDATA blocks as I've shown at the top of this page. If you need more help, follow these directions. Good luck!
Another option is:
ReplyDeletehttp://google-code-prettify.googlecode.com/svn/trunk/README.html
That's much simpler, but not as flexible.