
Add Syntax Highlighting To Your Blog With VIM - alexcsm
http://alexanderle.com/blog/2012/03/17/syntax-highlighting-with-gvim.html
======
ComputerGuru
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.

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.

~~~
perlgeek
The key is to store the original, and to display the tohtml output.

I'm kinda skeptical about embedding stuff from external sites; the more
external dependencies you have, the less reliable your own blog becomes.

~~~
olalonde
I guess he estimates that is is more likely for him to loose the original than
for gist to shutdown.

------
espeed
I'm partial to ReStructuredText (rst) as the markup language for blog entries
instead of markdown because you can extend rst with custom directives.

In Lightbulb, I used the rst Pygments CodeBlock directive by Georg Brandl
([https://github.com/espeed/lightbulb/blob/master/lightbulb/di...](https://github.com/espeed/lightbulb/blob/master/lightbulb/directives/pygments_code_block_directive.py))
to incorporate code blocks like in Sphinx:

    
    
      .. code: python
       
         >>> from bulbs.neo4jserver import Graph
         >>> g = Graph()
    

ReStructuredText also allows you to easily add CSS classes to the markup
without dropping down into the raw HTML. The rst container directive
([http://docutils.sourceforge.net/docs/ref/rst/directives.html...](http://docutils.sourceforge.net/docs/ref/rst/directives.html#container))
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.

See Jason Santa Maria's 12 min talk on this design concept
<http://vimeo.com/4394152>.

------
tikhonj
This is an awesome feature. Naturally, Emacs also supports this, right out of
the box. Just use M-x htmlfontify-buffer.

Here's a sample of the output:
<http://inst.eecs.berkeley.edu/~tikhon/Interpreter.hs.html>

EDIT: Also, note that while the VIM one uses a bunch of <font color="...">
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.

~~~
freestyler
M-x htmlize-buffer

~~~
tikhonj
Hmm, on mine (GNU Emacs 23.3.1 on Fedora) it's M-x htmlfontify-buffer. It came
with the Emacs distribution as standard. I suspect htmlize-buffer is either
from some external package or from a different version of Emacs.

~~~
freestyler
It's from an external package called htmlize
<http://www.emacswiki.org/emacs/Htmlize>

------
michaelfairley
Pygments (<http://pygments.org/>) will also turn code into syntax highlighted
HTML.

~~~
drtse4
And then, if you need it, you can turn your vim theme in a pygments-compatible
css: [http://www.uraimo.com/2011/09/21/from-vim-theme-to-
pygments-...](http://www.uraimo.com/2011/09/21/from-vim-theme-to-pygments-
css/)

------
oacgnol
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.

------
zxy
It seems the output uses the <font> element. That element has been deprecated
since HTML4(<https://developer.mozilla.org/en/HTML/Element/font>).

~~~
versiondiff
I think that depends on what version of Vim you are using. I have Vim 7.3 and
it is creating a CSS class for each token type.

------
throwaway7834
Doesn't basically every text editor support something like this? E.g.
Notepad++ has NppExport->Export to HTML (Example output:
<https://gist.github.com/2056841>)

~~~
Kenan
It surprisingly does a good job of mimicking the editor theme:
<http://jsfiddle.net/9f5PQ/>

Although it creates some blank CSS.

------
perlgeek
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.

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.

------
kmfrk
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?

Currenly, I just decorate the <pre> and <code> tags with CSS (as much as I
would love line numbers).

~~~
tambourine_man
_as much as I would love line numbers_

I don't know if I understood you correctly, but you could add line numbers
with before pseudo elements and use JavaScript to add numbers to its content.
No need to mess with the markup, just CSS and JavaScript.

------
dfc
Insert plug for pandoc. Among the many benefits pandoc provides is easy code
highlighting. By defualt it uses pygments as others have suggested.

[http://johnmacfarlane.net/pandoc/README.html#verbatim-
code-b...](http://johnmacfarlane.net/pandoc/README.html#verbatim-code-blocks)

~~~
am29
pandoc uses kate-highlighting to highlight code snippets and not pygments

~~~
dfc
I'm sorry you are correct. I meant to say that by default it looks just like
pygments.

------
matthiasb
The best syntax highlighter I found is SyntaxHighlighter from Alex Gorbatchev.
<http://alexgorbatchev.com/SyntaxHighlighter/> The JS is hosted on AWS.

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

------
yaix
I hoped for a command line option. Isn't there some plugin for sed maybe? Like
sed something <code.py >code.html

~~~
rpearl
vim -f +'syn on' +'run! syntax/2html.vim' +'wq' +'q' [file]

produces file.html

Or, use perl's Text::VimColor [http://search.cpan.org/~rwstauner/Text-
VimColor-0.14/lib/Tex...](http://search.cpan.org/~rwstauner/Text-
VimColor-0.14/lib/Text/VimColor.pm)

------
sharth
You can generally edit the output with the following options:

    
    
        let html_use_css = 1
        let use_xhtml = 1

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

------
drivebyacct2
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.

I'd love a JavaScript plugin to parse TextMate theme files and highlight
blocks of code.

~~~
deanproxy
I don't see why... I've been able to do almost any color scheme from textmate
or other editors. I have my favorite color scheme from textmate in VIM
(Sunburst). Just make sure you're either using gvim or your terminal has 256
colors turned on.

~~~
bphogan
The 256 color thing is the most important and was something I struggled with
for a few years before I figured out the problem - on Linux it was always
fine, but on OSX, wow it was bad. Couldn't figure out why till someone else
said the fact same thing - 256 color mode.

------
njharman
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).

