From 2637fd90ec89ced197f0e099dbc4167c9ac5818f Mon Sep 17 00:00:00 2001 From: Le Tan Date: Fri, 9 Nov 2018 20:37:44 +0800 Subject: [PATCH] markdown-it: support alert text via markdown-it-container plugin ::: alert-info This is an info text. ::: --- README.md | 1 + README_zh.md | 1 + src/resources/common.css | 58 +++++++++++++++++++ src/resources/docs/markdown_guide_en.md | 30 ++++++++++ src/resources/docs/markdown_guide_zh.md | 30 ++++++++++ src/resources/markdown-it.js | 18 ++++++ src/utils/markdown-it/README.md | 4 ++ .../markdown-it/markdown-it-container.min.js | 2 + src/utils/vutils.cpp | 3 +- src/vnote.cpp | 1 + src/vnote.h | 1 + src/vnote.qrc | 1 + 12 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 src/utils/markdown-it/markdown-it-container.min.js diff --git a/README.md b/README.md index 7174a0c0..42b21bb7 100644 --- a/README.md +++ b/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) diff --git a/README_zh.md b/README_zh.md index a67d7c88..5fc53fe7 100644 --- a/README_zh.md +++ b/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) diff --git a/src/resources/common.css b/src/resources/common.css index da593966..f3f8b70b 100644 --- a/src/resources/common.css +++ b/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 */ diff --git a/src/resources/docs/markdown_guide_en.md b/src/resources/docs/markdown_guide_en.md index 7e5479c2..01216576 100644 --- a/src/resources/docs/markdown_guide_en.md +++ b/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. diff --git a/src/resources/docs/markdown_guide_zh.md b/src/resources/docs/markdown_guide_zh.md index 2bdb9c76..24ef4009 100644 --- a/src/resources/docs/markdown_guide_zh.md +++ b/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`来辅助用户输入两个空格并换行。 diff --git a/src/resources/markdown-it.js b/src/resources/markdown-it.js index b86f242a..f6b298f7 100644 --- a/src/resources/markdown-it.js +++ b/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 '\n'; + } + } +}); + var mdHasTocSection = function(markdown) { var n = markdown.search(/(\n|^)\[toc\]/i); return n != -1; diff --git a/src/utils/markdown-it/README.md b/src/utils/markdown-it/README.md index c1480bae..c888d71d 100644 --- a/src/utils/markdown-it/README.md +++ b/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 diff --git a/src/utils/markdown-it/markdown-it-container.min.js b/src/utils/markdown-it/markdown-it-container.min.js new file mode 100644 index 00000000..cbbe1a25 --- /dev/null +++ b/src/utils/markdown-it/markdown-it-container.min.js @@ -0,0 +1,2 @@ +/*! markdown-it-container 2.0.0 https://github.com//markdown-it/markdown-it-container @license MIT */ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var r;r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,r.markdownitContainer=e()}}(function(){return function e(r,n,t){function o(f,a){if(!n[f]){if(!r[f]){var u="function"==typeof require&&require;if(!a&&u)return u(f,!0);if(i)return i(f,!0);var c=new Error("Cannot find module '"+f+"'");throw c.code="MODULE_NOT_FOUND",c}var s=n[f]={exports:{}};r[f][0].call(s.exports,function(e){var n=r[f][1][e];return o(n?n:e)},s,s.exports,e,r,n,t)}return n[f].exports}for(var i="function"==typeof require&&require,f=0;f=i&&a[(i-y)%c]===e.src[i];i++);if(d=Math.floor((i-y)/c),f>d)return!1;if(i-=(i-y)%c,p=e.src.slice(y,i),k=e.src.slice(i,_),!s(k))return!1;if(o)return!0;for(l=n;(l++,!(l>=t))&&(y=e.bMarks[l]+e.tShift[l],_=e.eMarks[l],!(_>y&&e.sCount[l]=4)){for(i=y+1;_>=i&&a[(i-y)%c]===e.src[i];i++);if(!(Math.floor((i-y)/c)i))){v=!0;break}}return b=e.parentType,m=e.lineMax,e.parentType="container",e.lineMax=l,h=e.push("container_"+r+"_open","div",1),h.markup=p,h.block=!0,h.info=k,h.map=[n,l],e.md.block.tokenize(e,n+1,l),h=e.push("container_"+r+"_close","div",-1),h.markup=e.src.slice(y,i),h.block=!0,e.parentType=b,e.lineMax=m,e.line=l+(v?1:0),!0}n=n||{};var f=3,a=n.marker||":",u=a.charCodeAt(0),c=a.length,s=n.validate||t,l=n.render||o;e.block.ruler.before("fence","container_"+r,i,{alt:["paragraph","reference","blockquote","list"]}),e.renderer.rules["container_"+r+"_open"]=l,e.renderer.rules["container_"+r+"_close"]=l}},{}]},{},[1])(1)}); diff --git a/src/utils/vutils.cpp b/src/utils/vutils.cpp index d79412bc..3c5b0c74 100644 --- a/src/utils/vutils.cpp +++ b/src/utils/vutils.cpp @@ -705,7 +705,8 @@ QString VUtils::generateHtmlTemplate(const QString &p_template, "\n" + "\n" + "\n" + - "\n"; + "\n" + + "\n"; if (g_config->getEnableMathjax()) { extraFile += "\n"; diff --git a/src/vnote.cpp b/src/vnote.cpp index bd1688e8..cea92b4d 100644 --- a/src/vnote.cpp +++ b/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"; diff --git a/src/vnote.h b/src/vnote.h index f8f6e9c0..2dfaf239 100644 --- a/src/vnote.h +++ b/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; diff --git a/src/vnote.qrc b/src/vnote.qrc index f6982ac8..d945c203 100644 --- a/src/vnote.qrc +++ b/src/vnote.qrc @@ -276,5 +276,6 @@ resources/docs/welcome_en.md resources/docs/welcome_zh.md resources/icons/256x256/vnote.png + utils/markdown-it/markdown-it-container.min.js