Add toggle to display YAML/TOML frontmatter

background/storage.js

@@ -49,6 +49,7 @@ md.storage.defaults = (compilers) => {
     content: {
       autoreload: false,
       emoji: false,
+      frontmatter: false,
       mathjax: false,
       mermaid: false,
       syntax: true,

content/index.css

@@ -68,6 +68,13 @@ pre#_markdown,
   overflow-y: auto;
 }
 
+.frontmatter pre,
+.frontmatter pre code {
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
 @media (max-width: 576px) { /*Extra small - none*/
   .markdown-theme { width: auto !important; }
 }

content/index.js

@@ -117,7 +117,7 @@ var render = (md) => {
   chrome.runtime.sendMessage({
     message: 'markdown',
     compiler: state.compiler,
-    markdown: frontmatter(state.markdown)
+    markdown: frontmatter(state.markdown, state.content.frontmatter)
   }, (res) => {
     state.html = res.html
     if (state.content.emoji) {
@@ -233,18 +233,29 @@ var toc = (() => {
   }
 })()
 
-var frontmatter = (md) => {
-  if (/^-{3}[\s\S]+?-{3}/.test(md)) {
-    var [, yaml] = /^-{3}([\s\S]+?)-{3}/.exec(md)
-    var title = /title: (?:'|")*(.*)(?:'|")*/.exec(yaml)
+var frontmatter = (md, show) => {
+  var yamlMatch = /^(-{3})([\s\S]+?)(-{3})/.exec(md)
+  var tomlMatch = /^(\+{3})([\s\S]+?)(\+{3})/.exec(md)
+
+  if (yamlMatch) {
+    var [full, , content] = yamlMatch
+    var title = /title: (?:'|")*(.*)(?:'|")*/.exec(content)
     title && (document.title = title[1])
+    if (show) {
+      return md.replace(full, '<div class="frontmatter">\n\n```yaml\n' + content.trim() + '\n```\n\n</div>\n\n')
+    }
+    return md.replace(full, '')
   }
-  else if (/^\+{3}[\s\S]+?\+{3}/.test(md)) {
-    var [, toml] = /^\+{3}([\s\S]+?)\+{3}/.exec(md)
-    var title = /title = (?:'|"|`)*(.*)(?:'|"|`)*/.exec(toml)
+  else if (tomlMatch) {
+    var [full, , content] = tomlMatch
+    var title = /title = (?:'|"|`)*(.*)(?:'|"|`)*/.exec(content)
     title && (document.title = title[1])
+    if (show) {
+      return md.replace(full, '<div class="frontmatter">\n\n```toml\n' + content.trim() + '\n```\n\n</div>\n\n')
+    }
+    return md.replace(full, '')
   }
-  return md.replace(/^(?:-|\+){3}[\s\S]+?(?:-|\+){3}/, '')
+  return md
 }
 
 var favicon = () => {

popup/index.js

@@ -61,6 +61,7 @@ var Popup = () => {
       content: {
         autoreload: 'Auto reload on file change',
         emoji: 'Convert emoji :shortnames: into EmojiOne images',
+        frontmatter: 'Display yaml/toml frontmatter',
         toc: 'Generate Table of Contents',
         mathjax: 'Render MathJax formulas',
         mermaid: 'Mermaid diagrams',