mirror of https://github.com/vuejs/vitepress
Replaces markdown-it-container and merges the GitHub alerts plugin into
the containers module so both share one title map. Rendered output is
byte-compatible with the previous implementation.
This also restores fence-line attributes on containers ({open}, {.class},
etc.), which broke when markdown-it-attrs was replaced with
@mdit/plugin-attrs - its fence rule handled containers too, but had to be
disabled to keep code block meta intact. The container plugin now parses
the trailing braces itself, so the old markdown-it-attrs patch is not
needed in any form.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
pull/5335/head
Divyansh Singh
2 months ago
parent
f1ee91335e
commit
420565236b
@ -0,0 +1,404 @@
|
|||||||
|
import {
|
||||||
|
createMarkdownRenderer,
|
||||||
|
disposeMdItInstance,
|
||||||
|
type MarkdownOptions
|
||||||
|
} from 'node/markdown/markdown'
|
||||||
|
|
||||||
|
async function render(src: string, options: MarkdownOptions = {}) {
|
||||||
|
disposeMdItInstance()
|
||||||
|
const md = await createMarkdownRenderer('.', {
|
||||||
|
highlight: (code) => code,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
return md.renderAsync(src)
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('node/markdown/plugins/containers', () => {
|
||||||
|
test('renders built-in containers with default titles', async () => {
|
||||||
|
const src = [
|
||||||
|
'tip',
|
||||||
|
'info',
|
||||||
|
'warning',
|
||||||
|
'danger',
|
||||||
|
'note',
|
||||||
|
'important',
|
||||||
|
'caution'
|
||||||
|
]
|
||||||
|
.map((t) => `::: ${t}\ncontent of ${t}\n:::`)
|
||||||
|
.join('\n\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p>
|
||||||
|
<p>content of tip</p>
|
||||||
|
</div>
|
||||||
|
<div class="info custom-block"><p class="custom-block-title custom-block-title-default">INFO</p>
|
||||||
|
<p>content of info</p>
|
||||||
|
</div>
|
||||||
|
<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p>
|
||||||
|
<p>content of warning</p>
|
||||||
|
</div>
|
||||||
|
<div class="danger custom-block"><p class="custom-block-title custom-block-title-default">DANGER</p>
|
||||||
|
<p>content of danger</p>
|
||||||
|
</div>
|
||||||
|
<div class="note custom-block"><p class="custom-block-title custom-block-title-default">NOTE</p>
|
||||||
|
<p>content of note</p>
|
||||||
|
</div>
|
||||||
|
<div class="important custom-block"><p class="custom-block-title custom-block-title-default">IMPORTANT</p>
|
||||||
|
<p>content of important</p>
|
||||||
|
</div>
|
||||||
|
<div class="caution custom-block"><p class="custom-block-title custom-block-title-default">CAUTION</p>
|
||||||
|
<p>content of caution</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('renders details as a disclosure with summary', async () => {
|
||||||
|
expect(await render('::: details\nhidden content\n:::'))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
"<details class="details custom-block"><summary>Details</summary>
|
||||||
|
<p>hidden content</p>
|
||||||
|
</details>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('renders custom titles, including inline markdown', async () => {
|
||||||
|
const src = [
|
||||||
|
'::: danger STOP',
|
||||||
|
'Danger zone, do not proceed',
|
||||||
|
':::',
|
||||||
|
'',
|
||||||
|
'::: tip A **bold** _title_ with `code`',
|
||||||
|
'content',
|
||||||
|
':::',
|
||||||
|
'',
|
||||||
|
'::: details Click me to toggle the code',
|
||||||
|
'```js',
|
||||||
|
"console.log('hi')",
|
||||||
|
'```',
|
||||||
|
':::'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="danger custom-block"><p class="custom-block-title">STOP</p>
|
||||||
|
<p>Danger zone, do not proceed</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip custom-block"><p class="custom-block-title">A <strong>bold</strong> <em>title</em> with <code>code</code></p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
<details class="details custom-block"><summary>Click me to toggle the code</summary>
|
||||||
|
<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre><code class="language-js">console.log('hi')
|
||||||
|
</code></pre>
|
||||||
|
</div></details>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('resolves reference links in titles', async () => {
|
||||||
|
const src = [
|
||||||
|
'::: tip See [the guide][guide]',
|
||||||
|
'content',
|
||||||
|
':::',
|
||||||
|
'',
|
||||||
|
'[guide]: /guide/'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block"><p class="custom-block-title">See <a href="/guide/">the guide</a></p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('respects custom labels from container options', async () => {
|
||||||
|
const src = '::: tip\n提示内容\n:::\n\n::: details\n详情内容\n:::'
|
||||||
|
expect(
|
||||||
|
await render(src, {
|
||||||
|
container: { tipLabel: '提示', detailsLabel: '详细信息' }
|
||||||
|
})
|
||||||
|
).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block"><p class="custom-block-title custom-block-title-default">提示</p>
|
||||||
|
<p>提示内容</p>
|
||||||
|
</div>
|
||||||
|
<details class="details custom-block"><summary>详细信息</summary>
|
||||||
|
<p>详情内容</p>
|
||||||
|
</details>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('supports attrs on the fence line', async () => {
|
||||||
|
const src = [
|
||||||
|
'::: details Click me {open}',
|
||||||
|
'content',
|
||||||
|
':::',
|
||||||
|
'',
|
||||||
|
'::: tip Custom {.extra-class #custom-id}',
|
||||||
|
'content',
|
||||||
|
':::'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<details open="" class="details custom-block"><summary>Click me</summary>
|
||||||
|
<p>content</p>
|
||||||
|
</details>
|
||||||
|
<div class="extra-class tip custom-block" id="custom-id"><p class="custom-block-title">Custom</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('supports quoted and bare attr values on the fence line', async () => {
|
||||||
|
expect(await render('::: tip Custom {data-a="b c" data-d=e}\ncontent\n:::'))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
"<div data-a="b c" data-d="e" class="tip custom-block"><p class="custom-block-title">Custom</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('keeps fence line braces verbatim when attrs are disabled', async () => {
|
||||||
|
expect(
|
||||||
|
await render('::: details Click me {open}\ncontent\n:::', {
|
||||||
|
attrs: false
|
||||||
|
})
|
||||||
|
).toMatchInlineSnapshot(`
|
||||||
|
"<details class="details custom-block"><summary>Click me {open}</summary>
|
||||||
|
<p>content</p>
|
||||||
|
</details>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('renders v-pre and raw containers as plain wrappers', async () => {
|
||||||
|
const src = [
|
||||||
|
'::: v-pre',
|
||||||
|
'{{ this will be displayed as-is }}',
|
||||||
|
':::',
|
||||||
|
'',
|
||||||
|
'::: raw',
|
||||||
|
'Wraps in a `<div class="vp-raw">`',
|
||||||
|
':::'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div v-pre>
|
||||||
|
<p>{{ this will be displayed as-is }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="vp-raw">
|
||||||
|
<p>Wraps in a <code><div class="vp-raw"></code></p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('renders code groups with tabs', async () => {
|
||||||
|
const src = [
|
||||||
|
'::: code-group',
|
||||||
|
'',
|
||||||
|
'```js [config.js]',
|
||||||
|
'const a = 1',
|
||||||
|
'```',
|
||||||
|
'',
|
||||||
|
'```ts [config.ts]',
|
||||||
|
'const a: number = 1',
|
||||||
|
'```',
|
||||||
|
'',
|
||||||
|
':::'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-0" id="tab-1" checked><label data-title="config.js" for="tab-1">config.js</label><input type="radio" name="group-0" id="tab-2" ><label data-title="config.ts" for="tab-2">config.ts</label></div><div class="blocks">
|
||||||
|
<div class="language-js active"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre><code class="language-js">const a = 1
|
||||||
|
</code></pre>
|
||||||
|
</div><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre><code class="language-ts">const a: number = 1
|
||||||
|
</code></pre>
|
||||||
|
</div></div></div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('supports nesting via longer fences', async () => {
|
||||||
|
const src = [
|
||||||
|
':::: info Outer',
|
||||||
|
'outer content',
|
||||||
|
'',
|
||||||
|
'::: details Inner',
|
||||||
|
'inner content',
|
||||||
|
':::',
|
||||||
|
'::::'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="info custom-block"><p class="custom-block-title">Outer</p>
|
||||||
|
<p>outer content</p>
|
||||||
|
<details class="details custom-block"><summary>Inner</summary>
|
||||||
|
<p>inner content</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('auto-closes unclosed containers', async () => {
|
||||||
|
expect(await render('::: warning\nno closing fence'))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
"<div class="warning custom-block"><p class="custom-block-title custom-block-title-default">WARNING</p>
|
||||||
|
<p>no closing fence</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('parses fences without a space before the name', async () => {
|
||||||
|
expect(await render(':::tip\ncontent\n:::')).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('leaves non-container fence lines alone', async () => {
|
||||||
|
expect(await render('::: unknown\ncontent\n:::')).toMatchInlineSnapshot(`
|
||||||
|
"<p>::: unknown
|
||||||
|
content
|
||||||
|
:::</p>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('node/markdown/plugins/containers (github alerts)', () => {
|
||||||
|
test('renders github alerts like containers', async () => {
|
||||||
|
const src = [
|
||||||
|
'> [!NOTE]',
|
||||||
|
'> note content',
|
||||||
|
'',
|
||||||
|
'> [!TIP]',
|
||||||
|
'> tip content',
|
||||||
|
'',
|
||||||
|
'> [!IMPORTANT]',
|
||||||
|
'> important content',
|
||||||
|
'',
|
||||||
|
'> [!WARNING]',
|
||||||
|
'> warning content',
|
||||||
|
'',
|
||||||
|
'> [!CAUTION]',
|
||||||
|
'> caution content'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p>
|
||||||
|
<p>note content</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p>
|
||||||
|
<p>tip content</p>
|
||||||
|
</div>
|
||||||
|
<div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p>
|
||||||
|
<p>important content</p>
|
||||||
|
</div>
|
||||||
|
<div class="warning custom-block github-alert"><p class="custom-block-title">WARNING</p>
|
||||||
|
<p>warning content</p>
|
||||||
|
</div>
|
||||||
|
<div class="caution custom-block github-alert"><p class="custom-block-title">CAUTION</p>
|
||||||
|
<p>caution content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('matches markers case-insensitively', async () => {
|
||||||
|
expect(await render('> [!tip]\n> content')).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('supports custom titles after the marker', async () => {
|
||||||
|
expect(await render('> [!WARNING] Custom Title\n> content'))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
"<div class="warning custom-block github-alert"><p class="custom-block-title">Custom Title</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('respects custom labels from container options', async () => {
|
||||||
|
expect(
|
||||||
|
await render('> [!TIP]\n> content', { container: { tipLabel: '提示' } })
|
||||||
|
).toMatchInlineSnapshot(`
|
||||||
|
"<div class="tip custom-block github-alert"><p class="custom-block-title">提示</p>
|
||||||
|
<p>content</p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('supports block content and lazy continuation', async () => {
|
||||||
|
const src = [
|
||||||
|
'> [!NOTE]',
|
||||||
|
'> first paragraph',
|
||||||
|
'lazy continuation',
|
||||||
|
'>',
|
||||||
|
'> - list item',
|
||||||
|
'>',
|
||||||
|
'> ```js',
|
||||||
|
'> const a = 1',
|
||||||
|
'> ```'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p>
|
||||||
|
<p>first paragraph
|
||||||
|
lazy continuation</p>
|
||||||
|
<ul>
|
||||||
|
<li>list item</li>
|
||||||
|
</ul>
|
||||||
|
<div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre><code class="language-js">const a = 1
|
||||||
|
</code></pre>
|
||||||
|
</div></div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('converts markers without content', async () => {
|
||||||
|
expect(await render('> [!NOTE]')).toMatchInlineSnapshot(`
|
||||||
|
"<div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('leaves regular blockquotes and unknown markers alone', async () => {
|
||||||
|
const src = [
|
||||||
|
'> just a quote',
|
||||||
|
'',
|
||||||
|
'> [!FOO]',
|
||||||
|
'> not an alert',
|
||||||
|
'',
|
||||||
|
'paragraph [!NOTE] not at blockquote start'
|
||||||
|
].join('\n')
|
||||||
|
expect(await render(src)).toMatchInlineSnapshot(`
|
||||||
|
"<blockquote>
|
||||||
|
<p>just a quote</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>[!FOO]
|
||||||
|
not an alert</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>paragraph [!NOTE] not at blockquote start</p>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('can be disabled via gfmAlerts: false', async () => {
|
||||||
|
expect(await render('> [!NOTE]\n> content', { gfmAlerts: false }))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
"<blockquote>
|
||||||
|
<p>[!NOTE]
|
||||||
|
content</p>
|
||||||
|
</blockquote>
|
||||||
|
"
|
||||||
|
`)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import type { MarkdownItAsync } from 'markdown-it-async'
|
|
||||||
import type { ContainerOptions } from './containers'
|
|
||||||
|
|
||||||
const markerRE =
|
|
||||||
/^\[!(TIP|NOTE|INFO|IMPORTANT|WARNING|CAUTION|DANGER)\]([^\n\r]*)/i
|
|
||||||
|
|
||||||
export const gitHubAlertsPlugin = (
|
|
||||||
md: MarkdownItAsync,
|
|
||||||
options?: ContainerOptions
|
|
||||||
) => {
|
|
||||||
const titleMark = {
|
|
||||||
tip: options?.tipLabel || 'TIP',
|
|
||||||
note: options?.noteLabel || 'NOTE',
|
|
||||||
info: options?.infoLabel || 'INFO',
|
|
||||||
important: options?.importantLabel || 'IMPORTANT',
|
|
||||||
warning: options?.warningLabel || 'WARNING',
|
|
||||||
caution: options?.cautionLabel || 'CAUTION',
|
|
||||||
danger: options?.dangerLabel || 'DANGER'
|
|
||||||
} as Record<string, string>
|
|
||||||
|
|
||||||
md.core.ruler.after('block', 'github-alerts', (state) => {
|
|
||||||
const tokens = state.tokens
|
|
||||||
for (let i = 0; i < tokens.length; i++) {
|
|
||||||
if (tokens[i].type === 'blockquote_open') {
|
|
||||||
const startIndex = i
|
|
||||||
const open = tokens[startIndex]
|
|
||||||
let endIndex = i + 1
|
|
||||||
while (
|
|
||||||
endIndex < tokens.length &&
|
|
||||||
(tokens[endIndex].type !== 'blockquote_close' ||
|
|
||||||
tokens[endIndex].level !== open.level)
|
|
||||||
)
|
|
||||||
endIndex++
|
|
||||||
if (endIndex === tokens.length) continue
|
|
||||||
const close = tokens[endIndex]
|
|
||||||
const firstContent = tokens
|
|
||||||
.slice(startIndex, endIndex + 1)
|
|
||||||
.find((token) => token.type === 'inline')
|
|
||||||
if (!firstContent) continue
|
|
||||||
const match = firstContent.content.match(markerRE)
|
|
||||||
if (!match) continue
|
|
||||||
const type = match[1].toLowerCase()
|
|
||||||
const title = match[2].trim() || titleMark[type] || capitalize(type)
|
|
||||||
firstContent.content = firstContent.content
|
|
||||||
.slice(match[0].length)
|
|
||||||
.trimStart()
|
|
||||||
open.type = 'github_alert_open'
|
|
||||||
open.tag = 'div'
|
|
||||||
open.meta = {
|
|
||||||
title,
|
|
||||||
type
|
|
||||||
}
|
|
||||||
close.type = 'github_alert_close'
|
|
||||||
close.tag = 'div'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
md.renderer.rules.github_alert_open = function (tokens, idx) {
|
|
||||||
const { title, type } = tokens[idx].meta
|
|
||||||
const attrs = ''
|
|
||||||
return `<div class="${type} custom-block github-alert"${attrs}><p class="custom-block-title">${title}</p>\n`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function capitalize(str: string) {
|
|
||||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue