feat: custom containers and GitHub alerts

docs/guide/markdown.md

@@ -176,6 +176,51 @@ This is a dangerous warning.
 This is a details block.
 :::
 
+### Custom Container
+
+You may set custom containers globally by adding the following content in site config:
+
+```ts
+// config.ts
+export default defineConfig({
+ // ...
+ markdown: {
+ container: {
+ //...
+ customContainers: {
+ example: 'Example Label'
+ }
+ }
+ }
+ // ...
+})
+```
+
+And add your custom style:
+
+```css
+/* override.css */
+.custom-block.example {
+ border-color: var(--vp-c-brand-1);
+ color: var(--vp-c-brand-2);
+ background-color: var(--vp-c-brand-3);
+}
+
+.custom-block.example a,
+.custom-block.example code {
+ color: var(--vp-c-brand-1);
+}
+
+.custom-block.example a:hover,
+.custom-block.example a:hover > code {
+ color: var(--vp-c-brand-2);
+}
+
+.custom-block.example code {
+ background-color: var(--vp-c-brand-1);
+}
+```
+
 ### Custom Title
 
 You may set custom title by appending the text right after the "type" of the container.

src/node/markdown/markdown.ts

@@ -225,7 +225,7 @@ export const createMarkdownRenderer = async (
  .use(lineNumberPlugin, options.lineNumbers)
 
  if (options.gfmAlerts !== false) {
- md.use(gitHubAlertsPlugin)
+ md.use(gitHubAlertsPlugin, options.container)
  }
 
  // 3rd party plugins

src/node/markdown/plugins/containers.ts

@@ -14,34 +14,27 @@ export const containerPlugin = (
  options: Options,
  containerOptions?: ContainerOptions
 ) => {
- md.use(...createContainer('tip', containerOptions?.tipLabel || 'TIP', md))
- .use(...createContainer('info', containerOptions?.infoLabel || 'INFO', md))
- .use(
- ...createContainer(
- 'warning',
- containerOptions?.warningLabel || 'WARNING',
- md
- )
- )
- .use(
- ...createContainer(
- 'danger',
- containerOptions?.dangerLabel || 'DANGER',
- md
- )
- )
- .use(
- ...createContainer(
- 'details',
- containerOptions?.detailsLabel || 'Details',
- md
- )
- )
- // explicitly escape Vue syntax
- .use(container, 'v-pre', {
- render: (tokens: Token[], idx: number) =>
- tokens[idx].nesting === 1 ? `<div v-pre>\n` : `</div>\n`
- })
+ const defaultContainers = {
+ tip: containerOptions?.tipLabel ?? 'TIP',
+ info: containerOptions?.infoLabel ?? 'INFO',
+ warning: containerOptions?.warningLabel ?? 'WARNING',
+ danger: containerOptions?.dangerLabel ?? 'DANGER',
+ details: containerOptions?.detailsLabel ?? 'Details'
+ }
+ const containers: Record<string, string> = {
+ ...defaultContainers,
+ ...(containerOptions?.customContainers ?? {})
+ }
+
+ Object.entries(containers).forEach(([key, value]) => {
+ md.use(...createContainer(key, value, md))
+ })
+
+ // explicitly escape Vue syntax
+ md.use(container, 'v-pre', {
+ render: (tokens: Token[], idx: number) =>
+ tokens[idx].nesting === 1 ? `<div v-pre>\n` : `</div>\n`
+ })
  .use(container, 'raw', {
  render: (tokens: Token[], idx: number) =>
  tokens[idx].nesting === 1 ? `<div class="vp-raw">\n` : `</div>\n`
@@ -136,4 +129,5 @@ export interface ContainerOptions {
  detailsLabel?: string
  importantLabel?: string
  cautionLabel?: string
+ customContainers?: Record<string, string>
 }

src/node/markdown/plugins/githubAlerts.ts

@@ -1,22 +1,31 @@
 import type MarkdownIt from 'markdown-it'
 import type { ContainerOptions } from './containers'
 
-const markerRE =
- /^\[\!(TIP|NOTE|INFO|IMPORTANT|WARNING|CAUTION|DANGER)\]([^\n\r]*)/i
-
 export const gitHubAlertsPlugin = (
  md: MarkdownIt,
  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>
+ const defaultMarks = {
+ 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'
+ }
+ const marks: Record<string, string> = {
+ ...defaultMarks,
+ ...(options?.customContainers ?? {})
+ }
+
+ // Create a dynamic regular expression pattern based on marks
+ const markerRE = new RegExp(
+ `^\\[!(${Object.entries(marks)
+ .map(([key]) => key.toUpperCase())
+ .join('|')})]([^\\n\\r]*)`,
+ 'i'
+ )
 
  md.core.ruler.after('block', 'github-alerts', (state) => {
  const tokens = state.tokens
@@ -37,10 +46,10 @@ export const gitHubAlertsPlugin = (
  .slice(startIndex, endIndex + 1)
  .find((token) => token.type === 'inline')
  if (!firstContent) continue
- const match = firstContent.content.match(markerRE)
+ const match = RegExp(markerRE).exec(firstContent.content)
  if (!match) continue
  const type = match[1].toLowerCase()
- const title = match[2].trim() || titleMark[type] || capitalize(type)
+ const title = match[2].trim() || marks[type] || capitalize(type)
  firstContent.content = firstContent.content
  .slice(match[0].length)
  .trimStart()