Hide Markdown Fenced Code Markup in Atom Editor

One of the greatest things about Markdown is its code fencing and syntax highlighting feature. When you fence code in markdown with the ``` (three backticks) markup, followed by the code type, a good Markdown editor will fence the code and apply a relevant syntax-highlighting style to the code.

Sample snippet of code from a documentation file.

Above is a section of fenced XML code that nicely has syntax-highlighting applied to it.

The thing that bothers me about this in Atom is that the actual ``` markup code is not concealed. Unless I’m actually editing the ``` conceal markup I actually don’t want to see ugly ``` all over the place in my documents.

In Vim concealing the code-fencing markup can be achieved with the vim-markdown plugin.

In Atom the code-fencing markup can easily be concealed with the hide-lines-plus plugin. In the settings for hide-lines-plus you can configure a custom pattern that when it matches will be concealed. The concealing can be toggled with the Alt-a hotkey. Here is the same code block with concealing:

Same code as above but with concealing of the code block markup.

To make this work with hide-lines-plus go into the plugin’s settings and change the value for Patterns to ^```.* (caret three backticks dot star)