Add support for previewing markdown

[wooorm]

trafficstars

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

The VSCode markdown previewer uses markdown-it, which does not support GFM, and does not support (of course) the used remark plugins.

Solution

Something like https://github.com/shd101wyy/mume probably, around unified.

It’s only really useful when the output is HTML, so for remark, we should probably find a .remarkrc and inject remark-rehype, rehype-etc afterwards?

Is it one underlying project that supports Atom, VS Code, and other editors, and supports either remark or rehype? Or should there be separate projects for remark and rehype too? Or?

What about MDX? CSS?

Alternatives

n/a

---

/cc @voxpelli

[wooorm]

Linking https://twitter.com/remcohaszing/status/1481699749409480704 /cc @remcohaszing

[remcohaszing]

I imagine this to be based on https://github.com/unifiedjs/unified-engine/issues/56.

The same override functionality can be used, but instead of using a files override, a context override can be defined. The language server could then handle a command to process a file based on a context, i.e. a hardcoded preview context or a configurable setting, or maybe a command parameter? I’m not entirely sure what options we have here.

plugins:
  # Linting and auto formatting
  - remark-gfm
  - remark-preset-lint-recommended

overrides:
  # Override for linting MDX files as specified in https://github.com/unifiedjs/unified-engine/issues/56
  - files: ['*.mdx']
    plugins:
      - remark-mdx

  # Override for rendering a preview
  - context: preview
    plugins:
      # custom remark plugins can be used
      - remark-toc
      # This will probably always be required
      - remark-rehype
      # rehype plugins can be used as well!
      - rehype-autolink-headings

[wooorm]

Maybe? It’s interesting but it feels a bit like a) abusing the format, b) too much work for most folks (they’d have to set up a bunch of things), c) more powerful than needed (it’s a whole browser where anything could happen).

• I’m not sure switching between formats should be solved at the dotfile level
• we could load both .remarkrcs and .rehypercs to the same effect
• do things like rehype-autolink-headings in a previewer really solve something for users?

---

The other direction would be a tool that has like 3 options or so? Preview markdown | Preview GFM | Preview MDX. Maybe a few more toggles for common syntax extensions.

---

When I try to answer why folks use markdown previewers, I can think of two main reasons:

• See if it works
• See how it renders on GitHub

[voxpelli]

Some inspirational links:

• https://github.com/mjbvz/vscode-github-markdown-preview
• https://github.com/mjbvz/vscode-markdown-mermaid
• https://github.com/mjbvz/vscode-fenced-code-block-grammar-injection-example

[wooorm]

Slightly different, but leaving it here to not forget: https://github.com/microsoft/vscode/tree/main/extensions/markdown-language-features/server#server-capabilities