Understanding code faster with color

It all started when I had like 100 ToDo items on my ToDo.md file.

I wanted my eyes to ignore the ones that are already completed, and see more prominently the ones left.

So I did something like this, mutted the ones done already to the point that I can barely see them, and made more obvious the ones left to do.

Markdown

Markdown buffer highlighting

Neovim checkbox highlights

Here is the tiny snippet living in my after/ftplugin/markdown.lua to give todo lists their color pop:

-- Drop this in after/ftplugin/markdown.lua
vim.api.nvim_set_hl(0, "TodoUnchecked", { fg = "#ff6984" })
vim.api.nvim_set_hl(0, "TodoChecked", { fg = "#30502f", strikethrough = true })
vim.fn.matchadd("TodoUnchecked", "^.*\\[ \\].*$")
vim.fn.matchadd("TodoChecked", "^.*\\[x\\].*$")

TSX/TS

Then I realized the same technique can be used for things like try/catch, where I want to make it obvious that this is important (red).

Then there is making it easier to read HTML/JSX, a bunch of nested JSX/HTML tags? Why not mute the closing ones like </Tag>? This makes it pretty easy to read, feels a bit like Python indentation (maybe?).

A hundred className=? Let us also mute that noise…

Is a condition positive or negative? Like != is not the same as ==, so why not use different colors? Same for boolean true/false.

TSX buffer highlighting

Python

I tried a few things with Python as well, still a work in progress.

Python buffer highlighting

Conclusion

This experiment turned out a success, I managed to speed up my reading/understanding time.

Still improving but so far, I love it.