⌨️ Simple HTML code highlighting workflow with vim
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!