Add support for previewing markdown

remarkjs / vscode-remark

Lint and format markdown code with remark

https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-remark

MIT License

54 stars 11 forks source link

Add support for previewing markdown #86

Open wooorm opened 2 years ago

wooorm commented 2 years ago

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 commented 2 years ago

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

remcohaszing commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Some inspirational links:

wooorm commented 2 years ago

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