Add Syntax Highlighting To Your Blog With VIM

http://alexanderle.com/blog/2012/03/17/syntax-highlighting-with-gvim.html

by alexcsm • 14 years ago

134 39 14 years ago

oacgnol• 14 years ago

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.

tikhonj2• 14 years ago

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.

freestyler2• 14 years ago

M-x htmlize-buffer

tikhonj2• 14 years ago

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.

daflip• 14 years ago

VIM too can be told use span tags and css rather than lots of messy font tags, relevant .vimrc goodness:

let html_use_css=1

let use_xhtml = 1

ComputerGuru• 14 years ago

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.

perlgeek2• 14 years ago

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• 14 years ago

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

jlarocco• 14 years ago

I had the same complaint and wrote a script to create static HTML from GitHub's Gists. I added the gist CSS rules to the rules for the WordPress theme I'm using, and now I can copy/paste the generated HTML into blog posts without fetching from GitHub.

It requires Python3 and PyQt (to execute Javascript), so it's pretty heavy weight, but I have them installed anyway, so it's worked well for me.

A brief explanation and the code is here: http://jlarocco.com/2011/12/22/static-gist-creator/

And just the code is here: https://gist.github.com/1513192

aidos2• 14 years ago

Unfortunately Gists aren't very viewable on a mobile (certainly on an iPhone) as they're truncated and there's no way to scroll to the right. A number of times I've been disappointed to find articles (The Zen of R that's on the front page at the moment, for example) that I can't read. There's a button to view in raw but it's a bit of a shame that I can't view the content with highlighting and proper (non)wrapping.

apl• 14 years ago

  > (...) and there's no way to scroll to the right

Just swipe using two fingers, and everything works as intended.

dave1010uk• 14 years ago

Gists also don't show up in some (most?) RSS readers.

perlgeek2• 14 years ago

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.

njharman• 14 years ago

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

johncoltrane• 14 years ago

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

michaelfairley• 14 years ago

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

drtse4• 14 years ago

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

davidcuddeback• 14 years ago

Thanks. Pygments looks better than other solutions I've looked at. I just found a Ruby wrapper for Pygments: https://github.com/tmm1/pygments.rb

espeed• 14 years ago

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

zxy• 14 years ago

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

versiondiff• 14 years ago

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.

yaix• 14 years ago

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

rpearl• 14 years ago

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

throwaway7834• 14 years ago

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• 14 years ago

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

Although it creates some blank CSS.

mackyinc• 14 years ago

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

drivebyacct22• 14 years ago

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• 14 years ago

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• 14 years ago

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.

drivebyacct22• 14 years ago

The syntax schemes just either never have the number of unique keyword(-types) available or I assume since it's the case for every language I use... it's not possible with vim. If it is, then I lament the inferior set of default syntax highliting.

And yeah, I use gvim for the greater color palette. I'd take a screenshot, but my current tether is on 3G and my server is taking too long to launch Gvim over X

kmfrk• 14 years ago

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• 14 years ago

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.

matthiasb• 14 years ago

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

sharth• 14 years ago

You can generally edit the output with the following options:

    let html_use_css = 1
    let use_xhtml = 1

dfc2• 14 years ago

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

am29• 14 years ago

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

dfc2• 14 years ago

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

Add Syntax Highlighting To Your Blog With VIM

Related Stories