markdown-it-code-block

Code-block plugin for markdown-it

• ✅ Syntax highlight supported
• 🌙 Dark and light mode supported
• 🔥 Highlight specific line with ranges

👉 See more screenshots

Install

npm install markdown-it-code-block

Usage

importmarkdownItfrom'markdown-it';importmdCodeBlockfrom'markdown-it-code-block';constmd=markdownIt();md.use(mdCodeBlock);consthtml=md.render(/* ... */);

Styling

Every style supports individual imports, so that you can import only what you need.

// Light themeimport'markdown-it-code-block/styles/light-theme.css';import'markdown-it-code-block/styles/light-theme-token.css';// Dark themeimport'markdown-it-code-block/styles/dark-theme.css';import'markdown-it-code-block/styles/dark-theme-token.css';// Dark theme (for system preference)import'markdown-it-code-block/styles/dark-theme-media.css';import'markdown-it-code-block/styles/dark-theme-token-media.css';// Base styleimport'markdown-it-code-block/styles/base.css';import'markdown-it-code-block/styles/base-token.css';

If you wish to override styles, refer to source code.

Markdown

Supported markdown syntax are the following.

Basic usage with title

```js [title]
```

Title and highlight

```js [title] {1}
```

Multiple highlights

Use , for multiple highlights and - for ranges.

```js [title] {1,3-5,7}
```

Line number

```js [title] {1,3-5,7} line-number
```

Under the hood

This plugin transforms the following markdown

```js [title] {1} line-number
console.log('example');
```

to the following HTML.

<divclass="md-code-block__container"><divclass="md-code-block__title">title</div><pre><codeclass="language-js"><spanclass="md-code-block__line-container" data-line-number="1" data-highlight="true"><spanclass="md-code-block__line"><spanclass="token console class-name">console</span><spanclass="token punctuation">.</span><spanclass="token method function property-access">log</span><spanclass="token punctuation">(</span><spanclass="token string">'example'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span></span></span></code></pre></div>

License

See LICENSE