From 6752a91ef426fd664548eac74ac14564566744cf Mon Sep 17 00:00:00 2001
From: Le Tan <tamlokveer@gmail.com>
Date: Thu, 10 May 2018 20:08:26 +0800
Subject: [PATCH] markdown-it: display metadata as code block

---
 src/resources/markdown-it.js                  | 24 ++++++++++++++++++-
 src/resources/markdown_template.js            |  1 +
 .../themes/v_moonlight/v_moonlight.css        |  4 ++++
 src/resources/themes/v_native/v_native.css    |  4 ++++
 src/resources/themes/v_pure/v_pure.css        |  4 ++++
 src/resources/vnote.ini                       |  7 +++---
 6 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/resources/markdown-it.js b/src/resources/markdown-it.js
index 70d00ca8..889f3512 100644
--- a/src/resources/markdown-it.js
+++ b/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);
+};
diff --git a/src/resources/markdown_template.js b/src/resources/markdown_template.js
index 7024f016..d3ea880c 100644
--- a/src/resources/markdown_template.js
+++ b/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;
diff --git a/src/resources/themes/v_moonlight/v_moonlight.css b/src/resources/themes/v_moonlight/v_moonlight.css
index 38b7afc5..90d3f2e1 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.css
+++ b/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;
diff --git a/src/resources/themes/v_native/v_native.css b/src/resources/themes/v_native/v_native.css
index f83ea116..3a71592d 100644
--- a/src/resources/themes/v_native/v_native.css
+++ b/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;
diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css
index 7961c77a..0c8221a3 100644
--- a/src/resources/themes/v_pure/v_pure.css
+++ b/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;
diff --git a/src/resources/vnote.ini b/src/resources/vnote.ini
index a502ef58..a235c7c4 100644
--- a/src/resources/vnote.ini
+++ b/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