YAML front-matter handling, default theme option, and code block UI enhancement

[Al3cLee]

Summary

I identified some UI related small issues and fixed them with Claude:

Three independent improvements to the browser preview, all confined to assets/index.html and lua/markdown_preview/init.lua. No server logic was changed.

These have been all tested on Neovim v0.12.2.

1. YAML front-matter collapsible panel (hide_yaml)

YAML front-matter was previously shown as ordinary contents the preview. It is now displayed as a collapsible <details> panel at the top of the page, above the document content, below the "markdown preview" UI banner.

Behaviour:

• The panel is collapsed by default. Click the ▶ Front matter label to expand it and see the raw YAML in a code block.
• If the file has no front-matter, the panel is hidden entirely.
• Open/closed state is preserved across live reloads (editing the file does not collapse the panel).
• Set hide_yaml = true in setup() to suppress the panel entirely; you will not even see the collapsible panel.

Configuration:

require("markdown_preview").setup({
    hide_yaml = true,  -- default: false
})

Implementation note: markdown-it-front-matter on jsDelivr only ships a CommonJS build with no UMD/global wrapper, so the existing <script> CDN tag silently did nothing (window.markdownItFrontMatter was always undefined). The plugin was replaced with an equivalent block rule inlined directly inside the ES module script.

2. Configurable default theme (default_theme)

The browser preview previously always opened in dark mode (hardcoded). The initial theme is now configurable.

Configuration:

require("markdown_preview").setup({
    default_theme = "light",  -- "dark" (default) or "light"
})

The value is injected into index.html at server start via the same placeholder substitution pattern used for bottom_padding. The in-browser theme toggle button continues to work regardless of the configured default.

3. Sticky lang badge and copy button on wide code blocks

When a code block's content was wider than the viewport and the user scrolled it horizontally, the language badge and copy button scrolled off with the content. They now stay fixed at the top-right corner of the visible block.

Root cause: <pre> had both position: relative and overflow-x: auto. Absolutely-positioned children are anchored to the element's scrollable content area, not its visible viewport.

Fix: Each <pre> is now wrapped in a <div class="code-wrap"> that carries position: relative. The <pre> itself retains only overflow-x: auto. The badge and copy button are children of the wrapper, so they are always anchored to the visible corner of the block regardless of horizontal scroll position.

The ::before pseudo-element lang badge (which cannot be independently re-parented) was replaced with a real <span class="code-lang"> DOM element injected by the existing attachCopyButtons() function.

Files changed

File	Changes
lua/markdown_preview/init.lua	Added default_theme and hide_yaml config keys; two new placeholder substitutions in write_index
assets/index.html	Front-matter panel HTML + CSS + inlined plugin; __DEFAULT_THEME__ / __HIDE_YAML__ placeholders; .code-wrap wrapper CSS + JS refactor of attachCopyButtons