remark-code-title

Remark plugin to add a title to code blocks.

Inspired by:

• gatsby-remark-code-titles
• remark-code-titles [currently not maintained]

Demos

| Astro | Next.js | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | | |

Installation

npm install remark-code-title

Usage

Given this markdown file example.md:

# Example

```js title="example.js"
console.log("Hello World");
```

And this script, example.js, using remark-code-title:

import codeTitle from "remark-code-title";
import html from "remark-html";
import { read } from "to-vfile";
import { remark } from "remark";

const processor = remark().use(codeTitle).use(html, { sanitize: false });
const markdown = await read("example.md");
const result = await processor.process(markdown);

Running node example.js yields:

<h1>Example</h1>
<div data-remark-code-title data-language="js">example.js</div>
<pre>
  <code>console.log("Hello World");</code>
</pre>