Code blocks: Implement inline markdown support for heading

asset/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

docs/userGuide/syntax/code.mbdf

@@ -149,6 +149,25 @@ To add a heading, add the attribute `heading` with the heading text as the value
 </span>
 </include>
 
+Headings support inline Markdown, except for `Inline Code` and %%Dim%% text styles.
+
+<include src="outputBox.md" boilerplate >
+<span id="code">
+
+```` {.no-line-numbers}
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo></foo>
+```
+````
+</span>
+<span id="output">
+
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo></foo>
+```
+</span>
+</include>
+
 ##### Using multiple features
 You can also use multiple features together, as shown below.
 

src/lib/markbind/src/lib/markdown-it/index.js

@@ -136,8 +136,10 @@ markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
   const heading = token.attrGet('heading');
   const codeBlockContent = `<pre><code ${slf.renderAttrs(token)}>${str}</code></pre>`;
   if (heading) {
+    const renderedHeading = markdownIt.renderInline(heading);
+    const headingStyle = (renderedHeading === heading) ? 'code-block-heading' : 'code-block-heading inline-markdown-heading';
     return '<div class="code-block">'
-      + `<div class="code-block-heading"><span>${heading}</span></div>`
+      + `<div class="${headingStyle}"><span>${renderedHeading}</span></div>`
       + `<div class="code-block-content">${codeBlockContent}</div>`
       + '</div>';
   }

test/functional/test_site/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site/expected/testCodeBlocks.html

@@ -38,6 +38,20 @@
         <pre><code class="hljs markdown"><span class="highlighted">1  highlighted</span><span>2</span><span class="highlighted">3  highlighted</span><span>4</span><span class="highlighted">5  highlighted</span><span class="highlighted">6  highlighted</span><span class="highlighted">7  highlighted</span><span class="highlighted">8  highlighted</span><span>9</span><span>10</span></code></pre>
         <p><strong>highlight-lines attr with start-from attr cause corresponding lines to have 'highlighted' class based on 'start-from'</strong></p>
         <pre><code style="counter-reset: line 10;" class="hljs markdown"><span class="highlighted">11  highlighted</span><span>12</span><span class="highlighted">13  highlighted</span><span>14</span><span class="highlighted">15  highlighted</span><span class="highlighted">16  highlighted</span><span class="highlighted">17  highlighted</span><span class="highlighted">18  highlighted</span><span>19</span><span>20</span></code></pre>
+        <p><strong>Code block heading</strong></p>
+        <div class="code-block">
+          <div class="code-block-heading"><span>A heading</span></div>
+          <div class="code-block-content">
+            <pre><code heading="A heading" class="hljs"><span>&lt;foo&gt;</span><span>    &lt;bar&gt;</span><span>&lt;/foo&gt;</span></code></pre>
+          </div>
+        </div>
+        <p><strong>Code block heading with inline markdown</strong></p>
+        <div class="code-block">
+          <div class="code-block-heading inline-markdown-heading"><span><strong>Bold</strong>, <em>Italic</em>, <em><strong>Bold and Italic</strong></em>, <s>Strike through</s>, <strong><strong>Super Bold</strong></strong>, <ins>Underline</ins>, <mark>Highlight</mark>, 👍 ❗️ ❌ 🚧<br>We support page breaks</span></div>
+          <div class="code-block-content">
+            <pre><code heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:&lt;br&gt;We support page breaks" class="hljs"><span>&lt;foo&gt;</span><span>    &lt;bar&gt;</span><span>&lt;/foo&gt;</span></code></pre>
+          </div>
+        </div>
       </div>
     </div>
     <footer>

test/functional/test_site/testCodeBlocks.md

@@ -62,3 +62,19 @@ function fourEmptyLinesBelow() {
 19
 20
 ```
+
+**Code block heading**
+
+```{heading="A heading"}
+<foo>
+    <bar>
+</foo>
+```
+
+**Code block heading with inline markdown**
+
+```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+<foo>
+    <bar>
+</foo>
+```

test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site_convert/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site_special_tags/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;

test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css

@@ -46,6 +46,10 @@ pre > code.hljs[heading] {
     text-align: right;
 }
 
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
 .code-block-content {
     clear: both;
     display: block;