Bjørnisk Markdown

A VS Code extension that styles rendered notebook markdown cells with a clean, editorial theme.

What it styles

• Typography — Bear Sans for prose and Roboto Mono for code.
• Reading measure — content capped at 48em for comfortable line length.
• Heading scale — h1 2em → h2 1.6em → h3 1.27em, with matching spacing.
• Code — inline and fenced blocks with themed background, border, and radius.
• Blockquotes — accent bar in the theme color.
• Callouts — GitHub-style alerts (> [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], > [!CAUTION]) render as titled, color-coded boxes with an icon: NOTE blue, TIP green, IMPORTANT purple, WARNING yellow, CAUTION orange.
• Highlights — ==text== renders as a highlighted <mark> using the theme's highlight color (soft green on light, blue on dark).
• Task lists — - [ ] / - [x] items render as rounded, accent-colored checkboxes in place of the bullet.
• Tables — themed borders and alternating row backgrounds.
• Theme switching — light and dark palettes selected from the VS Code theme, with a prefers-color-scheme fallback.

Fonts

The stylesheet references fonts by their installed family names (Bear Sans UI, Bear Sans UI Heading, Roboto Mono). Install those families on your system for the intended look; generic sans-serif / monospace fallbacks keep cells readable otherwise.

Settings

All styling is configurable under the bjornisk.* namespace in VS Code settings; every setting defaults to the built-in theme, so an untouched install looks exactly as described above. Changes apply live to open notebook cells — no reload required.

• Theme — bjornisk.theme (auto | light | dark). auto (default) follows the active VS Code theme; light or dark forces that palette.
• Fonts — bjornisk.font.prose, bjornisk.font.headings, bjornisk.font.code (family names) and bjornisk.font.size (prose size in px; code and headings scale off it). A configured family is prepended to the built-in fallback chain, so a missing font degrades gracefully.
• Line spacing — bjornisk.lineHeight (prose) and bjornisk.headingsLineHeight (headings).
• Reading measure — bjornisk.measure (e.g. 48em, 60em, or none).
• Colors — bjornisk.lightColors and bjornisk.darkColors, one palette object per theme (edited in settings.json). Each names optional color roles: text, textSecondary, accent, codeBackground, stroke, highlightBackground, highlightText, and calloutNote / calloutTip / calloutImportant / calloutWarning / calloutCaution. Verbatim roles take any CSS color; callout roles take a hex/rgb()/hsl() color whose hue drives the bar, background, border, and title (named colors are not supported for callouts). Any role you omit keeps its default.

"bjornisk.darkColors": {
  "accent": "#7AA2F7",
  "calloutTip": "#9ECE6A"
}

Invalid values fall back to the default for that role without affecting the others. To revert everything, run Bjørnisk Markdown: Reset Settings to Defaults from the Command Palette.

Markdown preview

Bjørnisk also styles VS Code's built-in Markdown preview (not just notebook cells), controlled by bjornisk.preview.enabled (default on). When enabled, the preview uses the same theme, fonts, colors, callouts, task lists, and ==highlight== syntax as notebook cells, honoring your bjornisk.* settings. Toggling the setting applies after the preview refreshes or the window reloads.

If another extension also styles the Markdown preview (for example a theme that contributes preview CSS), Bjørnisk's styling takes precedence while enabled.

Develop

npm install
npm run build        # bundles src/ -> notebook-out/index.js
npm run watch        # rebuild on change

Then press F5 ("Run Extension") to launch an Extension Development Host and open any .ipynb to see styled markdown cells.

Versioning

The extension version lives in package.json (the single source of truth) and is mirrored into package-lock.json. Version changes are managed with vrzn via vrzn.toml; the npm scripts below wrap it and resync the lock file automatically:

npm run version:check        # report the current version
npm run version:bump patch   # bump major | minor | patch
npm run version:set 1.2.3    # set an explicit version

Build a .vsix

npm run package      # bundles src/ then writes dist/bjornisk-markdown-<version>.vsix

package is separate from build so the F5 dev loop stays fast: build only produces the dist/index.js bundle, while package produces the installable .vsix. Both artifacts land in dist/.

Install locally

Build the vsix (above), then:

code --install-extension dist/bjornisk-markdown-*.vsix

Reload the window after installing.

Scope and limits

• The renderer is global: styles apply to all notebooks, not per-file.
• Callout icons are recreations in the GitHub/Octicon visual style, not the reference app's original glyphs.
• The markdown-style cloning behavior is an internal VS Code implementation detail (long-relied-upon by KaTeX/Mermaid, but not a documented contract).

License

MIT