From 4a49343a4889d40369b524098e84eba8c392681a Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Fri, 10 Jun 2022 03:23:48 +0530
Subject: [PATCH 1/2] fix: allow title in containers to have markdown content

---
 src/node/markdown/plugins/containers.ts | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts
index def665b21ce8..8697e10a32d4 100644
--- a/src/node/markdown/plugins/containers.ts
+++ b/src/node/markdown/plugins/containers.ts
@@ -1,4 +1,5 @@
 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'
 
@@ -15,31 +16,23 @@ 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 {
   return [
     container,
     klass,
     {
-      render(tokens, idx) {
+      render(tokens, idx, options, env) {
+        const md = new MarkdownIt().set(options)
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
+          const title = md.renderInline(info || defaultTitle, env)
           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`
         }

From 55b378217f65b28dc953d12d6ebe26a072ee18c3 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 12 Jun 2022 01:15:17 +0530
Subject: [PATCH 2/2] perf: use existing renderer instance

---
 src/node/markdown/plugins/containers.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts
index 8697e10a32d4..810b194501c6 100644
--- a/src/node/markdown/plugins/containers.ts
+++ b/src/node/markdown/plugins/containers.ts
@@ -4,11 +4,11 @@ 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) =>
@@ -18,17 +18,20 @@ export const containerPlugin = (md: MarkdownIt) => {
 
 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,
     {
-      render(tokens, idx, options, env) {
-        const md = new MarkdownIt().set(options)
+      render(tokens, idx) {
         const token = tokens[idx]
         const info = token.info.trim().slice(klass.length).trim()
         if (token.nesting === 1) {
-          const title = md.renderInline(info || defaultTitle, env)
+          const title = md.renderInline(info || defaultTitle)
           if (klass === 'details') {
             return `<details class="${klass} custom-block"><summary>${title}</summary>\n`
           }