HTML Markdown Plugin

A plugin for staticbolt that renders Markdown content inside HTML files. The Markdown can sit inline on any element, or live in an external .md file that you reference.

Installation

The plugin ships as part of @staticbolt/core. You do not need to install another package.

Usage

In your .staticbolt.ts configuration file:

import { defineConfig } from "@staticbolt/core";
import { htmlMarkdownPlugin } from "@staticbolt/core/plugins";

export default defineConfig({
  plugins: [htmlMarkdownPlugin()],
});

Rendering inline Markdown

Add the markdown attribute to any HTML element and its text content is rendered as Markdown. The plugin replaces the element's content with the resulting HTML and removes the markdown attribute from the output.

The pre tag is a good choice because it keeps whitespace and newlines.

<pre markdown>
# Hello This is **rendered** as Markdown.
</pre>

Referencing an external Markdown file

Use the <markdown> tag with a src attribute that points to a .md file. The output has the rendered content of that file in place of the tag. The path is resolved relative to the current HTML file.

<markdown src="./content/intro.md"></markdown>

Plugin Options

markdownAttribute

• Type: string
• Default: "markdown"

The attribute name that triggers inline Markdown rendering on any HTML element.

htmlMarkdownPlugin({
  markdownAttribute: "md",
});

tag

• Type: string
• Default: "markdown"

The tag name that references an external Markdown file.

htmlMarkdownPlugin({
  tag: "md-file",
});

sourceAttribute

• Type: string
• Default: "src"

The attribute name on the custom tag that holds the path to the external Markdown file.

htmlMarkdownPlugin({
  sourceAttribute: "href",
});