h1...6 markdown

devgutt · devgutt · commit 336b8aa8f748 · 2020-12-03T21:32:55.000Z
diff --git a/bundle.js b/bundle.js
@@ -8,4 +8,5 @@ const render = require('./src/Render.js');
 
 loader(data => {
     render(data);
-});
+});
+
diff --git a/examples/simple/css/main.css b/examples/simple/css/main.css
@@ -0,0 +1,6 @@
+.section-1 h2 {
+    color: darkviolet;
+}
+.content code {
+    color: red;
+}
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -5,7 +5,7 @@
     },
     "img": "this is the ![logo](img/ok.png) and this is the [link](#)",
     "menu": ["[Home](#section-1) [Section 1](#section-1) [Section 2](#section-2) [Page 1](/about)"],
-    "title": "Title h1",
+    "title": "# Title h1",
     "subtitle": [
         "_It is a long **established fact** that a reader will be distracted by the readable content of a page when looking at its layout._"
     ],
@@ -19,15 +19,15 @@
     "hello": "world",
     "coding": "this is the code ```{\n  \"key\": \"If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.\",\n  \"key2\": \"value\"\n}``` oia o code.",
     "section-1": {
-        "title": "Subtitle h2 👋",
+        "title": "## Subtitle h2 👋",
         "subtitle": "Subtitle",
         "description": "Paragraph ~~delete~~...",
         "more": "[Link →](#)",
         "code": "{\n  \"key\": \"If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.\",\n  \"key2\": \"value\"\n}",
         "num": 23,
         "bool": true,
         "subsection": {
-            "title": "Subtitle h3",
+            "title": "### Subtitle h3",
             "description": "Subsection [description](#) passages of Lorem Ipsum available, but the majority.",
             "img": "img/ok.png",
             "moreimg": [
@@ -43,7 +43,7 @@
         ]
     },
     "section-2": {
-        "title": "Subtitle h2",
+        "title": "## Subtitle h2",
         "description": "This is the description...",
         "items": [
             {
@@ -68,5 +68,8 @@
             "thank you 🙏"
         ]
     },
-    "#render": "<html hidden><script src=/dist/render.js></script></html><noscript><style>html{display:block !important; white-space:pre}</style></noscript>"
+    "#render": {
+        "_": "<html hidden><script src=/dist/render.js></script></html><noscript><style>html{display:block !important; white-space:pre}</style></noscript>",
+        "css": "css/main.css"
+    }
 }
diff --git a/src/Render.js b/src/Render.js
@@ -11,16 +11,21 @@ function render(data) {
         el.create('title', {}, (data['#info'] && data['#info'].title) || (data['title']))
     ]);
 
+    if (data['#render'] && data['#render'].css) {
+        el.append(document.head, el.create('link', {rel: "stylesheet", href: data['#render'].css}) );
+    }
+
     const main = el.create('main', {});
     el.append(document.body, main);
+
     renderItem(main, '', data, 0);
 }
 
 function renderItem(parent, key, value, level) {
 
         if (Array.isArray(value)) {
 
-            const section = el.create('div', {});
+            const section = el.create('div', {class: key});
             el.append(parent, section);
 
             value.forEach(v => {
@@ -29,18 +34,18 @@ function renderItem(parent, key, value, level) {
                     el.append(section, sectionItem);
                     renderItem(sectionItem, key, v, level);
                 } else {
-                    renderItem(parent, key, v, level);
+                    renderItem(section, null, v, level);
                 }
             })
 
         } else if (typeof value == 'object') {
 
             let p = parent;
             if (level == 1) {
-                p = el.create('section', {});
+                p = el.create('section', {class: key});
                 el.append(parent, [ el.create('a', {name: key}, ""), p]);
             } else if (level > 1) {
-                p = el.create('div', {});
+                p = el.create('div', {class: key});
                 el.append(parent, p);
             }
 
@@ -53,11 +58,7 @@ function renderItem(parent, key, value, level) {
 
         } else {
 
-            if (key == 'title') {
-                el.append(parent, el.create(`h${level < 6 ? level : '6'}`, {innerHTML: textFormatting(value + "")}));
-            } else {
-                el.append(parent, el.create('p', {innerHTML: textFormatting(value + "")}));
-            }
+            el.append(parent, el.create('p', {class: key, innerHTML: textFormatting(value + "")}));
 
         }
 }
diff --git a/src/TextFormatting.js b/src/TextFormatting.js
@@ -5,7 +5,7 @@ function textFormatting(str) {
     if (str === undefined) return "";
     if (typeof str != 'string') return "";
 
-    const regTop = /(\*\*?|__?|~~|[<>\r\n])|\[([^[]*)\]\(([^(]*)\)|!\[([^[]*)\]\(([^(]*)\)|`([^`]+)`|```([^`]+)```/g;
+    const regTop = /(\*\*?|__?|~~|[<>\r\n])|\[([^[]*)\]\(([^(]*)\)|!\[([^[]*)\]\(([^(]*)\)|`([^`]+)`|```([^`]+)```|(#{1,6})\ (.*)/g;
 
     const closeTag = {};
     const renderTag = tag => {
@@ -18,7 +18,7 @@ function textFormatting(str) {
         }
     };
 
-    return str.replace(regTop, (m, cmd, linkName, linkUrl, imgAlt, imgPath, code, pre) => {
+    return str.replace(regTop, (m, cmd, linkName, linkUrl, imgAlt, imgPath, code, pre, titleNum, title) => {
 
         if (cmd) {
             if (cmd == '**' || cmd == '__') {
@@ -44,6 +44,8 @@ function textFormatting(str) {
             return `<code>${code}</code>`
         } else if (pre) {
             return `<pre>${pre}</pre>`
+        } else if (title) {
+            return `<h${titleNum.length}>${title}</h1>`
         } else {
             return "";
         }
