
Here's a quick tip for everybody using VS Code for viewing markdown files with code blocks. It might be handy for all of you to use VS Code as a note-taking app.

The problem is that by default, in VS Code markdown edit mode (not the preview mode, that's an entirely different story), code blocks are not very clearly styled. They don't look much different than other types of text, and VS Code doesn't offer an easy way to achieve that. The main problem is that VS Code theming doesn't allow setting the background color for different types of parsed syntax. Ideally, I'd like to set background color code blocks so they'd be easily distinguishable from the rest of the text.

<Image alt="VS Code lack of code blocks styling" src="/static/images/styling-code-1.jpg" width={1600/2} height={652/2} />

Fortunately, there's a [Highlight](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight)  extension, which allows you to set much more advanced styling (background color 🎉) by defining regex patterns and styling rules. Of course, ideally, I'd prefer to use theme tokens from the `tmTheme` parser, but it seems it's the best we can have 🤷.

So, first, of course, install the extension. Then to define to enable code blocks highlighting for a particular repo, create a settings file `.vscode/settings.json`.

```json
{
  "highlight.regexes": {
    "([^`])(`[^`]+?`)": {
      "filterLanguageRegex": "markdown",
      "regexFlags": "g",
      "filterFileRegex": ".*\\.md",
      "decorations": [{}, {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "border": "1px dashed rgba(0, 0, 0, 0.1)",
        "borderRadius": "3px"
      }, {}]
    },
    "(```.+?```)": {
      "regexFlags": "gs",
      "decorations": {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "isWholeLine": true,
      },
      "filterLanguageRegex": "markdown",
      "filterFileRegex": ".*\\.md"
    }
  }
}
```

And now, after applying the settings  (drums 🥁🥁🥁).

<Image alt="VS Code with code blocks styling" src="/static/images/styling-code-2.jpg" width={1598/2} height={648/2} />

There's a little bit of regex trickery here around selecting single backticks `` ([^`])(`[^`]+?`) `` and triple backticks group ```` (```.+?```) ````. After that, there's only styling left. I'm using backgrounds and a bit of border color and radius in case of inline code blocks, but you [can do a little bit more with this API](https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions).


It's possible to style code blocks in a rich way in VS Code with a little help of Highlights extension

Vs-code

How to style markdown code blocks in VS Code