CODEWITHSUNDEEP
visual-studio-codemarkdownvscode-extensions
Peter Wone
Peter Wone

Reputation: 18795

How to invoke the Visual Studio Code Markdown renderer

The Visual Studio Code Markdown preview uses markdown-it which supports a plugin ecosystem.

Extension of this rendering pipeline is documented, but this does not consider the possibility of clients other than the markdown preview pane.

How can I use the built-in Markdown rendering?

My use case, if it helps, is printing. I wrote a printing extension for Visual Studio Code and a natural enhancement of that was rendering Markdown when it prints.

At the moment I'm effectively recreating the rendering pipeline. Apart from the obvious redundancy, the reason I'd like to use the built-in rendering is to inherit any configured extensions, so that the print out matches the preview in capability.

It seems reasonable to expect the Markdown preview pane to be implemented as a virtual document which is a client of the rendering pipeline. What repository and file(s) contain the implementation of the Markdown preview pane?

Upvotes: 3

Views: 2225

Answers (1)

Peter Wone
Peter Wone

Reputation: 18795

It appears there is a MarkdownEngine class that manages the loading of plugins according to configuration, and while there doesn't seem to be a way to reference the MarkdownIt instance, there is a render method defined here

https://github.com/Microsoft/vscode/blob/fa5306d67bb934c42d206fb3c7e028dff00d530f/extensions/markdown-language-features/src/markdownEngine.ts#L96

So on the face of it, all you need to do is import MarkdownEngine and use this method. However, this is not currently supported. I have logged a feature request but because this is a very niche requirement it will never get enough votes fast enough to avoid closure. Populism in action.

The authors do not want to expose MarkdownEngine, but they proposed providing a render method.

That's the ultimate answer, but it isn't of any help right now. In the interim, it is possible to obtain a reference to Visual Studio Code's markdownIt instance.

Change your extension to masquerade as a Markdown plugin. Notice that in the documentation for adding plugins it says:

Then, in the extension's main activation function, return an object with a function named extendMarkdownIt. This function takes the current MarkdownIt instance and must return a new MarkdownIt instance:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: any) {
      return md.use(require('markdown-it-emoji'));
    }
  };
}

This is your chance to capture the Markdown renderer. Modify your extension to present as a Markdown plugin:

"contributes": {
    "markdown.markdownItPlugins": true,

Give it a private property to hold a reference to the MarkdownIt instance. Don't bother to strong type it. That would require you to bundle the MarkdownIt library.

var md: any;

Then capture a reference by putting this at the end of your activate method.

return { extendMarkdownIt(mdparam: any) { return md = mdparam; } };

When the pipeline initialises, it will invoke the callback you have provided passing a reference to itself. The rest of your code can get it from the property.

This trick depends on the rendering pipeline loading early irrespective of whether you use the Markdown preview pane. Happily it does.

2023-09-04

I no longer regard this as a good idea. The built-in Markdown preview extension meddles with the pipeline. It injects styling you can't override with a stylesheet, removes things and is generally antisocial. You're better off having a private rendering pipeline.

Upvotes: 3

Related Questions