Highlight jaw fenced code blocks in VS Code Markdown Preview

[dishmint]

Problem

The TextMate grammar (`editors/vscode/syntaxes/jaw.tmLanguage.json`) and the markdown injection grammar highlight ```jaw fenced blocks correctly in the editor view of `.md` files, but VS Code's built-in Markdown Preview uses a separate pipeline (markdown-it + highlight.js) that does not consult TextMate grammars at all. So jaw blocks render as plain code in the preview.

Approach

The official extension point is `contributes.markdown.markdownItPlugins`. The minimum implementation is:

1. Add to `editors/vscode/package.json`:
   ```json
   "markdown.markdownItPlugins": [
   { "plugin": "./out/markdown-highlight-plugin.js" }
   ]
   ```

2. Add a small TS module (e.g. `src/markdown-highlight-plugin.ts`) that exports a markdown-it plugin function and overrides `md.options.highlight` to render `jaw` blocks.

3. Implement a jaw highlighter. Two options:

   • Easier: Hand-write a small regex-based highlighter (markers, function refs, variables, operators) that emits HTML spans with class names matching the existing TextMate scopes. Ship a tiny CSS file via `markdown.previewStyles` so the colors land in the preview iframe.
   • Harder: Vendor a TextMate-grammar-to-highlight-runner (e.g. vscode-textmate) to reuse `jaw.tmLanguage.json`. More faithful but heavier.

Gotchas

• The plugin runs in a Node context, not a browser — no DOM APIs.
• `markdown.previewScripts` runs after rendering, so it can't be used for tokenization.
• The CSS injected via `markdown.previewStyles` must use the same class names emitted by the plugin.

References

• VS Code docs: https://code.visualstudio.com/api/extension-guides/markdown-extension