Fixed HTML encode bugs #476 #649 etc.

6 years ago · e8eb6b094b
10 changed files with 994 additions and 918 deletions
--- a/README.md
+++ b/README.md
@ -1,271 +1,271 @@
 # Editor.md
 ![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
 ![](https://img.shields.io/github/stars/pandao/editor.md.svg)
 ![](https://img.shields.io/github/forks/pandao/editor.md.svg)
 ![](https://img.shields.io/github/tag/pandao/editor.md.svg)
 ![](https://img.shields.io/github/release/pandao/editor.md.svg)
 ![](https://img.shields.io/github/issues/pandao/editor.md.svg)
 ![](https://img.shields.io/bower/v/editor.md.svg)
 **Editor.md** : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
 ### Features
 - Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
 - Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting...;
 - Markdown Extras : Support [ToC (Table of Contents)](https://pandao.github.io/editor.md/examples/toc.html), [Emoji](https://pandao.github.io/editor.md/examples/emoji.html), [Task lists](https://pandao.github.io/editor.md/examples/task-lists.html), [@Links](https://pandao.github.io/editor.md/examples/@links.html)...;
 - Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
 - Support [decode & fliter of the HTML tags & attributes](https://pandao.github.io/editor.md/examples/html-tags-decode.html);
 - Support [TeX (LaTeX expressions, Based on KaTeX)](https://pandao.github.io/editor.md/examples/katex.html), [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) and [Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html) of Markdown extended syntax;
 - Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
 [README & Examples (English)](https://pandao.github.io/editor.md/en.html)
 --------
 **Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
 ![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
 #### 主要特性
 - 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可[变身为代码编辑器](https://pandao.github.io/editor.md/examples/change-mode.html)；
 - 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
 - 支持 [ToC（Table of Contents）](https://pandao.github.io/editor.md/examples/toc.html)、[Emoji表情](https://pandao.github.io/editor.md/examples/emoji.html)、[Task lists](https://pandao.github.io/editor.md/examples/task-lists.html)、[@链接](https://pandao.github.io/editor.md/examples/@links.html)等 Markdown 扩展语法；
 - 支持 TeX 科学公式（基于 [KaTeX](https://pandao.github.io/editor.md/examples/katex.html)）、流程图 [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) 和 [时序图 Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html);
 - 支持[识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析](https://pandao.github.io/editor.md/examples/html-tags-decode.html)，具有可靠的安全性和几乎无限的扩展性；
 - 支持 AMD / CMD 模块化加载（支持 [Require.js](https://pandao.github.io/editor.md/examples/use-requirejs.html) & [Sea.js](https://pandao.github.io/editor.md/examples/use-seajs.html)），并且支持[自定义扩展插件](https://pandao.github.io/editor.md/examples/define-plugin.html)；
 - 兼容主流的浏览器（IE8+）和 [Zepto.js](https://pandao.github.io/editor.md/examples/use-zepto.html)，且支持 iPad 等平板设备；
 #### Download & install
 Download:
 [Github download](https://github.com/pandao/editor.md/archive/master.zip)
 NPM install :
 ```bash
 npm install editor.md
 ```
 Bower install :
 ```bash
 bower install editor.md
 ```
 #### Usages
 ##### Create a Markdown editor
 ```html
 <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
 <div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
 </div>
 <script src="jquery.min.js"></script>
 <script src="editor.md/editormd.min.js"></script>
 <script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
 </script>
 ```
 If you using modular script loader:
 - [Using Require.js](https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html)
 - [Using Sea.js](https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html)
 ##### Markdown to HTML
 ```html
 <link rel="stylesheet" href="editormd/css/editormd.preview.css" />
 <div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>             
 </div>
 <script src="jquery.min.js"></script>
 <script src="editormd/editormd.js"></script>
 <script src="editormd/lib/marked.min.js"></script>
 <script src="editormd/lib/prettify.min.js"></script>
 <script type="text/javascript">
    $(function() {
 	    var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
 </script>    
 ```
 > See the full example: [http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html](http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html)
 ##### HTML to Markdown?
 Sorry, Editor.md not support HTML to Markdown parsing, Maybe In the future.
 #### Examples
 [https://pandao.github.io/editor.md/examples/index.html](https://pandao.github.io/editor.md/examples/index.html)
 #### Options
 Editor.md options and default values:
 ```javascript
 {
    mode                 : "gfm",          // gfm or markdown
    name                 : "",             // Form element name for post
    value                : "",             // value for CodeMirror, if mode not gfm/markdown
    theme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty
    editorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0
    previewTheme         : "",             // Preview area theme, default empty
    markdown             : "",             // Markdown source code
    appendMarkdown       : "",             // if in init textarea value not empty, append markdown to textarea
    width                : "100%",
    height               : "100%",
    path                 : "./lib/",       // Dependents module file directory
    pluginPath           : "",             // If this empty, default use settings.path + "../plugins/"
    delay                : 300,            // Delay parse markdown to html, Uint : ms
    autoLoadModules      : true,           // Automatic load dependent module files
    watch                : true,
    placeholder          : "Enjoy Markdown! coding now...",
    gotoLine             : true,           // Enable / disable goto a line
    codeFold             : false,
    autoHeight           : false,
    autoFocus            : true,           // Enable / disable auto focus editor left input area
    autoCloseTags        : true,
    searchReplace        : true,           // Enable / disable (CodeMirror) search and replace function
    syncScrolling        : true,           // options: true | false | "single", default true
    readOnly             : false,          // Enable / disable readonly mode
    tabSize              : 4,
    indentUnit           : 4,
    lineNumbers          : true,           // Display editor line numbers
    lineWrapping         : true,
    autoCloseBrackets    : true,
    showTrailingSpace    : true,
    matchBrackets        : true,
    indentWithTabs       : true,
    styleSelectedText    : true,
    matchWordHighlight   : true,           // options: true, false, "onselected"
    styleActiveLine      : true,           // Highlight the current line
    dialogLockScreen     : true,
    dialogShowMask       : true,
    dialogDraggable      : true,
    dialogMaskBgColor    : "#fff",
    dialogMaskOpacity    : 0.1,
    fontSize             : "13px",
    saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
    disabledKeyMaps      : [],
    onload               : function() {},
    onresize             : function() {},
    onchange             : function() {},
    onwatch              : null,
    onunwatch            : null,
    onpreviewing         : function() {},
    onpreviewed          : function() {},
    onfullscreen         : function() {},
    onfullscreenExit     : function() {},
    onscroll             : function() {},
    onpreviewscroll      : function() {},
    imageUpload          : false,          // Enable/disable upload
    imageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL       : "",             // Upload url
    imageUploadFields    : "",             // append upload form fields for CRSF etc. Server-side receives the POST parameters. v1.5.1+
    imageUploadCallback  : function() {},  // set image upload finish (success or failure) callback handler v1.5.1+
    imageUploadCallbackName : '__Editor_md_ImageUploadCallback', // upload callback name for cross-domain upload v1.5.1+
    crossDomainUpload    : false,          // Enable/disable Cross-domain upload
    uploadCallbackURL    : "",             // Cross-domain upload callback url
    toc                  : true,           // Table of contents
    tocm                 : false,          // Using [TOCM], auto create ToC dropdown menu
    tocTitle             : "",             // for ToC dropdown menu button
    tocDropdown          : false,          // Enable/disable Table Of Contents dropdown menu
    tocContainer         : "",             // Custom Table Of Contents Container Selector
    tocStartLevel        : 1,              // Said from H1 to create ToC
    htmlDecode           : false,          // Open the HTML tag identification 
    pageBreak            : true,           // Enable parse page break [========]
    atLink               : true,           // for @link
    emailLink            : true,           // for email address auto link
    taskList             : false,          // Enable Github Flavored Markdown task lists
    emoji                : false,          // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
                                           // Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
                                           // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
    tex                  : false,          // TeX(LaTeX), based on KaTeX
    flowChart            : false,          // flowChart.js only support IE9+
    sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+
    previewCodeHighlight : true,           // Enable / disable code highlight of editor preview area
    toolbar              : true,           // show or hide toolbar
    toolbarAutoFixed     : true,           // on window scroll auto fixed position
    toolbarIcons         : "full",         // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
    toolbarTitles        : {},
    toolbarHandlers      : {
        ucwords : function() {
            return editormd.toolbarHandlers.ucwords;
        },
        lowercase : function() {
            return editormd.toolbarHandlers.lowercase;
        }
    },
    toolbarCustomIcons   : {               // using html tag create toolbar icon, unused default <a> tag.
        lowercase        : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
        "ucwords"        : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
    },
    toolbarIconTexts     : {},
    lang : {  // Language data, you can custom your language.
        name        : "zh-cn",
        description : "开源在线Markdown编辑器<br/>Open source online Markdown editor.",
        tocTitle    : "目录",
        toolbar     : {
            //...
        },
        button: {
            //...
        },
        dialog : {
            //...
        }
        //...
    }
 }
 ```
 #### Dependents
 - [CodeMirror](http://codemirror.net/ "CodeMirror")
 - [marked](https://github.com/markedjs/marked "marked")
 - [jQuery](http://jquery.com/ "jQuery")
 - [FontAwesome](http://fontawesome.io/ "FontAwesome")
 - [github-markdown.css](https://github.com/sindresorhus/github-markdown-css "github-markdown.css")
 - [KaTeX](http://khan.github.io/KaTeX/ "KaTeX")
 - [prettify.js](http://code.google.com/p/google-code-prettify/ "prettify.js")
 - [Rephael.js](http://raphaeljs.com/ "Rephael.js")
 - [flowchart.js](http://adrai.github.io/flowchart.js/ "flowchart.js")
 - [sequence-diagram.js](http://bramp.github.io/js-sequence-diagrams/ "sequence-diagram.js")
 - [Prefixes.scss](https://github.com/pandao/prefixes.scss "Prefixes.scss")
 #### Changes
 [Change logs](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
 #### License
 The MIT License.
 Copyright (c) 2015-2019 Pandao
 # Editor.md
 ![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
 ![](https://img.shields.io/github/stars/pandao/editor.md.svg)
 ![](https://img.shields.io/github/forks/pandao/editor.md.svg)
 ![](https://img.shields.io/github/tag/pandao/editor.md.svg)
 ![](https://img.shields.io/github/release/pandao/editor.md.svg)
 ![](https://img.shields.io/github/issues/pandao/editor.md.svg)
 ![](https://img.shields.io/bower/v/editor.md.svg)
 **Editor.md** : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
 ### Features
 - Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
 - Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting...;
 - Markdown Extras : Support [ToC (Table of Contents)](https://pandao.github.io/editor.md/examples/toc.html), [Emoji](https://pandao.github.io/editor.md/examples/emoji.html), [Task lists](https://pandao.github.io/editor.md/examples/task-lists.html), [@Links](https://pandao.github.io/editor.md/examples/@links.html)...;
 - Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
 - Support [decode & fliter of the HTML tags & attributes](https://pandao.github.io/editor.md/examples/html-tags-decode.html);
 - Support [TeX (LaTeX expressions, Based on KaTeX)](https://pandao.github.io/editor.md/examples/katex.html), [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) and [Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html) of Markdown extended syntax;
 - Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
 [README & Examples (English)](https://pandao.github.io/editor.md/en.html)
 --------
 **Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
 ![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
 #### 主要特性
 - 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法，也可[变身为代码编辑器](https://pandao.github.io/editor.md/examples/change-mode.html)；
 - 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
 - 支持 [ToC（Table of Contents）](https://pandao.github.io/editor.md/examples/toc.html)、[Emoji表情](https://pandao.github.io/editor.md/examples/emoji.html)、[Task lists](https://pandao.github.io/editor.md/examples/task-lists.html)、[@链接](https://pandao.github.io/editor.md/examples/@links.html)等 Markdown 扩展语法；
 - 支持 TeX 科学公式（基于 [KaTeX](https://pandao.github.io/editor.md/examples/katex.html)）、流程图 [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) 和 [时序图 Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html);
 - 支持[识别和解析 HTML 标签，并且支持自定义过滤标签及属性解析](https://pandao.github.io/editor.md/examples/html-tags-decode.html)，具有可靠的安全性和几乎无限的扩展性；
 - 支持 AMD / CMD 模块化加载（支持 [Require.js](https://pandao.github.io/editor.md/examples/use-requirejs.html) & [Sea.js](https://pandao.github.io/editor.md/examples/use-seajs.html)），并且支持[自定义扩展插件](https://pandao.github.io/editor.md/examples/define-plugin.html)；
 - 兼容主流的浏览器（IE8+）和 [Zepto.js](https://pandao.github.io/editor.md/examples/use-zepto.html)，且支持 iPad 等平板设备；
 #### Download & install
 Download:
 [Github download](https://github.com/pandao/editor.md/archive/master.zip)
 NPM install :
 ```bash
 npm install editor.md
 ```
 Bower install :
 ```bash
 bower install editor.md
 ```
 #### Usages
 ##### Create a Markdown editor
 ```html
 <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
 <div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
 </div>
 <script src="jquery.min.js"></script>
 <script src="editor.md/editormd.min.js"></script>
 <script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
 </script>
 ```
 If you using modular script loader:
 - [Using Require.js](https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html)
 - [Using Sea.js](https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html)
 ##### Markdown to HTML
 ```html
 <link rel="stylesheet" href="editormd/css/editormd.preview.css" />
 <div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>
 </div>
 <script src="jquery.min.js"></script>
 <script src="editormd/editormd.js"></script>
 <script src="editormd/lib/marked.min.js"></script>
 <script src="editormd/lib/prettify.min.js"></script>
 <script type="text/javascript">
    $(function() {
 	    var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
 </script>
 ```
 > See the full example: [http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html](http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html)
 ##### HTML to Markdown?
 Sorry, Editor.md not support HTML to Markdown parsing, Maybe In the future.
 #### Examples
 [https://pandao.github.io/editor.md/examples/index.html](https://pandao.github.io/editor.md/examples/index.html)
 #### Options
 Editor.md options and default values:
 ```javascript
 {
    mode                 : "gfm",          // gfm or markdown
    name                 : "",             // Form element name for post
    value                : "",             // value for CodeMirror, if mode not gfm/markdown
    theme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty
    editorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0
    previewTheme         : "",             // Preview area theme, default empty
    markdown             : "",             // Markdown source code
    appendMarkdown       : "",             // if in init textarea value not empty, append markdown to textarea
    width                : "100%",
    height               : "100%",
    path                 : "./lib/",       // Dependents module file directory
    pluginPath           : "",             // If this empty, default use settings.path + "../plugins/"
    delay                : 300,            // Delay parse markdown to html, Uint : ms
    autoLoadModules      : true,           // Automatic load dependent module files
    watch                : true,
    placeholder          : "Enjoy Markdown! coding now...",
    gotoLine             : true,           // Enable / disable goto a line
    codeFold             : false,
    autoHeight           : false,
    autoFocus            : true,           // Enable / disable auto focus editor left input area
    autoCloseTags        : true,
    searchReplace        : true,           // Enable / disable (CodeMirror) search and replace function
    syncScrolling        : true,           // options: true | false | "single", default true
    readOnly             : false,          // Enable / disable readonly mode
    tabSize              : 4,
    indentUnit           : 4,
    lineNumbers          : true,           // Display editor line numbers
    lineWrapping         : true,
    autoCloseBrackets    : true,
    showTrailingSpace    : true,
    matchBrackets        : true,
    indentWithTabs       : true,
    styleSelectedText    : true,
    matchWordHighlight   : true,           // options: true, false, "onselected"
    styleActiveLine      : true,           // Highlight the current line
    dialogLockScreen     : true,
    dialogShowMask       : true,
    dialogDraggable      : true,
    dialogMaskBgColor    : "#fff",
    dialogMaskOpacity    : 0.1,
    fontSize             : "13px",
    saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
    disabledKeyMaps      : [],
    onload               : function() {},
    onresize             : function() {},
    onchange             : function() {},
    onwatch              : null,
    onunwatch            : null,
    onpreviewing         : function() {},
    onpreviewed          : function() {},
    onfullscreen         : function() {},
    onfullscreenExit     : function() {},
    onscroll             : function() {},
    onpreviewscroll      : function() {},
    imageUpload          : false,          // Enable/disable upload
    imageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL       : "",             // Upload url
    imageUploadFields    : "",             // append upload form fields for CRSF etc. Server-side receives the POST parameters. v1.5.1+
    imageUploadCallback  : function() {},  // set image upload finish (success or failure) callback handler v1.5.1+
    imageUploadCallbackName : '__Editor_md_ImageUploadCallback', // upload callback name for cross-domain upload v1.5.1+
    crossDomainUpload    : false,          // Enable/disable Cross-domain upload
    uploadCallbackURL    : "",             // Cross-domain upload callback url
    toc                  : true,           // Table of contents
    tocm                 : false,          // Using [TOCM], auto create ToC dropdown menu
    tocTitle             : "",             // for ToC dropdown menu button
    tocDropdown          : false,          // Enable/disable Table Of Contents dropdown menu
    tocContainer         : "",             // Custom Table Of Contents Container Selector
    tocStartLevel        : 1,              // Said from H1 to create ToC
    htmlDecode           : false,          // Open the HTML tag identification, If set String value expression : tagName,tagName,...|attrName,attrName,...
    pageBreak            : true,           // Enable parse page break [========]
    atLink               : true,           // for @link
    emailLink            : true,           // for email address auto link
    taskList             : false,          // Enable Github Flavored Markdown task lists
    emoji                : false,          // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
                                           // Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
                                           // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
    tex                  : false,          // TeX(LaTeX), based on KaTeX
    flowChart            : false,          // flowChart.js only support IE9+
    sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+
    previewCodeHighlight : true,           // Enable / disable code highlight of editor preview area
    toolbar              : true,           // show or hide toolbar
    toolbarAutoFixed     : true,           // on window scroll auto fixed position
    toolbarIcons         : "full",         // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
    toolbarTitles        : {},
    toolbarHandlers      : {
        ucwords : function() {
            return editormd.toolbarHandlers.ucwords;
        },
        lowercase : function() {
            return editormd.toolbarHandlers.lowercase;
        }
    },
    toolbarCustomIcons   : {               // using html tag create toolbar icon, unused default <a> tag.
        lowercase        : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
        "ucwords"        : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
    },
    toolbarIconTexts     : {},
    lang : {  // Language data, you can custom your language.
        name        : "zh-cn",
        description : "开源在线Markdown编辑器<br/>Open source online Markdown editor.",
        tocTitle    : "目录",
        toolbar     : {
            //...
        },
        button: {
            //...
        },
        dialog : {
            //...
        }
        //...
    }
 }
 ```
 #### Dependents
 - [CodeMirror](http://codemirror.net/ "CodeMirror")
 - [marked](https://github.com/markedjs/marked "marked")
 - [jQuery](http://jquery.com/ "jQuery")
 - [FontAwesome](http://fontawesome.io/ "FontAwesome")
 - [github-markdown.css](https://github.com/sindresorhus/github-markdown-css "github-markdown.css")
 - [KaTeX](http://khan.github.io/KaTeX/ "KaTeX")
 - [prettify.js](http://code.google.com/p/google-code-prettify/ "prettify.js")
 - [Rephael.js](http://raphaeljs.com/ "Rephael.js")
 - [flowchart.js](http://adrai.github.io/flowchart.js/ "flowchart.js")
 - [sequence-diagram.js](http://bramp.github.io/js-sequence-diagrams/ "sequence-diagram.js")
 - [Prefixes.scss](https://github.com/pandao/prefixes.scss "Prefixes.scss")
 #### Changes
 [Change logs](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
 #### License
 The MIT License.
 Copyright (c) 2015-2019 Pandao
--- a/editormd.amd.js
+++ b/editormd.amd.js
@ -222,7 +222,7 @@
        tocDropdown          : false,
        tocContainer         : "",
        tocStartLevel        : 1,              // Said from H1 to create ToC
        htmlDecode           : false,          // Open the HTML tag identification
        htmlDecode           : false,          // Open the HTML tag identification, If set String value expression : tagName,tagName,...|attrName,attrName,...
        pageBreak            : true,           // Enable parse page break [========]
        atLink               : true,           // for @link
        emailLink            : true,           // for email address auto link
@ -1996,7 +1996,7 @@
                        tocMenu.remove();
                    }
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
                    if (settings.tocDropdown || tocContainer.find("." + this.classPrefix + "toc-menu").length > 0) {
                        editormd.tocDropdownMenu(tocContainer, (settings.tocTitle !== "") ? settings.tocTitle : this.lang.tocTitle);
@ -3459,6 +3459,10 @@
            var headingHTML = "<h" + level + " id=\"h"+ level + "-" + this.options.headerPrefix + id +"\">";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            text = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            headingHTML    += "<a name=\"" + text + "\" class=\"reference-link\"></a>";
            headingHTML    += "<span class=\"header-link octicon octicon-link\"></span>";
            headingHTML    += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
@ -3537,10 +3541,12 @@
     * @param   {Array}    toc             从marked获取的TOC数组列表
     * @param   {Element}  container       插入TOC的容器元素
     * @param   {Integer}  startLevel      Hx 起始层级
     * @param   {object}   markedRenderer  Marked Renderer
     * @returns {Object}   tocContainer    返回ToC列表容器层的jQuery对象元素
     */
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel) {
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel, markedRenderer) {
        markedRenderer = markedRenderer || null;
        var html        = "";
        var lastLevel   = 0;
@ -3564,7 +3570,15 @@
                html += "</ul></li>";
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            var href = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            if (markedRenderer) {
                text = markedRenderer.emoji(text); // Fixed Heading can't has emoji code
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + href + "\" level=\"" + level + "\">" + text + "</a><ul>";
            lastLevel = level;
        }
@ -3682,7 +3696,7 @@
        }
        if (typeof attrs !== "undefined") {
            var htmlTagRegex = /\<(\w+)\s*([^\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            var htmlTagRegex = /\<(\w+)\s*([^\/\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            if (attrs === "*") {
                html = html.replace(htmlTagRegex, function($1, $2, $3, $4, $5) {
@ -3697,6 +3711,11 @@
                    $.each(_attrs, function(i, e) {
                        if (e.nodeName !== "\"") {
                            $attrs[e.nodeName] = e.nodeValue;
                            // Fixed like <a href="javascript:alert('xss')"></a> XSS problem, Copy from pull request #532
                            if (e.nodeName === "href" && e.nodeValue.toLowerCase().indexOf("javascript:") >= 0) {
                                $attrs[e.nodeName] = "javascript:;";
                            }
                        }
                    });
@ -3828,7 +3847,7 @@
        }
        if (settings.toc) {
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
            if (settings.tocDropdown || div.find("." + this.classPrefix + "toc-menu").length > 0) {
                this.tocDropdownMenu(div, settings.tocTitle);
--- a/editormd.amd.min.js
+++ b/editormd.amd.min.js
--- a/editormd.js
+++ b/editormd.js
@ -152,7 +152,7 @@
        tocDropdown          : false,
        tocContainer         : "",
        tocStartLevel        : 1,              // Said from H1 to create ToC
        htmlDecode           : false,          // Open the HTML tag identification
        htmlDecode           : false,          // Open the HTML tag identification, If set String value expression : tagName,tagName,...|attrName,attrName,...
        pageBreak            : true,           // Enable parse page break [========]
        atLink               : true,           // for @link
        emailLink            : true,           // for email address auto link
@ -1926,7 +1926,7 @@
                        tocMenu.remove();
                    }
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
                    if (settings.tocDropdown || tocContainer.find("." + this.classPrefix + "toc-menu").length > 0) {
                        editormd.tocDropdownMenu(tocContainer, (settings.tocTitle !== "") ? settings.tocTitle : this.lang.tocTitle);
@ -3389,6 +3389,10 @@
            var headingHTML = "<h" + level + " id=\"h"+ level + "-" + this.options.headerPrefix + id +"\">";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            text = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            headingHTML    += "<a name=\"" + text + "\" class=\"reference-link\"></a>";
            headingHTML    += "<span class=\"header-link octicon octicon-link\"></span>";
            headingHTML    += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
@ -3467,10 +3471,12 @@
     * @param   {Array}    toc             从marked获取的TOC数组列表
     * @param   {Element}  container       插入TOC的容器元素
     * @param   {Integer}  startLevel      Hx 起始层级
     * @param   {object}   markedRenderer  Marked Renderer
     * @returns {Object}   tocContainer    返回ToC列表容器层的jQuery对象元素
     */
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel) {
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel, markedRenderer) {
        markedRenderer = markedRenderer || null;
        var html        = "";
        var lastLevel   = 0;
@ -3494,7 +3500,15 @@
                html += "</ul></li>";
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            var href = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            if (markedRenderer) {
                text = markedRenderer.emoji(text); // Fixed Heading can't has emoji code
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + href + "\" level=\"" + level + "\">" + text + "</a><ul>";
            lastLevel = level;
        }
@ -3612,7 +3626,7 @@
        }
        if (typeof attrs !== "undefined") {
            var htmlTagRegex = /\<(\w+)\s*([^\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            var htmlTagRegex = /\<(\w+)\s*([^\/\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            if (attrs === "*") {
                html = html.replace(htmlTagRegex, function($1, $2, $3, $4, $5) {
@ -3627,6 +3641,11 @@
                    $.each(_attrs, function(i, e) {
                        if (e.nodeName !== "\"") {
                            $attrs[e.nodeName] = e.nodeValue;
                            // Fixed like <a href="javascript:alert('xss')"></a> XSS problem, Copy from pull request #532
                            if (e.nodeName === "href" && e.nodeValue.toLowerCase().indexOf("javascript:") >= 0) {
                                $attrs[e.nodeName] = "javascript:;";
                            }
                        }
                    });
@ -3758,7 +3777,7 @@
        }
        if (settings.toc) {
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
            if (settings.tocDropdown || div.find("." + this.classPrefix + "toc-menu").length > 0) {
                this.tocDropdownMenu(div, settings.tocTitle);
--- a/editormd.min.js
+++ b/editormd.min.js
--- a/examples/html-preview-markdown-to-html.html
+++ b/examples/html-preview-markdown-to-html.html
@ -1,142 +1,142 @@
 <!DOCTYPE html>
 <html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>HTML Preview(markdown to html) - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.preview.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <style>            
            .editormd-html-preview {
                width: 90%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Markdown转HTML的显示处理</h1> 
                <p>即：非编辑情况下的HTML预览</p>
                <p>HTML Preview(markdown to html)</p>       
            </header>
            <div class="btns">
                <button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button>
            </div>
            <div id="test-editormd-view">
               <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
            </div>
            <div id="test-editormd-view2">
                <textarea id="append-test" style="display:none;">
 ### 科学公式 TeX(KaTeX)
 $$E=mc^2$$
 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
 $$\(\sqrt{3x-1}+(1+x)^2\)$$
 $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
 $$X^2 > Y$$
 ##### 上标和下标
 上标：X&lt;sup&gt;2&lt;/sup&gt;
 下标：O&lt;sub&gt;2&lt;/sub&gt;
 ##### 代码块里包含的过滤标签及属性不会被过滤
 ```html
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;
 ```
 ##### Style
 &lt;style&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 ##### Script
 &lt;script&gt;
 alert("script");
 &lt;/script&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;</textarea>          
            </div>
        </div>
        <!-- <script src="js/zepto.min.js"></script>
 		<script>		
 			var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
 		</script> -->
        <script src="js/jquery.min.js"></script>
        <script src="../lib/marked.min.js"></script>
        <script src="../lib/prettify.min.js"></script>
        <script src="../lib/raphael.min.js"></script>
        <script src="../lib/underscore.min.js"></script>
        <script src="../lib/sequence-diagram.min.js"></script>
        <script src="../lib/flowchart.min.js"></script>
        <script src="../lib/jquery.flowchart.min.js"></script>
        <script src="../editormd.js"></script>
        <script type="text/javascript">
            $(function() {
                var testEditormdView, testEditormdView2;
                $.get("test.md", function(markdown) {
 				    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                        markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
                        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                        //toc             : false,
                        tocm            : true,    // Using [TOCM]
                        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                        //gfm             : false,
                        //tocDropdown     : true,
                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                        emoji           : true,
                        taskList        : true,
                        tex             : true,  // 默认不解析
                        flowChart       : true,  // 默认不解析
                        sequenceDiagram : true,  // 默认不解析
                    });
                    //console.log("返回一个 jQuery 实例 =>", testEditormdView);
                    // 获取Markdown源码
                    //console.log(testEditormdView.getMarkdown());
                    //alert(testEditormdView.getMarkdown());
                });
                testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默认不解析
                    flowChart       : true,  // 默认不解析
                    sequenceDiagram : true,  // 默认不解析
                });
            });
        </script>
    </body>
 </html>
 <!DOCTYPE html>
 <html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>HTML Preview(markdown to html) - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.preview.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
        <style>
            .editormd-html-preview {
                width: 90%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>Markdown转HTML的显示处理</h1>
                <p>即：非编辑情况下的HTML预览</p>
                <p>HTML Preview(markdown to html)</p>
            </header>
            <div class="btns">
                <button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button>
            </div>
            <div id="test-editormd-view">
               <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
            </div>
            <div id="test-editormd-view2">
                <textarea id="append-test" style="display:none;">
 ### 科学公式 TeX(KaTeX)
 $$E=mc^2$$
 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
 $$\(\sqrt{3x-1}+(1+x)^2\)$$
 $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
 $$X^2 > Y$$
 ##### 上标和下标
 上标：X&lt;sup&gt;2&lt;/sup&gt;
 下标：O&lt;sub&gt;2&lt;/sub&gt;
 ##### 代码块里包含的过滤标签及属性不会被过滤
 ```html
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;
 ```
 ##### Style
 &lt;style&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 ##### Script
 &lt;script&gt;
 alert("script");
 &lt;/script&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;</textarea>
            </div>
        </div>
        <!-- <script src="js/zepto.min.js"></script>
 		<script>
 			var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
 		</script> -->
        <script src="js/jquery.min.js"></script>
        <script src="../lib/marked.min.js"></script>
        <script src="../lib/prettify.min.js"></script>
        <script src="../lib/raphael.min.js"></script>
        <script src="../lib/underscore.min.js"></script>
        <script src="../lib/sequence-diagram.min.js"></script>
        <script src="../lib/flowchart.min.js"></script>
        <script src="../lib/jquery.flowchart.min.js"></script>
        <script src="../editormd.js"></script>
        <script type="text/javascript">
            $(function() {
                var testEditormdView, testEditormdView2;
                $.get("test.md", function(markdown) {
 				    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                        markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
                        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                        //toc             : false,
                        tocm            : true,    // Using [TOCM]
                        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                        //gfm             : false,
                        //tocDropdown     : true,
                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                        emoji           : true,
                        taskList        : true,
                        tex             : true,  // 默认不解析
                        flowChart       : true,  // 默认不解析
                        sequenceDiagram : true,  // 默认不解析
                    });
                    //console.log("返回一个 jQuery 实例 =>", testEditormdView);
                    // 获取Markdown源码
                    //console.log(testEditormdView.getMarkdown());
                    //alert(testEditormdView.getMarkdown());
                });
                testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                    emoji           : true,
                    taskList        : true,
                    tex             : true,  // 默认不解析
                    flowChart       : true,  // 默认不解析
                    sequenceDiagram : true,  // 默认不解析
                });
            });
        </script>
    </body>
 </html>
--- a/examples/html-tags-decode.html
+++ b/examples/html-tags-decode.html
@ -1,119 +1,136 @@
 <!DOCTYPE html>
 <html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>识别和解析 HTML 标签 - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>识别和解析HTML标签</h1>
                <p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p>
                <p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p>
                <p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p>
            </header>
            <div class="btns">
                <button class="filter-btn" exp="true">Unfilter</button>
                <button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button>
                <button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button>
                <button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button>
            </div>
            <div id="test-editormd">
                <textarea style="display:none;">#### 开启识别和解析 HTML 标签
 配置项：
    {
        htmlDecode : true // Decode all html tags & attributes
        // Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
        htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
        //htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes
        //htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
    }
 #### 示例
 ##### 上标和下标
 上标：X&lt;sup&gt;2&lt;/sup&gt;
 下标：O&lt;sub&gt;2&lt;/sub&gt;
 ##### 代码块里包含的过滤标签及属性不会被过滤
 ```html
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;
 ```
 ##### Style
 &lt;style&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 ##### Script
 &lt;script&gt;
 alert("script");
 &lt;/script&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 ##### Events
 &lt;div style="color:green;" onclick="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&gt;
 &lt;div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&gt;
 ##### 插入Flash
 &lt;embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;
 ##### 插入视频
 李健《最好不相见》
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;</textarea>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="../editormd.js"></script>
        <script type="text/javascript">
            var testEditor;
            $(function() {
                testEditor = editormd("test-editormd", {
                    width: "90%",
                    height: 720,
                    path : '../lib/',
                    htmlDecode : true,   // Decode all html tags & attributes
                    // Expression : tagName,tagName,...|attrName,attrName,...
                    //htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
                    //htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes
                    //htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
                });
                $(".filter-btn").click(function(){
                    testEditor.config("htmlDecode", $(this).attr("exp"));
                });
            });
        </script>
    </body>
 </html>
 <!DOCTYPE html>
 <html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>识别和解析 HTML 标签 - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>识别和解析HTML标签</h1>
                <p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p>
                <p>注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。</p>
                <p>Update: 可以通过设置 `settings.htmlDecode = "style,script,iframe|on*"`来实现过滤指定标签及属性的解析，提高安全性；</p>
            </header>
            <div class="btns">
                <button class="filter-btn" exp="true">Unfilter</button>
                <button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button>
                <button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button>
                <button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button>
            </div>
            <div id="test-editormd">
                <textarea style="display:none;">[TOC]
 #### 开启识别和解析 HTML 标签
 配置项：
    {
        htmlDecode : true // Decode all html tags & attributes
        // Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
        htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
        //htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes
        //htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
    }
 #### 示例
 ##### 上标和下标
 上标：X&lt;sup&gt;2&lt;/sup&gt;
 下标：O&lt;sub&gt;2&lt;/sub&gt;
 ##### 代码块里包含的过滤标签及属性不会被过滤
 ```html
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;
 ```
 #### **Strong text** Test
 ##### Image
 &lt;img src="http://editor.md.ipandao.com/images/logos/editormd-logo-64x64.png"/&gt;
 &lt;a href="https://github.com/pandao/editor.md"&gt;&lt;img src="http://editor.md.ipandao.com/images/logos/editormd-logo-64x64.png"/&gt;&lt/a&gt;
 [![](http://editor.md.ipandao.com/images/logos/editormd-logo-64x64.png)](https://github.com/pandao/editor.md)
 :sweat_smile: :blush: :smiley: :relaxed: :smile: [:laughing:](https://github.com/pandao/editor.md)
 ##### Style :sweat_smile:
 &lt;style&gt;
 body{background:red;}
 &lt;/style&gt;
 &lt;style type="text/style"&gt;
 body{background:red;}
 &lt;/style&gt;
 ##### Script
 &lt;script&gt;
 alert("script");
 &lt;/script&gt;
 &lt;script type="text/javscript"&gt;
 alert("script");
 &lt;/script&gt;
 &lt;a href="javascript:alert('xss')"&gt;a javascript:alert("xss")&lt;/a&gt;
 ##### Events
 &lt;div style="color:green;" onclick="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&gt;
 &lt;div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&gt;
 ##### 插入Flash
 &lt;embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;
 ##### 插入视频
 李健《最好不相见》
 &lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;</textarea>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="../editormd.js"></script>
        <script type="text/javascript">
            var testEditor;
            $(function() {
                testEditor = editormd("test-editormd", {
                    width: "90%",
                    height: 720,
                    path : '../lib/',
                    emoji: true,
                    htmlDecode : true,   // Decode all html tags & attributes
                    // Expression : tagName,tagName,...|attrName,attrName,...
                    htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
                    // htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes, TOC not parsing
                    //htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
                });
                $(".filter-btn").click(function(){
                    testEditor.config("htmlDecode", $(this).attr("exp"));
                });
            });
        </script>
    </body>
 </html>
--- a/examples/test.md
+++ b/examples/test.md
@ -1,365 +1,367 @@
 # Editor.md
 ![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
 ![](https://img.shields.io/github/stars/pandao/editor.md.svg) ![](https://img.shields.io/github/forks/pandao/editor.md.svg) ![](https://img.shields.io/github/tag/pandao/editor.md.svg) ![](https://img.shields.io/github/release/pandao/editor.md.svg) ![](https://img.shields.io/github/issues/pandao/editor.md.svg) ![](https://img.shields.io/bower/v/editor.md.svg)
 **目录 (Table of Contents)**
 [TOCM]
 [TOC]
 # Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
 ##### Heading 5
 ###### Heading 6
 # Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 #### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 #### 标题（用底线的形式）Heading (underline)
 This is an H1
 =============
 This is an H2
 -------------
 ### 字符效果和横线等
 ----
 ~~删除线~~ <s>删除线（开启识别HTML标签时）</s>
 *斜体字*      _斜体字_
 **粗体**  __粗体__
 ***粗斜体*** ___粗斜体___
 上标：X<sub>2</sub>，下标：O<sup>2</sup>
 **缩写(同HTML的abbr标签)**
 > 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
 The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
 ### 引用 Blockquotes
 > 引用文本 Blockquotes
 引用的行内混合 Blockquotes
 > 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。
 ### 锚点与链接 Links
 [普通链接](http://localhost/)
 [普通链接带标题](http://localhost/ "普通链接带标题")
 直接链接：<https://github.com>
 [锚点链接][anchor-id] 
 [anchor-id]: http://www.this-anchor-link.com/
 [mailto:test.test@gmail.com](mailto:test.test@gmail.com)
 GFM a-tail link @pandao  邮箱地址自动链接 test.test@gmail.com  www@vip.qq.com
 > @pandao
 ### 多语言代码高亮 Codes
 #### 行内代码 Inline code
 执行命令：`npm install marked`
 #### 缩进风格
 即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。
    <?php
        echo "Hello world!";
    ?>
 预格式化文本：
    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |
 #### JS代码
 ```javascript
 function test() {
 	console.log("Hello world!");
 }
 (function(){
    var box = function() {
        return box.fn.init();
    };
    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');
 			return this;
        },
 		add : function(str) {
 			alert("add", str);
 			return this;
 		},
 		remove : function(str) {
 			alert("remove", str);
 			return this;
 		}
    };
    box.fn.init.prototype = box.fn;
    window.box =box;
 })();
 var testBox = box();
 testBox.add("jQuery").remove("jQuery");
 ```
 #### HTML 代码 HTML codes
 ```html
 <!DOCTYPE html>
 <html>
    <head>
        <mate charest="utf-8" />
        <meta name="keywords" content="Editor.md, Markdown, Editor" />
        <title>Hello world!</title>
        <style type="text/css">
            body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
            ul{list-style: none;}
            img{border:none;vertical-align: middle;}
        </style>
    </head>
    <body>
        <h1 class="text-xxl">Hello world!</h1>
        <p class="text-green">Plain text</p>
    </body>
 </html>
 ```
 ### 图片 Images
 Image:
 ![](https://pandao.github.io/editor.md/examples/images/4.jpg)
 > Follow your heart.
 ![](https://pandao.github.io/editor.md/examples/images/8.jpg)
 > 图为：厦门白城沙滩
 图片加链接 (Image + Link)：
 [![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面")
 > 图为：李健首张专辑《似水流年》封面
 ----
 ### 列表 Lists
 #### 无序列表（减号）Unordered Lists (-)
 - 列表一
 - 列表二
 - 列表三
 #### 无序列表（星号）Unordered Lists (*)
 * 列表一
 * 列表二
 * 列表三
 #### 无序列表（加号和嵌套）Unordered Lists (+)
 + 列表一
 + 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
 + 列表三
    * 列表一
    * 列表二
    * 列表三
 #### 有序列表 Ordered Lists (-)
 1. 第一行
 2. 第二行
 3. 第三行
 #### GFM task list
 - [x] GFM task list 1
 - [x] GFM task list 2
 - [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
 - [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2
 ----
 ### 绘制表格 Tables
 | 项目        | 价格   |  数量  |
 | --------   | -----:  | :----:  |
 | 计算机      | $1600   |   5     |
 | 手机        |   $12   |   12   |
 | 管线        |    $1    |  234  |
 First Header  | Second Header
 ------------- | -------------
 Content Cell  | Content Cell
 Content Cell  | Content Cell 
 | First Header  | Second Header |
 | ------------- | ------------- |
 | Content Cell  | Content Cell  |
 | Content Cell  | Content Cell  |
 | Function name | Description                    |
 | ------------- | ------------------------------ |
 | `help()`      | Display the help window.       |
 | `destroy()`   | **Destroy your computer!**     |
 | Left-Aligned  | Center Aligned  | Right Aligned |
 | :------------ |:---------------:| -----:|
 | col 3 is      | some wordy text | $1600 |
 | col 2 is      | centered        |   $12 |
 | zebra stripes | are neat        |    $1 |
 | Item      | Value |
 | --------- | -----:|
 | Computer  | $1600 |
 | Phone     |   $12 |
 | Pipe      |    $1 |
 ----
 #### 特殊符号 HTML Entities Codes
 &copy; &  &uml; &trade; &iexcl; &pound;
 &amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot; 
 X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;
 18&ordm;C  &quot;  &apos;
 [========]
 ### Emoji表情 :smiley:
 > Blockquotes :star:
 #### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
 - [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
 - [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
 - [x] [ ] :smiley: this is a complete item :smiley:;
 - [ ] []this is an incomplete item [test link](#) :fa-star: @pandao; 
 - [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
    - [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
    - [ ] :smiley: this is  :fa-star: :fa-gear: an incomplete item [test link](#);
 #### 反斜杠 Escape
 \*literal asterisks\*
 [========]
 ### 科学公式 TeX(KaTeX)
 $$E=mc^2$$
 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
 $$x > y$$
 $$\(\sqrt{3x-1}+(1+x)^2\)$$
 $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
 多行公式：
 ```math
 \displaystyle
 \left( \sum\_{k=1}^n a\_k b\_k \right)^2
 \leq
 \left( \sum\_{k=1}^n a\_k^2 \right)
 \left( \sum\_{k=1}^n b\_k^2 \right)
 ```
 ```katex
 \displaystyle 
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        } 
    }
 ```
 ```latex
 f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
 ```
 ### 分页符 Page break
 > Print Test: Ctrl + P
 [========]
 ### 绘制流程图 Flowchart
 ```flow
 st=>start: 用户登陆
 op=>operation: 登陆操作
 cond=>condition: 登陆成功 Yes or No?
 e=>end: 进入后台
 st->op->cond
 cond(yes)->e
 cond(no)->op
 ```
 [========]
 ### 绘制序列图 Sequence Diagram
 ```seq
 Andrew->China: Says Hello 
 Note right of China: China thinks\nabout it 
 China-->Andrew: How are you? 
 Andrew->>China: I am good thanks!
 ```
 ### End
 # Editor.md
 ![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
 ![](https://img.shields.io/github/stars/pandao/editor.md.svg) ![](https://img.shields.io/github/forks/pandao/editor.md.svg) ![](https://img.shields.io/github/tag/pandao/editor.md.svg) ![](https://img.shields.io/github/release/pandao/editor.md.svg) ![](https://img.shields.io/github/issues/pandao/editor.md.svg) ![](https://img.shields.io/bower/v/editor.md.svg)
 **目录 (Table of Contents)**
 [TOCM]
 [TOC]
 # Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
 ##### Heading 5
 ###### Heading 6
 # Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 #### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 ###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
 #### 标题（用底线的形式）Heading (underline)
 This is an H1
 =============
 This is an H2
 -------------
 ### 字符效果和横线等
 ----
 ~~删除线~~ <s>删除线（开启识别HTML标签时）</s>
 *斜体字*      _斜体字_
 **粗体**  __粗体__
 ***粗斜体*** ___粗斜体___
 上标：X<sub>2</sub>，下标：O<sup>2</sup>
 **缩写(同HTML的abbr标签)**
 > 即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
 The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
 ### 引用 Blockquotes
 > 引用文本 Blockquotes
 引用的行内混合 Blockquotes
 > 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。
 ### 锚点与链接 Links
 [普通链接](http://localhost/)
 [普通链接带标题](http://localhost/ "普通链接带标题")
 直接链接：<https://github.com>
 [锚点链接][anchor-id]
 [anchor-id]: http://www.this-anchor-link.com/
 [mailto:test.test@gmail.com](mailto:test.test@gmail.com)
 GFM a-tail link @pandao  邮箱地址自动链接 test.test@gmail.com  www@vip.qq.com
 > @pandao
 ### 多语言代码高亮 Codes
 #### 行内代码 Inline code
 执行命令：`npm install marked`
 #### 缩进风格
 即缩进四个空格，也做为实现类似 `<pre>` 预格式化文本 ( Preformatted Text ) 的功能。
    <?php
        echo "Hello world!";
    ?>
 预格式化文本：
    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |
 #### JS代码
 ```javascript
 function test() {
 	console.log("Hello world!");
 }
 (function(){
    var box = function() {
        return box.fn.init();
    };
    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');
 			return this;
        },
 		add : function(str) {
 			alert("add", str);
 			return this;
 		},
 		remove : function(str) {
 			alert("remove", str);
 			return this;
 		}
    };
    box.fn.init.prototype = box.fn;
    window.box =box;
 })();
 var testBox = box();
 testBox.add("jQuery").remove("jQuery");
 ```
 #### HTML 代码 HTML codes
 ```html
 <!DOCTYPE html>
 <html>
    <head>
        <mate charest="utf-8" />
        <meta name="keywords" content="Editor.md, Markdown, Editor" />
        <title>Hello world!</title>
        <style type="text/css">
            body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
            ul{list-style: none;}
            img{border:none;vertical-align: middle;}
        </style>
    </head>
    <body>
        <h1 class="text-xxl">Hello world!</h1>
        <p class="text-green">Plain text</p>
    </body>
 </html>
 ```
 ### 图片 Images
 Image:
 ![](https://pandao.github.io/editor.md/examples/images/4.jpg)
 > Follow your heart.
 ![](https://pandao.github.io/editor.md/examples/images/8.jpg)
 > 图为：厦门白城沙滩
 图片加链接 (Image + Link)：
 [![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面")
 > 图为：李健首张专辑《似水流年》封面
 ----
 ### 列表 Lists
 #### 无序列表（减号）Unordered Lists (-)
 - 列表一
 - 列表二
 - 列表三
 #### 无序列表（星号）Unordered Lists (*)
 * 列表一
 * 列表二
 * 列表三
 #### 无序列表（加号和嵌套）Unordered Lists (+)
 + 列表一
 + 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
 + 列表三
    * 列表一
    * 列表二
    * 列表三
 #### 有序列表 Ordered Lists (-)
 1. 第一行
 2. 第二行
 3. 第三行
 #### GFM task list
 - [x] GFM task list 1
 - [x] GFM task list 2
 - [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
 - [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2
 ----
 ### 绘制表格 Tables
 | 项目        | 价格   |  数量  |
 | --------   | -----:  | :----:  |
 | 计算机      | $1600   |   5     |
 | 手机        |   $12   |   12   |
 | 管线        |    $1    |  234  |
 First Header  | Second Header
 ------------- | -------------
 Content Cell  | Content Cell
 Content Cell  | Content Cell
 | First Header  | Second Header |
 | ------------- | ------------- |
 | Content Cell  | Content Cell  |
 | Content Cell  | Content Cell  |
 | Function name | Description                    |
 | ------------- | ------------------------------ |
 | `help()`      | Display the help window.       |
 | `destroy()`   | **Destroy your computer!**     |
 | Left-Aligned  | Center Aligned  | Right Aligned |
 | :------------ |:---------------:| -----:|
 | col 3 is      | some wordy text | $1600 |
 | col 2 is      | centered        |   $12 |
 | zebra stripes | are neat        |    $1 |
 | Item      | Value |
 | --------- | -----:|
 | Computer  | $1600 |
 | Phone     |   $12 |
 | Pipe      |    $1 |
 ----
 #### 特殊符号 HTML Entities Codes
 &copy; &  &uml; &trade; &iexcl; &pound;
 &amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;
 X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;
 18&ordm;C  &quot;  &apos;
 #### **简要描述**
 [========]
 ### Emoji表情 :smiley:
 > Blockquotes :star:
 #### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-2x:
 - [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
 - [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
 - [x] [ ] :smiley: this is a complete item :smiley:;
 - [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
 - [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
    - [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
    - [ ] :smiley: this is  :fa-star: :fa-gear: an incomplete item [test link](#);
 #### 反斜杠 Escape
 \*literal asterisks\*
 [========]
 ### 科学公式 TeX(KaTeX)
 $$E=mc^2$$
 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
 $$x > y$$
 $$\(\sqrt{3x-1}+(1+x)^2\)$$
 $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
 多行公式：
 ```math
 \displaystyle
 \left( \sum\_{k=1}^n a\_k b\_k \right)^2
 \leq
 \left( \sum\_{k=1}^n a\_k^2 \right)
 \left( \sum\_{k=1}^n b\_k^2 \right)
 ```
 ```katex
 \displaystyle
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }
 ```
 ```latex
 f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
 ```
 ### 分页符 Page break
 > Print Test: Ctrl + P
 [========]
 ### 绘制流程图 Flowchart
 ```flow
 st=>start: 用户登陆
 op=>operation: 登陆操作
 cond=>condition: 登陆成功 Yes or No?
 e=>end: 进入后台
 st->op->cond
 cond(yes)->e
 cond(no)->op
 ```
 [========]
 ### 绘制序列图 Sequence Diagram
 ```seq
 Andrew->China: Says Hello
 Note right of China: China thinks\nabout it
 China-->Andrew: How are you?
 Andrew->>China: I am good thanks!
 ```
 ### End
--- a/lib/codemirror/modes.min.js
+++ b/lib/codemirror/modes.min.js
--- a/src/editormd.js
+++ b/src/editormd.js
@ -140,7 +140,7 @@
        tocDropdown          : false,
        tocContainer         : "",
        tocStartLevel        : 1,              // Said from H1 to create ToC
        htmlDecode           : false,          // Open the HTML tag identification
        htmlDecode           : false,          // Open the HTML tag identification, If set String value expression : tagName,tagName,...|attrName,attrName,...
        pageBreak            : true,           // Enable parse page break [========]
        atLink               : true,           // for @link
        emailLink            : true,           // for email address auto link
@ -1914,7 +1914,7 @@
                        tocMenu.remove();
                    }
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
                    editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
                    if (settings.tocDropdown || tocContainer.find("." + this.classPrefix + "toc-menu").length > 0) {
                        editormd.tocDropdownMenu(tocContainer, (settings.tocTitle !== "") ? settings.tocTitle : this.lang.tocTitle);
@ -3377,6 +3377,10 @@
            var headingHTML = "<h" + level + " id=\"h"+ level + "-" + this.options.headerPrefix + id +"\">";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            text = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            headingHTML    += "<a name=\"" + text + "\" class=\"reference-link\"></a>";
            headingHTML    += "<span class=\"header-link octicon octicon-link\"></span>";
            headingHTML    += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text));
@ -3455,10 +3459,12 @@
     * @param   {Array}    toc             从marked获取的TOC数组列表
     * @param   {Element}  container       插入TOC的容器元素
     * @param   {Integer}  startLevel      Hx 起始层级
     * @param   {object}   markedRenderer  Marked Renderer
     * @returns {Object}   tocContainer    返回ToC列表容器层的jQuery对象元素
     */
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel) {
    editormd.markdownToCRenderer = function(toc, container, tocDropdown, startLevel, markedRenderer) {
        markedRenderer = markedRenderer || null;
        var html        = "";
        var lastLevel   = 0;
@ -3482,7 +3488,15 @@
                html += "</ul></li>";
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
            // fixed https://github.com/pandao/editor.md/issues/476
            // fixed https://github.com/pandao/editor.md/issues/649
            var href = text.replace(/(<([^>]+)>)/ig, ""); // /<[^>]*>/g
            if (markedRenderer) {
                text = markedRenderer.emoji(text); // Fixed Heading can't has emoji code
            }
            html += "<li><a class=\"toc-level-" + level + "\" href=\"#" + href + "\" level=\"" + level + "\">" + text + "</a><ul>";
            lastLevel = level;
        }
@ -3600,7 +3614,7 @@
        }
        if (typeof attrs !== "undefined") {
            var htmlTagRegex = /\<(\w+)\s*([^\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            var htmlTagRegex = /\<(\w+)\s*([^\/\>]*)\>([^\>]*)\<\/(\w+)\>/ig;
            if (attrs === "*") {
                html = html.replace(htmlTagRegex, function($1, $2, $3, $4, $5) {
@ -3615,6 +3629,11 @@
                    $.each(_attrs, function(i, e) {
                        if (e.nodeName !== "\"") {
                            $attrs[e.nodeName] = e.nodeValue;
                            // Fixed like <a href="javascript:alert('xss')"></a> XSS problem, Copy from pull request #532
                            if (e.nodeName === "href" && e.nodeValue.toLowerCase().indexOf("javascript:") >= 0) {
                                $attrs[e.nodeName] = "javascript:;";
                            }
                        }
                    });
@ -3746,7 +3765,7 @@
        }
        if (settings.toc) {
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel);
            div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel, markedOptions.renderer);
            if (settings.tocDropdown || div.find("." + this.classPrefix + "toc-menu").length > 0) {
                this.tocDropdownMenu(div, settings.tocTitle);