A Bun loader and plugin for handling Markdown files with frontmatter.
- Parse frontmatter from markdown files
- Convert markdown to HTML
- Support for various output modes, including:
- HTML rendering
- Raw markdown body
- Metadata
- React component generation
- Vue component and render functions
bun add bun-plugin-markdownThe simplest way to use this package is as a Bun plugin:
import { markdownPlugin } from 'bun-plugin-markdown'
// Now you can import markdown files directly
import myContent from './content/page.md'
// Register the plugin globally
Bun.plugin(markdownPlugin)
console.log(myContent.html) // Rendered HTML
console.log(myContent.attributes) // Frontmatter attributesYou can customize the behavior of the plugin:
import { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'
// Register the plugin with custom options
Bun.plugin(frontmatterMarkdownPlugin({
mode: [Mode.HTML, Mode.BODY, Mode.META],
// Add other options as needed
}))import { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'
await Bun.build({
entrypoints: ['./src/index.ts'],
outdir: './dist',
plugins: [
frontmatterMarkdownPlugin({
mode: [Mode.HTML, Mode.BODY]
})
]
})For React support, install the required peer dependencies:
bun add @babel/core @babel/preset-react -DThen use the plugin with React mode:
import { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'
Bun.plugin(frontmatterMarkdownPlugin({
mode: [Mode.HTML, Mode.REACT],
react: {
root: 'markdown-content' // Optional custom root class
}
}))
// In your component
import myContent from './content/page.md'
function MyComponent() {
return (
<div>
<h1>{myContent.attributes.title}</h1>
{/* Render the React component */}
{myContent.react()}
</div>
)
}For Vue support, install the required peer dependencies:
bun add vue-template-compiler @vue/component-compiler-utils -DThen use the plugin with Vue mode:
import { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'
// In your component
import myContent from './content/page.md'
Bun.plugin(frontmatterMarkdownPlugin({
mode: [Mode.HTML, Mode.VUE_COMPONENT],
vue: {
root: 'markdown-content' // Optional custom root class
}
}))
export default {
components: {
MarkdownContent: myContent.vue.component
},
template: `
<div>
<h1>{{ title }}</h1>
<markdown-content />
</div>
`,
data() {
return {
title: myContent.attributes.title
}
}
}Bun's fullstack dev server can use the markdown plugin when configured in your bunfig.toml:
[serve.static]
plugins = [ "bun-plugin-markdown/plugin" ]Then you can import markdown files directly in your HTML:
<!DOCTYPE html>
<html>
<head>
<title>Markdown Viewer</title>
<style>
/* Your styles here */
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
// Import markdown file directly
import content from './content.md';
// Use the processed content
document.getElementById('app').innerHTML = content.html;
console.log(content.attributes); // Access frontmatter
</script>
</body>
</html>And use it in your server:
import { serve } from 'bun'
// Create your HTML template
const template = `/* HTML with markdown import */`
serve({
port: 3000,
development: true,
routes: {
'/': new Response(template, {
headers: { 'Content-Type': 'text/html' }
})
}
})To see a complete example, run:
bun run fullstackThe loader supports different output modes:
Mode.HTML: Generates HTML from the markdownMode.BODY: Includes the raw markdown bodyMode.META: Includes metadata about the source fileMode.REACT: Generates a React componentMode.VUE_COMPONENT: Generates a Vue componentMode.VUE_RENDER_FUNCTIONS: Generates Vue render functions
MIT
bun testPlease see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Stacks Discord Server
"Software that is free, but hopes for a postcard." We love receiving postcards from around the world showing where Stacks is being used! We showcase them on our website too.
Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.
