fix: title in containers not working with markdown content (#765) (#768)

fix #765

src/node/markdown/plugins/containers.ts

@@ -1,13 +1,14 @@
 import MarkdownIt from 'markdown-it'
+import { RenderRule } from 'markdown-it/lib/renderer'
 import Token from 'markdown-it/lib/token'
 import container from 'markdown-it-container'
 
 export const containerPlugin = (md: MarkdownIt) => {
-  md.use(...createContainer('tip', 'TIP'))
-    .use(...createContainer('info', 'INFO'))
-    .use(...createContainer('warning', 'WARNING'))
-    .use(...createContainer('danger', 'DANGER'))
-    .use(...createContainer('details', 'Details'))
+  md.use(...createContainer('tip', 'TIP', md))
+    .use(...createContainer('info', 'INFO', md))
+    .use(...createContainer('warning', 'WARNING', md))
+    .use(...createContainer('danger', 'DANGER', md))
+    .use(...createContainer('details', 'Details', md))
     // explicitly escape Vue syntax
     .use(container, 'v-pre', {
       render: (tokens: Token[], idx: number) =>
@@ -15,15 +16,13 @@ export const containerPlugin = (md: MarkdownIt) => {
     })
 }
 
-type ContainerArgs = [
-  typeof container,
-  string,
-  {
-    render(tokens: Token[], idx: number): string
-  }
-]
+type ContainerArgs = [typeof container, string, { render: RenderRule }]
 
-function createContainer(klass: string, defaultTitle: string): ContainerArgs {
+function createContainer(
+  klass: string,
+  defaultTitle: string,
+  md: MarkdownIt
+): ContainerArgs {
   return [
     container,
     klass,
@@ -32,14 +31,11 @@ function createContainer(klass: string, defaultTitle: string): ContainerArgs {
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
+          const title = md.renderInline(info || defaultTitle)
           if (klass === 'details') {
-            return `<details class="${klass} custom-block">${
-              info ? `<summary>${info}</summary>` : `<summary>Details</summary>`
-            }\n`
+            return `<details class="${klass} custom-block"><summary>${title}</summary>\n`
           }
-          return `<div class="${klass} custom-block"><p class="custom-block-title">${
-            info || defaultTitle
-          }</p>\n`
+          return `<div class="${klass} custom-block"><p class="custom-block-title">${title}</p>\n`
         } else {
           return klass === 'details' ? `</details>\n` : `</div>\n`
         }