Making Markdown Prettier in Vim

Hey there, folks! Today, I want to share my recent adventure in crafting a custom Markdown syntax for vim. This short blog will cover how to customize syntax highlighting in vim and use it’s concealing features to modify how text is displayed.

Syntax Highlighting: Vim lets you tweak syntax highlighting to make your Markdown truly unique. You can

  • emphasize code blocks
  • give headings a distinct look

Conceal Unwanted Elements: The real magic comes with the conceal feature. It allows you to hide elements you don’t want to see. Say goodbye to cluttered Markdown files, and hello to cleaner, more focused content.

Here’s some noteworthy modifications:

  • Clean Headings
    • use different colors to differentiate headings according to their level
    • hide the # heading prefix
  • Extend Highlighting
    • highlight Obsidian tags, Markdown links as well as Wikilinks
  • Displaying Text
    • show italic and bold texts well, in italic or bold
    • cross out striked through text
    • replace list items with the a bullet char •
    • change background color for code
  • grey out link url’s, quotes, yaml frontmatter, comments and code block headings

I prepared some text to showcase how it looks.

Markdown in Obsidian

Here’s how markdown is displayed in my Obsidian: 2023-10-26-Obsidian-Markdown-Highlighting

Markdown in Neovim with a custom syntax highlighting

And here’s the equivalent in my neovim 2023-10-26-Vim Custom Markdown Syntax

How to use it?

  1. Grab this syntax file from my dot files: https://gitlab.com/FabianUntermoser/dot-files/-/blob/master/nvim/.vim/after/syntax/mkdc.vim
  2. Tell vim that all markdown files should use the new syntax.
autocmd FileType md,markdown setlocal filetype=markdown.mkdc
  1. Customize it to your needs.

Happy Syntaxing!