NNYJ Syntax Highlight

Custom Markdown and Terraform syntax colors with inline Markdown rendering in the native VS Code editor.

Features

Inline Markdown

• Headings, emphasis, links, lists, tables, code, images, math, and Mermaid use editor decorations.
• Images alone on their line render inline, local files reload on change.
• With the inset helper installed, images and Mermaid diagrams render full size in a box below their lines, pushing text down.
• Without the helper, images are drawn over their line and the blank lines below it, Mermaid diagrams are fitted into their code block lines.
• With the helper, tables outside the cursor render as wrapped HTML below their header line, with the rows folded. Moving the cursor into a table or double-clicking a cell shows the source.
• Fenced code blocks render as a card from the fence column to the widest line.
• Clicking ⎘ after a code block's opening fence copies its content without the fence indent.
• Markdown markers appear while editing their content.
• Toggle Markdown Decorations switches rendering for the current file.
• nnyjEditorStyling.inline.enabled switches the complete renderer on or off while keeping custom syntax colors and table borders.
• Existing markdownInlineEditor.* settings control individual rendering features and colors.

Markdown injections

All markdown injections exclude meta.embedded and markup.fenced_code scopes to avoid interfering with code blocks.

Fenced code block fix

Fenced code blocks inside list items lose syntax highlighting for bash/sh/zsh, dockerfile, makefile, diff. This extension adds \G alongside ^ in the critical patterns to restore it. Upstream: vscode#194998 (closed without fix).

Shell comment coloring

# comment lines inside fenced bash/sh/zsh blocks are colored via programmatic decoration, working around a VS Code TextMate tokenization limitation that consumes the first content line before source.shell runs.

Markdown preview

• The built-in preview colors arrows, colons, brackets, comments, ==highlight==, and __highlight__ like the editor.
• Preview tables use the editor border color on every cell edge, in all themes.
• preview/preview.css holds the colors for dark themes and must match textMateRules.
• Bold, italic, headings, inline code, links, and unlabeled code blocks use the same colors.
• Notebook Markdown cells get the same colors through a vscode.markdown-it-renderer extension.

Table decorations

Pipe-delimited Markdown tables use 30% opacity row borders and fixed-width vertical separators. Cell text stays editable with the same layout regardless of cursor position. Table emoji occupy two-character boxes, including when inline rendering is disabled. NNYJ Tweaks supplies navigation and Unicode text padding. With inline rendering disabled, custom decorations provide bold headers and dim separator rows and pipes. Cells starting with 🟢, 🟡 or 🔴 get a matching background. Columns shade red (lowest) to green (highest) by the number each cell starts with, after an optional ~ or $. ↓ in the header flips the scale. Other cells are skipped. Hovering a numeric header offers a link that adds or removes the ↓.

Terraform HCL injection

yaml.heredoc.hcl provides YAML syntax inside <<YAML / <<-YAML heredoc blocks. Requires:

{ "[terraform]": { "editor.semanticHighlighting.enabled": false } }

Customizing colors

Add to editor.tokenColorCustomizations.textMateRules in settings.json:

{ "scope": "markdown.highlight", "settings": { "foreground": "#f7f42e" } },
{ "scope": "markdown.comment",   "settings": { "foreground": "#57A64A" } },
{ "scope": "markdown.colon",     "settings": { "foreground": "#9CDCFE" } },
{ "scope": "markdown.bracket",   "settings": { "foreground": "#ceba78" } },
{ "scope": "markdown.arrow",     "settings": { "foreground": "#97ff42", "fontStyle": "bold" } }

Unlabeled ``` blocks can be colored via the markup.fenced_code scope (3-segment selector; language-specific scopes at 4+ segments override it automatically).

Known limitations

• VS Code counts hidden URLs when wrapping lines; trailing punctuation stays beside the link label, but blank wrapped rows can remain.
• Bold/italic/highlight work inside brackets, but links and images may not
• Indented fenced block fix does not cover makefile ifeq/ifdef/define/endif blocks

Install

• Identifier: nnyj.nnyj-syntax-highlight.
• Disable or uninstall CodeSmith.markdown-inline-editor-vscode to prevent duplicate rendering.

npm ci
npm run install:local

Development

• Maintenance covers code ownership, renderer constraints, troubleshooting, and verification.
• npm run compile checks TypeScript.
• npm test runs regression tests.
• npm run build checks TypeScript, bundles the extension, and copies Mermaid assets into dist/.
• Packaging runs the build automatically.
• npm version patch --no-git-tag-version bumps package.json and the lockfile.
• npm run install:local packages nnyj-syntax-highlight-<version>.vsix, deletes older vsix files, and installs it.
• npm run package:helper packages inset_helper/, a separate vsix wrapping the proposed editorInsets API. Only the main extension goes to the Marketplace, it rejects proposed APIs.

License

• Custom extension: MIT.
• Inline renderer adapted from Markdown Inline Editor, v1.24.2, commit 4572a53, based on Markdown Inline Preview, under MIT.