Sunday, July 8, 2012

OScript syntax highlighting in pure JavaScript


If you want to display OScript source code in your blog article you may want to render it with syntax highlighting. Modern text editors offer it to improve the code readability and thus increase the productivity. While you could prepare a ready HTML code with font and colour styling, it becomes inconvenient when writing more articles. Why not being able to write raw code and see it "beautified", just like in the IDE?

One of JavaScript syntax highlighting engines available is Alex Gorbatchev's SyntaxHighlihter. It applies styling to raw source code on the client side in the browser, like this:

// Gets a Livelink document.
function DAPINODE GetDocument(Integer id)
  DAPINODE node = DAPI.GetNodeByID(id, -2000, false)
  if !IsError(node) and node.pSubType == $Document
#ifdef DEBUG
    Echo(Str.Format("Document %1: %2", \
                             node.pID, node.pName))
#endif
    return node
  end
end

The source code of the text above looks the same as in the Livelink Builder; just the pre element has special attributes to turn on the styling:

<pre class="brush: oscript;" id="oscript-sample">
// Gets a Livelink document.
function DAPINODE GetDocument(Integer id)
  DAPINODE node = DAPI.GetNodeByID(id, -2000, false)
  if !IsError(node) and node.pSubType == $Document
#ifdef DEBUG
    Echo(Str.Format("Document %1: %2", \
                    node.pID, node.pName))
#endif
    return node
  end
end
</pre>

If you wish the same effect for your articles, follow this:

  1. Make yourself familiar how to include the SyntaxHighlighter on a web site or choose instructions according to you publishing portal. If you use Blogger, there is a way how to encapsulate syntax highlighting in a single post to avoid modifying the blog page template.
  2. Grab the brush shBrushOScript.js which adds the OScript support and optionally the stylesheet shThemeVisualStudioLike.css which defines the style you can see above. Put them to a public host of your choice to be able to refer to them from your blog.
  3. Update your SyntaxHighlighter integration (either in the page template or in the single post) to refer to those two files.

Actually, the Livelink Builder IDE doesn't provide such syntax highlighting yet... If you're interested you can learn about a workaround for the time being.

Enjoy!

2 comments:

Greg Griffiths said...

Great article, just found the time to upgrade part of my Livelink site (http://www.greggriffiths.org/livelink/development/oscript/snippets/) to support this :)

web lol said...

web lol