marked-prismjs-linenumber

A marked extension that highlights Markdown code blocks with Prism.js and renders line numbers

Installation

npm install marked-prismjs-linenumber

You also need marked and prismjs:

npm install marked prismjs marked-prismjs-linenumber

Required styles

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-funky.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/plugins/line-numbers/prism-line-numbers.min.css"
/>

• prism-funky.min.css — the syntax theme. You can replace it with any other Prism theme.
• line-numbers.min.css — required for the line-number gutter, pre.line-numbers and .line-numbers-rows.

Usage

1. Register the extension

import { marked } from 'marked';
import linenumber from 'marked-prismjs-linenumber';

marked.use(
  linenumber({
    // Optional: preload Prism grammars you need.
    // Anything not loaded falls back to escaped plain text.
    languages: ['javascript', 'typescript', 'css', 'bash', 'json'],
  })
);

const markdown = `
# Example

\`\`\`js
const greeting = 'hello world';
console.log(greeting);
\`\`\`
`;

console.log(marked.parse(markdown));

Effect display

API

linenumber(options?)

Creates a marked extension. Pass it directly to marked.use(...).

| Option | Type | Default | Description | | --- | --- | --- | --- | | languages | string[] | — | Language names or aliases to load via prismjs/components/index.js. |

import { marked } from 'marked';
import linenumber from 'marked-prismjs-linenumber';

marked.use(linenumber({ languages: ['javascript', 'python', 'go'] }));

If a language is not loaded, or an unknown lang is used in a fenced code block, the renderer escapes the raw code and outputs it as plain text.

The extension overrides the code({ text, lang }) renderer:

| Parameter | Type | Default | Description | | --- | --- | --- | --- | | text | string | — | The source code to highlight. | | lang | string | 'plaintext' | Prism language name or alias. |