add Markdown renderer markdown-it

README.md

@@ -312,6 +312,8 @@ If you prefer command line on macOS, you could follow these steps.
 - [Marked](https://github.com/chjj/marked) (MIT License)
 - [Highlight.js](https://github.com/isagalaev/highlight.js/) (BSD License)
 - [Ionicons 2.0.1](https://github.com/driftyco/ionicons/) (MIT License)
+- [markdown-it 8.3.1](https://github.com/markdown-it/markdown-it) (MIT License)
+- [markdown-it-headinganchor 1.3.0](https://github.com/adam-p/markdown-it-headinganchor) (MIT License)
 
 # License (代码许可)
 VNote is licensed under the [MIT license](http://opensource.org/licenses/MIT).

src/resources/hoedown.js

@@ -1,12 +1,5 @@
 var placeholder = document.getElementById('placeholder');
 
-var scrollToAnchor = function(anchor) {
-    var anc = document.getElementById(anchor);
-    if (anc != null) {
-        anc.scrollIntoView();
-    }
-};
-
 var updateHtml = function(html) {
     placeholder.innerHTML = html;
     var codes = document.getElementsByTagName('code');
@@ -17,25 +10,3 @@ var updateHtml = function(html) {
     }
 }
 
-var onWindowScroll = function() {
-    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
-    var eles = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
-
-    if (eles.length == 0) {
-        return;
-    }
-    var curIdx = 0;
-    var biaScrollTop = scrollTop + 50;
-    for (var i = 0; i < eles.length; ++i) {
-        if (biaScrollTop >= eles[i].offsetTop) {
-            curIdx = i;
-        } else {
-            break;
-        }
-    }
-
-    var curHeader = eles[curIdx].getAttribute("id");
-    if (curHeader != null) {
-        content.setHeader(curHeader);
-    }
-}

src/resources/markdown-it.js

@@ -0,0 +1,169 @@
+var placeholder = document.getElementById('placeholder');
+var nameCounter = 0;
+var toc = []; // Table of Content as a list
+
+var getHeadingLevel = function(h) {
+    var level = 1;
+    switch (h) {
+    case 'h1':
+        break;
+
+    case 'h2':
+        level += 1;
+        break;
+
+    case 'h3':
+        level += 2;
+        break;
+
+    case 'h4':
+        level += 3;
+        break;
+
+    case 'h5':
+        level += 4;
+        break;
+
+    case 'h6':
+        level += 5;
+        break;
+
+    default:
+        level += 6;
+        break;
+    }
+    return level;
+}
+
+var mdit = window.markdownit({
+    html: true,
+    linkify: true,
+    typographer: true,
+    highlight: function(str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+            return hljs.highlight(lang, str).value;
+        } else {
+            return hljs.highlightAuto(str).value;
+        }
+        return '';
+    }
+});
+
+mdit = mdit.use(window.markdownitHeadingAnchor, {
+    anchorClass: 'vnote-anchor',
+    addHeadingID: true,
+    addHeadingAnchor: true,
+    slugify: function(md, s) {
+        return 'toc_' + nameCounter++;
+    },
+    headingHook: function(openToken, inlineToken, anchor) {
+        toc.push({
+            level: getHeadingLevel(openToken.tag),
+            anchor: anchor,
+            title: inlineToken.content
+        });
+    }
+});
+
+var mdHasTocSection = function(markdown) {
+    var n = markdown.search(/(\n|^)\[toc\]/i);
+    return n != -1;
+};
+
+var markdownToHtml = function(markdown, needToc) {
+    toc = [];
+    nameCounter = 0;
+    var html = mdit.render(markdown);
+    if (needToc) {
+        return html.replace(/<p>\[TOC\]<\/p>/ig, '<div class="vnote-toc"></div>');
+    } else {
+        return html;
+    }
+};
+
+// Handle wrong title levels, such as '#' followed by '###'
+var toPerfectToc = function(toc) {
+    var i;
+    var curLevel = 1;
+    var perfToc = [];
+    for (i in toc) {
+        var item = toc[i];
+        while (item.level > curLevel + 1) {
+            curLevel += 1;
+            var tmp = { level: curLevel,
+                        anchor: item.anchor,
+                        title: '[EMPTY]'
+                      };
+            perfToc.push(tmp);
+        }
+        perfToc.push(item);
+        curLevel = item.level;
+    }
+    return perfToc;
+};
+
+var itemToHtml = function(item) {
+    return '<a href="#' + item.anchor + '">' + item.title + '</a>';
+};
+
+// Turn a perfect toc to a tree using <ul>
+var tocToTree = function(toc) {
+    var i;
+    var front = '<li>';
+    var ending = ['</li>'];
+    var curLevel = 1;
+    for (i in toc) {
+        var item = toc[i];
+        if (item.level == curLevel) {
+            front += '</li>';
+            front += '<li>';
+            front += itemToHtml(item);
+        } else if (item.level > curLevel) {
+            // assert(item.level - curLevel == 1)
+            front += '<ul>';
+            ending.push('</ul>');
+            front += '<li>';
+            front += itemToHtml(item);
+            ending.push('</li>');
+            curLevel = item.level;
+        } else {
+            while (item.level < curLevel) {
+                var ele = ending.pop();
+                front += ele;
+                if (ele == '</ul>') {
+                    curLevel--;
+                }
+            }
+            front += '</li>';
+            front += '<li>';
+            front += itemToHtml(item);
+        }
+    }
+    while (ending.length > 0) {
+        front += ending.pop();
+    }
+    front = front.replace("<li></li>", "");
+    front = '<ul>' + front + '</ul>';
+    return front;
+};
+
+var handleToc = function(needToc) {
+    var tocTree = tocToTree(toPerfectToc(toc));
+    content.setToc(tocTree);
+
+    // Add it to html
+    if (needToc) {
+        var eles = document.getElementsByClassName('vnote-toc');
+        for (var i = 0; i < eles.length; ++i) {
+            eles[i].innerHTML = tocTree;
+        }
+    }
+};
+
+var updateText = function(text) {
+    var needToc = mdHasTocSection(text);
+    var html = markdownToHtml(text, needToc);
+    placeholder.innerHTML = html;
+    handleToc(needToc);
+}
+

src/resources/markdown_template.js

@@ -15,7 +15,35 @@ new QWebChannel(qt.webChannelTransport,
         content.requestScrollToAnchor.connect(scrollToAnchor);
     });
 
-window.onscroll = onWindowScroll;
+var scrollToAnchor = function(anchor) {
+    var anc = document.getElementById(anchor);
+    if (anc != null) {
+        anc.scrollIntoView();
+    }
+};
+
+window.onscroll = function() {
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
+    var eles = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+
+    if (eles.length == 0) {
+        return;
+    }
+    var curIdx = 0;
+    var biaScrollTop = scrollTop + 50;
+    for (var i = 0; i < eles.length; ++i) {
+        if (biaScrollTop >= eles[i].offsetTop) {
+            curIdx = i;
+        } else {
+            break;
+        }
+    }
+
+    var curHeader = eles[curIdx].getAttribute("id");
+    if (curHeader != null) {
+        content.setHeader(curHeader);
+    }
+}
 
 document.onkeydown = function(e) {
     e = e || window.event;

src/resources/marked.js

@@ -23,8 +23,8 @@ marked.setOptions({
 
 var markdownToHtml = function(markdown, needToc) {
     toc = [];
-    var html = marked(markdown, { renderer: renderer });
     nameCounter = 0;
+    var html = marked(markdown, { renderer: renderer });
     if (needToc) {
         return html.replace(/<p>\[TOC\]<\/p>/ig, '<div class="vnote-toc"></div>');
     } else {
@@ -123,32 +123,3 @@ var updateText = function(text) {
     handleToc(needToc);
 };
 
-var scrollToAnchor = function(anchor) {
-    var anc = document.getElementById(anchor);
-    if (anc != null) {
-        anc.scrollIntoView();
-    }
-};
-
-var onWindowScroll = function() {
-    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
-    var eles = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
-
-    if (eles.length == 0) {
-        return;
-    }
-    var curIdx = 0;
-    var biaScrollTop = scrollTop + 50;
-    for (var i = 0; i < eles.length; ++i) {
-        if (biaScrollTop >= eles[i].offsetTop) {
-            curIdx = i;
-        } else {
-            break;
-        }
-    }
-
-    var curHeader = eles[curIdx].getAttribute("id");
-    if (curHeader != null) {
-        content.setHeader(curHeader);
-    }
-}

src/resources/vnote.ini

@@ -11,6 +11,8 @@ current_background_color=System
 current_render_background_color=System
 language=System
 editor_font_size=12
+; 0 - Hoedown, 1 - Marked, 2 - Markdown-it
+markdown_converter=2
 
 [session]
 tools_dock_checked=true

src/utils/markdown-it/README.md

@@ -0,0 +1,9 @@
+# [markdown-it](https://github.com/markdown-it/markdown-it)
+v8.3.1
+Alex Kocharin
+Vitaly Puzrin
+
+# [markdown-it-headinganchor](https://github.com/adam-p/markdown-it-headinganchor)
+v1.3.0
+Adam Pritchard
+Modified by Le Tan

src/utils/markdown-it/markdown-it-headinganchor.js

@@ -0,0 +1,72 @@
+/*! markdown-it-headinganchor 1.2.1 https://github.com//adam-p/markdown-it-headinganchor @license MIT */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.markdownitHeadingAnchor = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/*
+ * Copyright Adam Pritchard 2015
+ * MIT License : http://adampritchard.mit-license.org/
+ */
+
+'use strict';
+/*jshint node:true*/
+
+function slugify(md, s) {
+  // Unicode-friendly
+  var spaceRegex = new RegExp(md.utils.lib.ucmicro.Z.source, 'g');
+  return encodeURIComponent(s.replace(spaceRegex, ''));
+}
+
+function makeRule(md, options) {
+  return function addHeadingAnchors(state) {
+    // Go to length-2 because we're going to be peeking ahead.
+    for (var i = 0; i < state.tokens.length - 1; ++i) {
+      if (state.tokens[i].type !== 'heading_open' ||
+          state.tokens[i+1].type !== 'inline') {
+        continue;
+      }
+
+      var headingOpenToken = state.tokens[i];
+      var headingInlineToken = state.tokens[i+1];
+
+      if (!headingInlineToken.content) {
+        continue;
+      }
+
+      var anchorName = options.slugify(md, headingInlineToken.content);
+
+      options.headingHook(headingOpenToken, headingInlineToken, anchorName);
+
+      if (options.addHeadingID) {
+        headingOpenToken.attrPush(['id', anchorName]);
+      }
+
+      if (options.addHeadingAnchor) {
+        var anchorToken = new state.Token('html_inline', '', 0);
+        anchorToken.content =
+          '<a name="' +
+          anchorName +
+          '" class="' +
+          options.anchorClass +
+          '" href="#"></a>';
+
+        headingInlineToken.children.unshift(anchorToken);
+      }
+
+      // Advance past the inline and heading_close tokens.
+      i += 2;
+    }
+  };
+}
+
+module.exports = function headinganchor_plugin(md, opts) {
+  var defaults = {
+    anchorClass: 'markdown-it-headinganchor',
+    addHeadingID: true,
+    addHeadingAnchor: true,
+    // Added by Le Tan (github.com/tamlok)
+    slugify: slugify,
+    headingHook: function(openToken, inlineToken, anchor) {}
+  };
+  var options = md.utils.assign(defaults, opts);
+  md.core.ruler.push('heading_anchors', makeRule(md, options));
+};
+
+},{}]},{},[1])(1)
+});

src/vconfigmanager.h

@@ -16,7 +16,8 @@ class QString;
 enum MarkdownConverterType
 {
     Hoedown = 0,
-    Marked
+    Marked,
+    MarkdownIt
 };
 
 struct VColor

src/vedittab.cpp

@@ -108,11 +108,11 @@ void VEditTab::showFileReadMode()
         m_textEditor->setReadOnly(true);
         break;
     case DocType::Markdown:
-        if (mdConverterType == MarkdownConverterType::Marked) {
+        if (mdConverterType == MarkdownConverterType::Hoedown) {
+            previewByConverter();
+        } else {
             document.updateText();
             updateTocFromHtml(document.getToc());
-        } else {
-            previewByConverter();
         }
         setCurrentWidget(webPreviewer);
         clearSearchedWordHighlight();
@@ -287,6 +287,12 @@ void VEditTab::setupMarkdownPreview()
         jsFile = "qrc" + VNote::c_hoedownJsFile;
         break;
 
+    case MarkdownConverterType::MarkdownIt:
+        jsFile = "qrc" + VNote::c_markdownitJsFile;
+        extraFile = "<script src=\"qrc" + VNote::c_markdownitExtraFile + "\"></script>\n" +
+                    "<script src=\"qrc" + VNote::c_markdownitTocExtraFile + "\"></script>";
+        break;
+
     default:
         Q_ASSERT(false);
     }

src/vmainwindow.cpp

@@ -290,16 +290,34 @@ void VMainWindow::initMarkdownMenu()
     hoedownAct->setStatusTip(tr("Use Hoedown to convert Markdown to HTML (re-open current tabs to make it work)"));
     hoedownAct->setCheckable(true);
     hoedownAct->setData(int(MarkdownConverterType::Hoedown));
+
+    QAction *markdownitAct = new QAction(tr("Markdown-it"), converterAct);
+    markdownitAct->setStatusTip(tr("Use Markdown-it to convert Markdown to HTML (re-open current tabs to make it work)"));
+    markdownitAct->setCheckable(true);
+    markdownitAct->setData(int(MarkdownConverterType::MarkdownIt));
+
     connect(converterAct, &QActionGroup::triggered,
             this, &VMainWindow::changeMarkdownConverter);
-
     converterMenu->addAction(hoedownAct);
     converterMenu->addAction(markedAct);
+    converterMenu->addAction(markdownitAct);
+
     MarkdownConverterType converterType = vconfig.getMdConverterType();
-    if (converterType == MarkdownConverterType::Marked) {
+    switch (converterType) {
+    case MarkdownConverterType::Marked:
         markedAct->setChecked(true);
-    } else if (converterType == MarkdownConverterType::Hoedown) {
+        break;
+
+    case MarkdownConverterType::Hoedown:
         hoedownAct->setChecked(true);
+        break;
+
+    case MarkdownConverterType::MarkdownIt:
+        markdownitAct->setChecked(true);
+        break;
+
+    default:
+        Q_ASSERT(false);
     }
 
     initRenderBackgroundMenu(markdownMenu);

src/vnote.cpp

@@ -14,6 +14,9 @@ QString VNote::s_markdownTemplate;
 const QString VNote::c_hoedownJsFile = ":/resources/hoedown.js";
 const QString VNote::c_markedJsFile = ":/resources/marked.js";
 const QString VNote::c_markedExtraFile = ":/utils/marked/marked.min.js";
+const QString VNote::c_markdownitJsFile = ":/resources/markdown-it.js";
+const QString VNote::c_markdownitExtraFile = ":/utils/markdown-it/markdown-it.min.js";
+const QString VNote::c_markdownitTocExtraFile = ":/utils/markdown-it/markdown-it-headinganchor.js";
 
 VNote::VNote(QObject *parent)
     : QObject(parent), m_mainWindow(dynamic_cast<VMainWindow *>(parent))

src/vnote.h

@@ -26,10 +26,19 @@ public:
     void initTemplate();
 
     static QString s_markdownTemplate;
+
+    // Hoedown
     static const QString c_hoedownJsFile;
+
+    // Marked
     static const QString c_markedJsFile;
     static const QString c_markedExtraFile;
 
+    // Markdown-it
+    static const QString c_markdownitJsFile;
+    static const QString c_markdownitExtraFile;
+    static const QString c_markdownitTocExtraFile;
+
     inline const QVector<QPair<QString, QString> > &getPalette() const;
     void initPalette(QPalette palette);
     QString getColorFromPalette(const QString &p_name) const;

src/vnote.qrc

@@ -86,5 +86,8 @@
         <file>resources/markdown_template.js</file>
         <file>resources/hoedown.js</file>
         <file>resources/marked.js</file>
+        <file>resources/markdown-it.js</file>
+        <file>utils/markdown-it/markdown-it.min.js</file>
+        <file>utils/markdown-it/markdown-it-headinganchor.js</file>
     </qresource>
 </RCC>