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:

:TOhtml

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

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.

CSS

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

Chrome

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s