markdown-it-plugins 
A collection of plug-ins that extend the Markdown-it parser.
Install
npm i markdown-it-plugins -D
Usage
import MarkdownIt from 'markdown-it'
import { noticeboard } from 'markdown-it-plugin'
const markdown = new Markdown({
// ...
})
.use(noticeboard)
Plugins
container
Use Vue.js style content blocks to present your message.
import { container } from 'markdown-it-plugins'
// preset styles
import 'markdown-it-plugins/container.css'
markdown.use(container)
example
Optional values: [ details | tip | danger | warning ] 
TIP:
::: [title]
content message
:::
::: details title message
message
:::
::: tip spoiler
message
:::
::: danger spoiler
message
:::
::: warning spoiler
message
:::
noticeboard
A lightweight prompt box containing only tip and Danger types.
import { noticeboard } from 'markdown-it-plugins'
import 'markdown-it-plugins/noticeboard.css'
markdown.use(noticeboard)
example
?> This is tip.
!> This is danger.
collectBlockCode
To add foldable functionality to a code block, you can also give it a code block name.
import {
// TypeScript
type CollectBlockCode,
collectBlockCode,
} from 'markdown-it-plugins'
import 'markdown-it-plugins/collect-block-code.css'
markdown.use(collectBlockCode, options)
// TypeScript
markdown.use<CollectBlockCode>(collectBlockCode, options)
options
interface CollectCodeBlock {
/**
* Show the code block language.
* @type {boolean}
* @default true
*/
lang?: boolean
/**
* Shows the copy code block content button.
* @type {boolean}
* @default false
*/
copy?: boolean
/**
* Copy the content button text.
* @type {string}
* @default: 'Copy'
*/
copyText?: string
/**
* The delimiter for the code block name.
* @type {string}
* @default ':'
*/
separator?: string
/**
* Display code block names.
* @type {boolean}
* @default false
*/
blockName?: boolean
/**
* Always expand the code block.
* @type {boolean}
* @default true
*/
alwaysOpen?: boolean
}
example
```js : block name
const a = 1
const b = 2
const c = 3
console.log(a, b, c)
```
extendImageTitle
Set additional properties at the position of the image's title parameter.
import { extendImageTitle } from 'markdown-it-plugins'
markdown.use(extendImageTitle)
example
codeLineNumbers
Add a line count display to your code block.(Need to register before other plugins!, The final effect may vary depending on your style)
import { codeLineNumbers } from 'markdown-it-plugins'
import 'markdown-it-plugins/code-line-numbers.scss'
markdown.use(extendImageTitle)
example
4 Feb 24, 2022
91 Jan 2, 2023
3 Feb 7, 2022
9 Sep 18, 2022
16 Sep 28, 2022
12.5k Jan 4, 2023
4.3k Dec 27, 2022
4.3k Dec 31, 2022
1 Jan 3, 2022
28.9k Jan 7, 2023