In articles about programming it is very important to embed source code so that people can see the code and even download it directly. Sometimes I include code snippets in my posts and the code reads much nicer if the syntax is highlighted. There are different ways to embed source code from different programming languages in HTML and in this post I comment on them.
The different methods for embedding source code in internet pages can be distinguished into three classes:
Conversion of source code to HTML
This method requires you to format your source code to HTML before posting it. It has the advantage that you don't have to rely on third-party code and you don't need to load external scripts.
I found vim2html (website inactive now) quite useful for this purpose. As the name says, Vim2Html takes advantage of the vim editor, which does syntax highlighting for many different programming languages. Vim2html extracts the highlighting and converts it to html, which I then only have to insert here. Gvim has the option of converting to HTML already in the menu.
Escaping Special Characters
If you want to embed code into HTML (for example in your template) you have to convert HTML special characters such as &, <, >. If you want to embed code into posts you only must convert characters < and > (but are free to additionally convert &).
Try it out how conversion works in the form below. Paste or write your code and see how it converts.
You might want to use the HTML escaper to have more options. The above converter is based on code by bloggerfunda.
To let text standout, you can always use common HTML style attributes such as <b></b> or <i></i>, or color attributes.
Javascript library
This method has the advantage that you can directly insert your source code without any pre-formatting. It is cheap for your web server, because formatting is client-side. You include a javascript library in your pages which converts the source code to HTML and highlights it. Alex Gorbatchev’s syntaxhighlighter Google Code project gives that functionality. It supports the languages C++, C#, CSS, Delphi, Pascal, Java, Java Script, PHP, Python, Ruby, Sql, Visual Basic, XML/HTML, among others.
External Hosting Service
This method has the advantage that it is lightweight for both the web server and the client browser. You have the disadvantage of being dependent on a third-party service. You copy your source code to the service and include an embed script to include it on your web site. Often this embedding allows conversion to plain text and direct download of the code.
Examples for such services include pastie.org, snipplr and DZone Snippets.
Ow.. thanks, sometimes I get errors warning when I paste wrong codes in blogger, because I need to parse it first :)
@Online Dating Tips: Entering code in blogger can be very painful. The tool above helps for entering HTML or javascript codes.
Subscribe to replies to this post
This conversation is missing your voice. Your feedback is appreciated.
Post a Comment
You can use some HTML tags, such as <b>, <i>, <a>
You can follow the discussion of this post by subscribing.
You are free to include information from this article on your own site if you provide a backlink. You can use the following markup: