How to export syntax highlighting to a web page in Vim

This is one of the more advanced features of Vim, and one that’s not available in a lot of other text editors.  You can actually create an HTML file that has all the text in the file you are editing, colored with Vim’s syntax highlighting.

First of all, make sure you have syntax highlighting turned on.  If it’s not, enter :syntax on to turn on syntax highlighting.

You can create an HTML syntax file in Vim by entering the following simple command:


This will create an HTML file with all the syntax highlighting in the file you’re editing.

Implementations of the :TOhtml script vary. Some create an HTML page with CSS by default, and others create a web page with <font> tags. CSS is better in my opinion because it allows you to more easily change the text and background colors after you’ve created the HTML file. You can toggle CSS by setting Vim’s html_use_css environment variable.

:let html_use_css=1

This will tell Vim to use CSS (of course you have to do this before you type :TOhtml).


Once the file is created, you can edit it as you please. The background color is white by default; I like to change it to black, and I like to make the foreground colors brighter.


The result looks something like this (in Google Chrome):