Who knew that I’ll someday write about web programming, but here I am.

This advice applies to lots of languages and editors, I use C++ and Visual Studio as an example.

Lots of sites use Pygments or highlight.js as a syntax highlighter and here’s how C++ code highlighted in Pygments looks (highlight.js produces almost identical output):

bool LuaScriptManager :: loadScript ( const std :: string & filename ) { int numberOrArgs = lua_gettop ( L ); auto & log = engine_system . get < LogManager > (); if ( ! ( luaL_loadfile ( L , filename . c_str ()) || lua_pcall ( L , numberOrArgs , 0 , 0 ))) { log ( LogManager :: MessageType :: Lua ) << "Loaded script: " << filename ; return true ; } else { // some error log ( LogManager :: MessageType :: Lua_Exception ) << "Failed to load: " << filename ; log ( LogManager :: MessageType :: Lua_Exception ) << lua_tostring ( L , - 1 ); lua_pop ( L , 1 ); // pop error message from stack return false ; } }

But here’s what you can do with Visual Studio by copying HTML markup from it and applying some CSS:

bool LuaScriptManager :: loadScript ( const std :: string & filename ) { int numberOrArgs = lua_gettop ( L ); auto & log = engine_system . get < LogManager >(); if (!( luaL_loadfile ( L , filename . c_str ()) || lua_pcall ( L , numberOrArgs , 0 , 0 ))) { log ( LogManager :: MessageType :: Lua ) << "Loaded script: " << filename ; return true ; } else { log ( LogManager :: MessageType :: Lua_Exception ) << "Failed to load: " << filename ; log ( LogManager :: MessageType :: Lua_Exception ) << lua_tostring ( L , - 1 ); lua_pop ( L , 1 ); return false ; } }

That’s so much better. Let’s see how it works and why it’s much more detailed.

How it works

Here’s stuff that is highlighted here and doesn’t get highlighted in Pygments:

Classes

Parameters

Macros

Enum values

If you set up the color theme in Visual Studio, you can highlight much more stuff:

Namespaces

Local variables

Member variables

Member functions

… and much more!

Why? That’s because highlighters like Pygments, highlight.js highlight using syntax rules. This may be enough for easier languages like HTML, CSS or others, but this isn’t enough for languages as C++ where meanings of tokens are needed for detailed highlighting.

Visual Studio can highlight classes, enum variables, macros etc. because it pre-compiles the code in your project and knows what different tokens mean. So let’s use all that info.

You don't have to use Visual Studio for this, I'm just showing this method which can be useful for people who already do. If you use other IDEs/editors, find out if they support copying HTML markup of your code and use that instead.

Copying HTML markup

Let’s see how better highlighting can be achieved.

First of all, you have to install Productivity Power Tools. In Options, Productivity Power Tools, HTML Copy you need to set EmitSpanClass to true and EmitSpanStyle to false.

Here’s a function signature for example:

bool LuaScriptManager :: loadScript ( const std :: string & filename )

Copying markup from Visual Studio gets you this:

<pre class= "vs-code" ><span class= "keyword" > bool </span> <span class= "cppType - identifier - (TRANSIENT)" > LuaScriptManager </span><span class= "operator" > :: </span><span class= "cppMemberFunction - identifier - (TRANSIENT)" > loadScript </span><span class= "operator" > ( </span><span class= "keyword" > const </span> <span class= "cppNamespace - identifier - (TRANSIENT)" > std </span><span class= "operator" > :: </span><span class= "cppType - identifier - (TRANSIENT)" > string </span><span class= "operator" > & </span> <span class= "cppParameter - identifier - (TRANSIENT)" > filename </span><span class= "operator" > ) </span></pre>

By default Productivity Power tools adds stuff like background color, font, etc. but you can configure it to generate <pre class="vs-code"> in the beginning (this selector will be shown later).

Things like “- identifier - (TRANSIENT)” inside <span> elements can be safely removed. Let’s see what we got, here’s one of the generated <span> elements:

<span class= "cppParameter" > filename </span>

As you can see, the semantic meaning of filename is not lost! We still know that it’s a function parameter and we can highlight it properly.

Setting CSS

Using CSS we can define vs-code like this:

.vs-code { font-family : Consolas ; font-size : 13 ; color : #dfdfbf ; background : #2c2c2c ; ... /* etc. */ }

And now we can define different colors for different C++ tokens:

.vs-code .comment { color : #7a987a ;} .vs-code .keyword { color : #efc986 ; } .vs-code .cppMacro { color : #bd63c5 } .vs-code .number { color : #6e96be ;} .vs-code .operator { color : #dfdfbf ;} .vs-code .cppType { color : #8acccf ; } ... /* etc. */

And that’s it! Enjoy more detailed highlighting and make your articles more readable with it.

Thank you for reading, hope you find this method useful!

Follow me on twitter @EliasDaler to not miss the new stuff!