Do you like to post your code snippets in your blog as below ?
You can download the SyntaxHighlighter from here.
You can either upload the necessary files to your preferred location or you can access them from google-code's SyntaxHighlighter project files. But when accessing them from google code project files, css styles need to be copied and pasted in to your blog's HTML template. It's bit risky, instead you can upload the files in to your website. (https://sites.google.com/ is a really cool place where you can easily upload these files).
To enable code syntax highlighting in your blog posts, you need to add few lines to the html code of your template.
To do this, go to Design -> Template -> Edit HTML -> Proceed
Then add the following lines between <HEAD></HEAD> tags. (you can simply insert them just before the </HEAD> tag).
Then insert the following lines just before </BODY> tag and save the template. Now the changes to the template are done.
(ie. cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt)
But, remember one thing, you can't include XML, HTML code as it is. < and > symbols will cause issues in displaying your blog post. So replace them with their counterpart escape characters. For replace < with < and replace > with >
You can read more on SyntaxHighlighter from here.
Once you create a site on https://sites.google.com/ go to More -> Manage site -> Attachments. There you can upload your files. :)
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
It looks really pretty. SyntaxHighlighter is the solution for it.You can download the SyntaxHighlighter from here.
You can either upload the necessary files to your preferred location or you can access them from google-code's SyntaxHighlighter project files. But when accessing them from google code project files, css styles need to be copied and pasted in to your blog's HTML template. It's bit risky, instead you can upload the files in to your website. (https://sites.google.com/ is a really cool place where you can easily upload these files).
To enable code syntax highlighting in your blog posts, you need to add few lines to the html code of your template.
To do this, go to Design -> Template -> Edit HTML -> Proceed
Then add the following lines between <HEAD></HEAD> tags. (you can simply insert them just before the </HEAD> tag).
<link href='YOUR-UPLOADED-LOCATION/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <script src='YOUR-UPLOADED-LOCATION/shCore.js' type='text/javascript'> </script> <!--According to the programming language you want to post in your blog--> <!--include the following lines as necessary--> <!--Below 2 lines are for java codes and xml codes--> <script src='YOUR-UPLOADED-LOCATION/shBrushJava.js' type='text/javascript'> </script> <script src='YOUR-UPLOADED-LOCATION/shBrushXml.js' type='text/javascript'> </script>Of course you can insert the relevant lines for all the available programming languages in SyntaxHighlighter. But this will take some more time to load your blog. So include only necessary languages.
Then insert the following lines just before </BODY> tag and save the template. Now the changes to the template are done.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Now, you can compose a blog post with code snippets. When including code snippets, you should write them between <pre></pre> tags. To do this you have to switch the HTML tab in your blog editor.<pre name="code" class="java"> ...Java code goes here... </pre>To insert a Java code you should mention "java" for the "class" attribute. Like this, for all the available programming languages, there is a specific attribute value for "class" attribute. You can find the supported language list and the relevant attribute values from here.
(ie. cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt)
But, remember one thing, you can't include XML, HTML code as it is. < and > symbols will cause issues in displaying your blog post. So replace them with their counterpart escape characters. For replace < with < and replace > with >
You can read more on SyntaxHighlighter from here.
A small note on how to upload a file on to https://sites.google.com/
Once you create a site on https://sites.google.com/ go to More -> Manage site -> Attachments. There you can upload your files. :)
No comments:
Post a Comment