markdown-it: support alert text via markdown-it-container plugin

::: alert-info
This is an info text.
:::

README.md

@@ -207,6 +207,7 @@ In VNote, almost everything is configurable, such as background color, font, and
 - [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) (Unknown) (Thanks @Kinka for help)
 - [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) (MIT License)
 - [markdown-it-texmath](https://github.com/goessner/markdown-it-texmath) (MIT License)
+- [markdown-it-container 2.0.0](https://github.com/markdown-it/markdown-it-container) (MIT License)
 - [mermaid 7.0.0](https://github.com/knsv/mermaid) (MIT License)
 - [MathJax](https://www.mathjax.org/) (Apache-2.0)
 - [showdown](https://github.com/showdownjs/showdown) (Unknown)

README_zh.md

@@ -208,6 +208,7 @@ VNote中，几乎一切都是可以定制的，例如背景颜色、字体以及
 - [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) (Unknown) (Thanks @Kinka for help)
 - [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) (MIT License)
 - [markdown-it-texmath](https://github.com/goessner/markdown-it-texmath) (MIT License)
+- [markdown-it-container 2.0.0](https://github.com/markdown-it/markdown-it-container) (MIT License)
 - [mermaid 7.0.0](https://github.com/knsv/mermaid) (MIT License)
 - [MathJax](https://www.mathjax.org/) (Apache-2.0)
 - [showdown](https://github.com/showdownjs/showdown) (Unknown)

src/resources/common.css

@@ -128,3 +128,61 @@ span.modal-close:focus {
     }
 }
 /* Print*/
+
+/* Alert */
+.alert {
+    position: relative;
+    padding: .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+}
+
+.alert-primary {
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+}
+
+.alert-secondary {
+    color: #383d41;
+    background-color: #e2e3e5;
+    border-color: #d6d8db;
+}
+
+.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+
+.alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}
+
+.alert-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba;
+}
+
+.alert-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+
+.alert-light {
+    color: #818182;
+    background-color: #fefefe;
+    border-color: #fdfdfe;
+}
+
+.alert-dark {
+    color: #1b1e21;
+    background-color: #d6d8d9;
+    border-color: #c6c8ca;
+}
+/* Alert */

src/resources/docs/markdown_guide_en.md

@@ -216,6 +216,36 @@ This is the 1^st^ superscript.
 This is the H~2~O subscript.
 ```
 
+### Alert
+With `Markdown-it` renderer, you can add some alert text.
+
+```md
+::: alert-info
+
+This is an info text.
+
+:::
+
+::: alert-danger
+
+This is a danger text.
+
+:::
+```
+
+Available variants:
+
+```
+alert-primary
+alert-secondary
+alert-success
+alert-info
+alert-warning
+alert-danger
+alert-light
+alert-dark
+```
+
 ### New Line and Paragraph
 If you want to enter a new line, you should add two spaces after current line and then continue your input. VNote provides `Shift+Enter` to help.
 

src/resources/docs/markdown_guide_zh.md

@@ -217,6 +217,36 @@ This is the 1^st^ superscript.
 This is the H~2~O subscript.
 ```
 
+### 警告
+使用`Markdown-it`渲染引擎时，可以添加警告信息。
+
+```md
+::: alert-info
+
+这是一个信息文本。
+
+:::
+
+::: alert-danger
+
+这是一个危险文本。
+
+:::
+```
+
+可用的一些警告形式如下：
+
+```
+alert-primary
+alert-secondary
+alert-success
+alert-info
+alert-warning
+alert-danger
+alert-light
+alert-dark
+```
+
 ### 换行和段落
 如果需要换行，您应该在当前行末尾添加两个空格，然后换行。VNote提供快捷键`Shift+Enter`来辅助用户输入两个空格并换行。
 

src/resources/markdown-it.js

@@ -112,6 +112,24 @@ if (typeof texmath != 'undefined') {
     mdit = mdit.use(texmath, { delimiters: ['dollars', 'raw'] });
 }
 
+mdit.use(window.markdownitContainer, 'alert', {
+    validate: function(params) {
+        return params.trim().match(/^alert-\S+$/);
+    },
+
+    render: function (tokens, idx) {
+        let type = tokens[idx].info.trim().match(/^(alert-\S+)$/);
+        if (tokens[idx].nesting === 1) {
+            // opening tag
+            let alertClass = type[1];
+            return '<div class="alert ' + alertClass + '" role="alert">';
+        } else {
+            // closing tag
+            return '</div>\n';
+        }
+    }
+});
+
 var mdHasTocSection = function(markdown) {
     var n = markdown.search(/(\n|^)\[toc\]/i);
     return n != -1;

src/utils/markdown-it/README.md

@@ -39,3 +39,7 @@ Vitaly Puzrin
 # [markdown-it-texmath](https://github.com/goessner/markdown-it-texmath)
 v0.0.0
 Stefan Goessner
+
+# [markdown-it-container](https://github.com/markdown-it/markdown-it-container)
+v2.0.0
+Vitaly Puzrin

src/utils/vutils.cpp

@@ -705,7 +705,8 @@ QString VUtils::generateHtmlTemplate(const QString &p_template,
                     "<script src=\"qrc" + VNote::c_markdownitAnchorExtraFile + "\"></script>\n" +
                     "<script src=\"qrc" + VNote::c_markdownitTaskListExtraFile + "\"></script>\n" +
                     "<script src=\"qrc" + VNote::c_markdownitImsizeExtraFile + "\"></script>\n" +
-                    "<script src=\"qrc" + VNote::c_markdownitFootnoteExtraFile + "\"></script>\n";
+                    "<script src=\"qrc" + VNote::c_markdownitFootnoteExtraFile + "\"></script>\n" +
+                    "<script src=\"qrc" + VNote::c_markdownitContainerExtraFile + "\"></script>\n";
 
         if (g_config->getEnableMathjax()) {
             extraFile += "<script src=\"qrc" + VNote::c_markdownitTexMathExtraFile + "\"></script>\n";

src/vnote.cpp

@@ -43,6 +43,7 @@ const QString VNote::c_markdownitFrontMatterExtraFile = ":/utils/markdown-it/mar
 const QString VNote::c_markdownitImsizeExtraFile = ":/utils/markdown-it/markdown-it-imsize.min.js";
 const QString VNote::c_markdownitEmojiExtraFile = ":/utils/markdown-it/markdown-it-emoji.min.js";
 const QString VNote::c_markdownitTexMathExtraFile = ":/utils/markdown-it/markdown-it-texmath.js";
+const QString VNote::c_markdownitContainerExtraFile = ":/utils/markdown-it/markdown-it-container.min.js";
 
 const QString VNote::c_showdownJsFile = ":/resources/showdown.js";
 const QString VNote::c_showdownExtraFile = ":/utils/showdown/showdown.min.js";

src/vnote.h

@@ -54,6 +54,7 @@ public:
     static const QString c_markdownitImsizeExtraFile;
     static const QString c_markdownitEmojiExtraFile;
     static const QString c_markdownitTexMathExtraFile;
+    static const QString c_markdownitContainerExtraFile;
 
     // Showdown
     static const QString c_showdownJsFile;

src/vnote.qrc

@@ -276,5 +276,6 @@
         <file>resources/docs/welcome_en.md</file>
         <file>resources/docs/welcome_zh.md</file>
         <file>resources/icons/256x256/vnote.png</file>
+        <file>utils/markdown-it/markdown-it-container.min.js</file>
     </qresource>
 </RCC>