Publishing sample code
Publishing sample code is always a challenge on web pages. When displaying a piece of sample code it is important to ensure the following.
- Syntax coloring - depending upon the programming languages, keywords should be colored
- Provide an easy way to copy the code and re-use it.
To provide these basic functionalities, we are using a Java Script based syntax highlighter library available here. However, to ensure that the code displays correctly, it has to be posted in a certain format. The rest of this post explains this.
Text Editors
Currently there are two types of text editors that you will see on various locations at beyondrelational.com
- WMD Java Script based editor - This is used primarily for the comments. It allows you to do basic formatting of the text when posting comments.
- HTML Editor - This is a WYSIWYG HTML editor that provides more HTML formatting options. This is used in the blogs section and used to create blog posts.
Formatting code listing when posting comments
To display code listing when posting a comment, then do the following:
- Past the sample code into the comment window
- Select the whole sample code
- Click on the code sample button on the toolbar window.
After you post the comment, it will be displayed as follows:
If you take mouse over the code listing, it will provide options to print, view or copy the code sample.
Formatting code sample in the HTML Editor
When using the HTML editor to publish code samples, this has to be done in a slightly different way. This is how the HTML editor looks like.
The editor will display the design tab by default. To ensure the correct formatting, sample code should inserted from the HTML tab of the editor.
Insert the sample code into the HTML view tab within a pair of <pre> blocks as shown in the below illustration.
The opening <pre> block (<pre class="brush: sql") can specify a brush which controls the syntax coloring. Currently the following brushes are supported.
- Cpp
- CSharp
- Css
- Delphi
- Groovy
- Java
- JScript
- Php
- Python
- Ruby
- Sql
- Vb
- Xml
If you do not find the desired brush listed above, use a generic brush plain as <pre class="brush: plain">. This formatting also works when posting to your blog using Windows Live Writer. Just like the HTML editor, the <pre> blocks should be inserted from the HTML view tab of Windows Live Writer.
Please share your comments, questions and feedback
Tags: how to