markdown-it: display metadata as code block

src/resources/markdown-it.js

@@ -90,8 +90,11 @@ if (VMarkdownitOption.sup) {
     mdit = mdit.use(window.markdownitSup);
 }
 
+var metaDataText = null;
 if (VMarkdownitOption.metadata) {
-    mdit = mdit.use(window.markdownitFrontMatter, function(text){});
+    mdit = mdit.use(window.markdownitFrontMatter, function(text){
+        metaDataText = text;
+    });
 }
 
 if (VMarkdownitOption.emoji) {
@@ -124,12 +127,14 @@ var updateText = function(text) {
     }
 
     asyncJobsCount = 0;
+    metaDataText = null;
 
     var needToc = mdHasTocSection(text);
     var html = markdownToHtml(text, needToc);
     contentDiv.innerHTML = html;
     handleToc(needToc);
     insertImageCaption();
+    handleMetaData();
     renderMermaid('lang-mermaid');
     renderFlowchart(['lang-flowchart', 'lang-flow']);
     renderPlantUML('lang-puml');
@@ -169,3 +174,20 @@ var textToHtml = function(identifier, id, timeStamp, text, inlineStyle) {
 
     content.textToHtmlCB(identifier, id, timeStamp, html);
 };
+
+// Add a PRE containing metaDataText if it is not empty.
+var handleMetaData = function() {
+    if (!metaDataText || metaDataText.length == 0) {
+        return;
+    }
+
+    var pre = document.createElement('pre');
+    var code = document.createElement('code');
+    code.classList.add(VMetaDataCodeClass);
+
+    var text = hljs.highlight('yaml', metaDataText, true).value;
+    code.innerHTML = text;
+
+    pre.appendChild(code);
+    contentDiv.insertAdjacentElement('afterbegin', pre);
+};

src/resources/markdown_template.js

@@ -19,6 +19,7 @@ var pendingKeys = [];
 var VMermaidDivClass = 'mermaid-diagram';
 var VFlowchartDivClass = 'flowchart-diagram';
 var VPlantUMLDivClass = 'plantuml-diagram';
+var VMetaDataCodeClass = 'markdown-metadata';
 
 if (typeof VEnableMermaid == 'undefined') {
     VEnableMermaid = false;

src/resources/themes/v_moonlight/v_moonlight.css

@@ -105,6 +105,10 @@ pre code {
     white-space: pre;
 }
 
+pre code.markdown-metadata {
+    border-left: 5px solid #00695C;
+}
+
 aside {
     display: block;
     float: right;

src/resources/themes/v_native/v_native.css

@@ -105,6 +105,10 @@ pre code {
     white-space: pre;
 }
 
+pre code.markdown-metadata {
+    border-left: 5px solid #00897B;
+}
+
 aside {
     display: block;
     float: right;

src/resources/themes/v_pure/v_pure.css

@@ -106,6 +106,10 @@ pre code {
     white-space: pre;
 }
 
+pre code.markdown-metadata {
+    border-left: 5px solid #00897B;
+}
+
 aside {
     display: block;
     float: right;

src/resources/vnote.ini

@@ -232,9 +232,10 @@ custom_export=
 ; html: enable HTML tags in source
 ; break: convert '\n' in paragraphs into <br/>
 ; linkify: auto-convert URL-like text to links
-; sub: subscript;
-; sup: superscript;
-; metadata: metadata aware;
+; sub: subscript
+; sup: superscript
+; metadata: metadata aware
+; emoji: emoji and emoticon
 markdownit_opt=html,linkify,metadata
 
 ; Location and configuration for Mathjax