SyntaxHighlighter
can insert colored code snippets on a web page. It helps a
developer/coder to post code snippets online with ease and have it look
pretty. It's 100% Java Script based and it doesn't care what you have
on your server.
Download SyntaxHighlighter and follow the steps given below to set up it in your blog.
Extract the files and host it somewhere in the web. Google Page Creator can be used for this purpose.
No need to add all the files. Just upload the javascript files of the programming languages you use.
Login to Blogger and Go to Layout > EditHTML. Check Expand Widget Templates.
Add the code given below between the <head> and </head> section of your template.
Add the code given below just before </body> tag.
Save Template and you're done.
Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.
One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed.
An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason javascript didn't work.
There's a way to pass a few configuration options to the code block. It's done via colon separated arguments.
Download SyntaxHighlighter and follow the steps given below to set up it in your blog.
Extract the files and host it somewhere in the web. Google Page Creator can be used for this purpose.
No need to add all the files. Just upload the javascript files of the programming languages you use.
Login to Blogger and Go to Layout > EditHTML. Check Expand Widget Templates.
Add the code given below between the <head> and </head> section of your template.
<link href='http://[YOUR OWN PAGE].googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushVb.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://[YOUR OWN PAGE].googlepages.com/shBrushRuby.js' type='text/javascript'/>
Add the code given below just before </body> tag.
<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}window.onload = start;
</script>
Save Template and you're done.
Placing the code in the post editor
Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.
<pre name="code" class="c-sharp">
... some code here ...</pre>
One important thing to watch out for is opening triangular bracket <. It must be replaced with an HTML equivalent of < in all cases. Failure to do won't break the page, but might break the source code displayed.
An alternative to <pre> is to use <textarea> tag. There are no problems with < character in that case. The main problem is that it doesn't look as good as <pre> tag if for some reason javascript didn't work.
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...</textarea>
Extended configuration
There's a way to pass a few configuration options to the code block. It's done via colon separated arguments.
<pre name="code" class="html:collapse">
... some code here ...</pre>
0 التعليقات: