WebC Syntax Highlighting in NeoVim

#NeoVim#WebC

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:

treesitter-config.lua
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:

treesitter-config.lua
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.