Put a code in your post – code highlighting

As a programmer you often want to share some piece of nice code by placing it in your post on the blog.

You can just wrap it in <code> or <pre> tags and play with CSS to make it more readable. But it is not enough usually. Many of us are accustomed to have code highlighting for better readability.

I have seen and tried a dosen of solutions myself: simple “code-to-html” like CHIP, some simple JavaScript solutions like Code Prettifier or mature like GeSHi.

There are server and client side solutions, ASP, PHP or JS based. You can choose one best for you.

As a WordPress user, you may also be interested in easy integration via WP plug-in (GoSHi wrapper).

I have used the following criteria in my search:

  • it should support many modern languages (SQL, C++, C#, HTML, JavaScript, Delphi, …)
  • it should be easy to integrate in WordPress, do not use tags and structures which will violate XHTML compliance requirements (I prefer to have my pages to pass W3C XHTML validation).
  • it should be easy to use within BBcode-like WYSIWYG editor
  • have some basic Copy/Paste/Print support

I did not much care about server or client side implementation.

My choice was a SyntaxHighlighter by Alex Gorbatchev. Few things with original code were:

  • no out of the box support for WordPress
  • tag syntax used by default was breaking W3C validation

Ok, choice was to find someone already adopted it or create my own plug-in. Lucky for me there was one already. It was using BBCode to wrap the snippet but it did not address an issue of the invalid tags.

But it was easy to address also – in original code “name” is used to specify that <pre> does represent the code snippet.

Since I am not using this tag for anything else simple replacement in the source code would do the trick:

  1. download and install plug-in
  2. locate shCore.js and look for the following line FindTagsByName(elements, name, ‘pre’);
  3. replace it with FindTagsByName(elements, null, ‘pre’);
  4. save, upload
  5. Update (01/05/2009): With release of latest plug-in version, one more adjustment is required in the WP plugin itself:
    • Locate and Open syntaxhighlighter.php
    • Locate line “$content = str_replace( $match[0], ‘<pre name=”code” class= … “
    • If you are using any WP cache plugins, clear your cache
  6. add code into your blog (this is how it is seen in the editor)

    [sourcecode language=’delphi’]var
      MyImageList: TImageList;
      MyImage: TImage;[/sourcecode]

    and you will get it displayed nicely like shown here.

PS. what you also would get is an ability to print/copy/view the code in easy and convinient way.

Enjoy.

This entry was posted in Delphi, Web-design and tagged , . Bookmark the permalink.

4 thoughts on “Put a code in your post – code highlighting”

  1. Fabricio says:

    GExperts can export source as HTML.

  2. Yes, the same time I needed more generic solution with variety of supported languages.

  3. Michael says:

    Hi,

    PSPad can also export to HTML and has sytax highlighter for many file formats.

    The new welcome page of Delphi 2009 contains a link to a CodeGear site which is capable of doing HTML formatting for Pascal and some other language.

    cu,
    Michael

  4. As I said there are plenty of solutions around. And one can choose more suitable. I am not advocating THE solution, I am just describing one I am using and advantages it presents.

Leave a Reply

  • About

    From being a junior developer all the way to Development Manager position, I was always interested in new technologies. Passionate speaker, IT junky, developer, architect, team lead, and development manager - many hats, one goal - making software better and closer to people’s needs. For the most part I am using my blog as a scratch pad, writing small articles on things which I came across, was asked about more then once, and which would otherwise require additional research again and again.

    View Serguei Dosyukov's profile on LinkedIn
  • Testimonials

    I’m a huge fan of this theme. I’ve got more than 90,000 pictures in my gallery3 running on a Ubuntu...

    Jklobo

    I've been using this [theme] since the start. It is by far the most attractive, feature packed and stable of...

    Rhyull

    The greydragon theme is fantastic. It’s clean, stable and feature rich. It took me a while to decide to move...

    Ed

    more...

  • Categories