remark-custom-header-id v0.1.0

remark-custom-header-id

Remark plugin for adding custom ID attribute to Markdown headers

This allows for stable and more meaningful anchor links in your generated HTML.

Install

npm install remark-custom-header-id

Usage

Remark

import {remark} from 'remark';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';
import remarkCustomHeaderId from 'remark-custom-header-id';

const file = await remark()
	.use(remarkCustomHeaderId)
	.use(remarkRehype) // Markdown to HTML
	.use(rehypeStringify) // Stringify the HTML
	.process('# Foo {#custom-id}');

console.log(String(file));
//=> '<h1 id="custom-id">Foo</h1>'

Astro

// astro.config.js
import remarkCustomHeaderId from 'remark-custom-header-id';

export default defineConfig({
	// …
	markdown: {
		remarkPlugins: [
			remarkCustomHeaderId,
		],
	},
	// …
});

API

remarkCustomHeaderId()

Returns a transformer function to be used with Remark.