⌨️ Simple HTML code highlighting workflow with vim

Lately I've wanted to post code snippets to my website, but I want them to look pretty and highlighted instead of just using boring old <pre> tags. I know a lot of people use fancy scripts to highlight text client-side, but one of the rules I've set for myself in building this website is to avoid Javascript. Besides, is all that effort and computation really needed for some colored text? So I decided to find a workflow in which I can export my code into pre-formatted HTML.

I recently put some effort into customizing vim, and after trying a bunch of themes settled on Edge. Staring at my beautifully-highlighted code in vim, I wondered if I could just replicate the same effect on my website. I quickly found the vim TOhtml function, which does exactly that! All you have to do is run TOhtml in vim, and it outputs a formatted HTML file complete with CSS rules that color different types of syntax exactly how it's displayed in the editor. Hoorah!

After messing with TOhtml for a while, I realized that it was not actually outputting the same syntax highlighting that I was seeing in my terminal. For example, functions appeared light blue to me in vim, but the exported HTML did not discern them at all. It took me a long time to realize that the issue was with my color scheme, Edge! I have no idea why, but TOhtml does not play well with Edge and ignores some of its syntax highlighting rules. It also seems to forget that I have true colors turned on! I tried to run TOhtml using the popular Solarized scheme, and it worked without hitch!

...but I want to use the Edge color scheme. And besides, if I ever want to switch color schemes in the future, I don't want to worry about their compatibility with my current syntax highlighting workflow. In my .vimrc I've created a variable that defines my current color scheme of choice:

" Use edge color scheme: https://github.com/sainnhe/edge
let g:usual_colorscheme = "edge"

" Set our colorscheme to the one I've defined above
execute "colorscheme ".g:usual_colorscheme

By doing that, I can declare a function that temporarily sets my color scheme to solarized when I want to use TOhtml, and then define a command to run it:

" Function to output better syntax-highlighted HTML using solarized
function SolarizedTOhtml()
	colorscheme solarized
	TOhtml
	execute "colorscheme ".g:usual_colorscheme
endfunction

command NEWhtml call SolarizedTOhtml()

It was humorously difficult to define suitable CSS rules for these vimscript snippets, but I think they look very nice considering how simple this system is. Since I'm only exporting code using Solarized now, the same CSS rules should work on future code snippets without much modification, and I'll be able to adjust them all uniformly with ease. The only other adjustments I've made to this setup are the following two settings in my .vimrc:

" For :TOhtml output, remove line numbers
 let g:html_number_lines = 0

" For :TOhtml output, ignore code folding
 let g:html_ignore_folding = 1

Have a beautiful day!