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

[selimacerbas]

Hey @Al3cLee, all three of these are good changes, and the CJS-build diagnosis for markdown-it-front-matter is correct (I checked, jsDelivr ships pure CJS with no UMD wrapper so the existing <script> tag was silently doing nothing). The code-wrap root cause for the lang badge and copy button is also right.

Before merging, could you split this into two PRs? Each change has a different review surface and any one of them could need a revert independently.

PR A: frontmatter panel (hide_yaml)

• The collapsible <details> UI and the inlined front-matter block rule
• Closes Feature request: Display yaml front-matter as tables #18

PR B: sticky lang badge and copy button on wide code blocks

• The .code-wrap wrapper and the attachCopyButtons refactor
• Independent bug fix

The theme part can be dropped. PR #16 lands first with the same feature, and the author is renaming the key to default_theme (more accurate since the toggle still works). When you rebase, drop the theme bits.

On the frontmatter UX itself: collapsible raw YAML is fine for v1. Most modern tools (Obsidian, VSCode + markdown-yaml-preamble) use a structured key/value table, and I'd like to add that as yaml_mode = "hide" | "table" | "raw" later, but it shouldn't block this PR.

Happy to do the split for you if it's easier. Let me know.

[Al3cLee]

Hello @selimacerbas , thank you for the detailed feedback; please split this PR yourself if that's okay!