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

``shell
npm install markdown-it-code-block
`

Usage

`js
import markdownIt from 'markdown-it';
import mdCodeBlock from 'markdown-it-code-block';

const md = markdownIt();
md.use(mdCodeBlock);

const html = md.render(/ ... /);
`

Styling

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

`js
// Light theme
import 'markdown-it-code-block/styles/light-theme.css';
import 'markdown-it-code-block/styles/light-theme-token.css';

// Dark theme
import '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 style
import '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.

$3

``
`js [title]

`
``

$3

``
`js [title] {1}

`
``

$3

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

`
``

$3

``
`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.

`html


console.log('example');

License