WebC Syntax Highlighting in NeoVim
I was messing around with WebC from Eleventy over the weekend and ran into a problem getting syntax highlighting to work in NeoVim. The lack of any highlighting was almost a show-stopper. I almost gave up and started editing in VS Code until I found a simple way to get reasonable highlighting to work.
Preliminary Setup
Warning
If you don’t already have NeoVim configured or you’re totally new to setting it up, I don’t recommend trying this until you’re a little more familiar. I’m by no means a NeoVim expert. In fact, I’ve only had my config for a couple of weeks, and it took me a couple of tries to get this right. I don’t know how well the following steps will work with configurations like NvChad or LunarVim either. So, you know, YMMV.
If you’re interested in building your own NeoVim config, this tutorial by Percy Bolmér is a good place to get started.
First, you’ll need to make sure you have the Treesitter plugin installed. If you’re coding in NeoVim you probably already have it, but if you don’t, you can find instructions on their wiki.
The developers of the plugin
recommend running the nightly build of NeoVim,
and you’ll need to make sure you’re following their advice if you’re going to
get this syntax highlighting to work. For me, it was as simple as uninstalling
the 0.8
version of NeoVim and then installing the nightly 0.9
version. I’m
working on an Arch-based distro, so all I had to do was open a terminal and type
the following:
yay -R neovim
When that was finished, I installed the nightly build with the command:
yay nvim-nightly
If you’re running Arch, I recommend using the Chaotic Aur version, so you don’t have to spend time rebuilding the package whenever an update comes out (every night, or every time you get around to running updates).
If you open NeoVim and type :version
, you should get an ungodly amount of
output with NVIM 0.9.0-dev
right up at the top. Congratulations! You’re on the
bleeding edge.
The Actual Config
Find the file where your Treesitter configuration lives. Unless you’re proudly
sharing your dotfiles all over the internet, you’re probably the only person who
knows exactly where that is (again, if you’re new to NeoVim, please go through a
configuration tutorial). For me, it’s in
~/.config/nvim/lua/treesitter-config.lua
. Somewhere down at the bottom, add
the following:
vim.filetype.add({
extension = {
webc = 'webc'
},
filename = {['.webc'] = 'html'}
})
This gives NeoVim the information it needs to understand that .webc
is its own
filetype that should be treated like a .html
file. This doesn’t turn on syntax
highlighting yet. That’s what the next line does:
vim.treesitter.language.register('html', 'webc')
Now we’re registering a new language with Treesitter and telling it to apply the
webc
filetype you just defined. Reload your lua file with the :luafile %
command and open your .webc
file. You should have gloriously highlighted text!
These instructions were cobbled together based on the directions at the Treesitter readme.