Add Syntax Highlighting To Your Blog With VIM

Probably a little too off-topic, but after years of using similar "custom" methods of doing syntax highlighting, trying several WordPress plugins to automatically highlight, and several other options, I have found embedding GitHub Gists in blog posts to be the most reliable and lowest maintenance approach.<p>This probably won't matter to most people, but if you're the kind of person that has tutorials or examples or any other kind of thing you try to keep up to date in a blog post over the years, things like TOhtml make it hard to quickly edit and maintain the code, while WordPress plugins invariably do a poor job, add too much to the processing time (though you should be using a caching solution), and break on upgrade. For me, GitHub's Gists were a godsend.

I'm partial to ReStructuredText (rst) as the markup language for blog entries instead of markdown because you can extend rst with custom directives.<p>In Lightbulb, I used the rst Pygments CodeBlock directive by Georg Brandl (<a href="https://github.com/espeed/lightbulb/blob/master/lightbulb/directives/pygments_code_block_directive.py" rel="nofollow">https://github.com/espeed/lightbulb/blob/master/lightbulb/di...</a>) to incorporate code blocks like in Sphinx:<p><pre><code> .. code: python &#62;&#62;&#62; from bulbs.neo4jserver import Graph &#62;&#62;&#62; g = Graph() </code></pre> ReStructuredText also allows you to easily add CSS classes to the markup without dropping down into the raw HTML. The rst container directive (<a href="http://docutils.sourceforge.net/docs/ref/rst/directives.html#container" rel="nofollow">http://docutils.sourceforge.net/docs/ref/rst/directives.html...</a>) enables you to add divs so you can allow the content to drive the page layout instead of always being boxed in by the same default template.<p>See Jason Santa Maria's 12 min talk on this design concept <a href="http://vimeo.com/4394152" rel="nofollow">http://vimeo.com/4394152</a>.

This is an awesome feature. Naturally, Emacs also supports this, right out of the box. Just use M-x htmlfontify-buffer.<p>Here's a sample of the output: <a href="http://inst.eecs.berkeley.edu/~tikhon/Interpreter.hs.html" rel="nofollow">http://inst.eecs.berkeley.edu/~tikhon/Interpreter.hs.html</a><p>EDIT: Also, note that while the VIM one uses a bunch of &#60;font color="..."&#62; tags, the Emacs one uses a bunch of span tags with reasonable class names like "function-name" or "string", so it produces much nicer code and is easy to use with your own CSS.

Pygments (<a href="http://pygments.org/" rel="nofollow">http://pygments.org/</a>) will also turn code into syntax highlighted HTML.

I just tried this out and it works perfectly. A worthwhile note is that it also outputs line numbers if you enable them in Vim.

It seems the output uses the &#60;font&#62; element. That element has been deprecated since HTML4(<a href="https://developer.mozilla.org/en/HTML/Element/font" rel="nofollow">https://developer.mozilla.org/en/HTML/Element/font</a>).

Doesn't basically every text editor support something like this? E.g. Notepad++ has NppExport-&#62;Export to HTML (Example output: <a href="https://gist.github.com/2056841" rel="nofollow">https://gist.github.com/2056841</a>)

FWIW I'v been using Text::VimColor (Perl interface to vim's syntax hilighting) on my blog for several years now. Mostly because I talk a lot about Perl 6, and there aren't many hilighters for Perl 6 code around.<p>In the beginning it sometimes produced Mojibake, which I finally nailed on a missing locale. And it's a bit slower than the usual hilighter, because it spawns a new vim process for each snippet to be hilighted. Still a good choice.

Related question: are all syntax highlighters awful to read for people who depend on accessibility tools, or is there actually a way to present code in a way that is accessible to these people?<p>Currenly, I just decorate the &#60;pre&#62; and &#60;code&#62; tags with CSS (as much as I would love line numbers).

Insert plug for pandoc. Among the many benefits pandoc provides is easy code highlighting. By defualt it uses pygments as others have suggested.<p><a href="http://johnmacfarlane.net/pandoc/README.html#verbatim-code-blocks" rel="nofollow">http://johnmacfarlane.net/pandoc/README.html#verbatim-code-b...</a>

The best syntax highlighter I found is SyntaxHighlighter from Alex Gorbatchev. <a href="http://alexgorbatchev.com/SyntaxHighlighter/" rel="nofollow">http://alexgorbatchev.com/SyntaxHighlighter/</a> The JS is hosted on AWS.

I'm using pygments, I will give this one a try.

I hoped for a command line option. Isn't there some plugin for sed maybe? Like sed something &#60;code.py &#62;code.html

You can generally edit the output with the following options:<p><pre><code> let html_use_css = 1 let use_xhtml = 1</code></pre>

I've used `:TOhtml` for the first time last week for an internal presentation. It's quick and easy to modify.

Unfortunately, with the advent of TextMate/Sublime Text 2, I'm always disappointed when returning to VIM's syntax highlighting. It leaves a lot to be desired.<p>I'd love a JavaScript plugin to parse TextMate theme files and highlight blocks of code.

This is not sophisticated, nor webscale, nor using the fad of the week. But, it is non-the-less awesome because it does exactly what OA needs, right now, using a context appropriate amount of effort (i.e. near to none).