Monaco Editor - 预览

Markdown编辑器的编辑工作已经基本完成了，如果你想要查看Markdown渲染的效果，那么我这里有一些经验可以与你分享。

关于渲染器

众所周知，Markdown只不过是一个标记文本，最后渲染出来啥样，全靠渲染器和CSS。

可是CSS需要依托HTML标签，肯定无法直接渲染Markdown文本，那么就需要一个中间商将Markdown文本先转化为HTML文档。

市面上的渲染器有不少，但最广为人知，功能最为齐全的，当属markdown-it。

markdown-it本身能渲染的语法是有限的，但是通过社区插件则能极大地扩展解析范围，常见的、不常见的，统统都能解析，你所要谨慎考虑的也只有语法冲突的问题了。

markdown-it的配置

我也不解释太多，这里分享一个我安装的markdown-it配置，包括本体及诸多插件。

本体或插件安装可以通过以下命令

yarn add markdown-it -D

#or

npm i markdown-it --save

配置 ( previewConfig.js )：

import * as MarkdownIt from 'markdown-it';

let previewConfig = {
    getMarkdownItParser() {
        let it = new MarkdownIt({
                html: true,
                linkify: true,
                typographer: true
            }).use(require("markdown-it-container"), "tip")
            .use(require("markdown-it-container"), "warning")
            .use(require("markdown-it-container"), "danger")
            .use(require('@liradb2000/markdown-it-katex'))
            .use(require("markdown-it-underline"))
            .use(require("markdown-it-emoji"))
            .use(require("markdown-it-footnote"))
            .use(require("markdown-it-mark"))
            .use(require("markdown-it-sup"))
            .use(require("markdown-it-sub"))
            .use(require("markdown-it-ins"))
            .use(require("markdown-it-checkbox"))
            .use(require("markdown-it-abbr"))
            .use(require("markdown-it-toc-and-anchor").default, {
                anchorLink: false
            })
            .use(require("markdown-it-highlightjs"))
            .use(require("markdown-it-plantuml"))
            .use(require("markdown-it-multimd-table"))
            .use(require("markdown-it-meta"));
        let defaultRender =
            it.renderer.rules.link_open ||
            function (tokens, idx, options, env, self) {
                return self.renderToken(tokens, idx, options);
            };
        it.renderer.rules.link_open = function (
            tokens,
            idx,
            options,
            env,
            self
        ) {
            let href = tokens[idx].attrGet('href');
            if (href[0] != '#') {
                var aIndex = tokens[idx].attrIndex("target");
                if (aIndex < 0) {
                    tokens[idx].attrPush(["target", "_blank"]);
                } else {
                    tokens[idx].attrs[aIndex][1] = "_blank";
                }
            }
            return defaultRender(tokens, idx, options, env, self);
        };
        window.markdownIt = it;
        return it;
    }
}

export {
    previewConfig
}

markdown-it的插件是通过链式调用引入的，就像我在配置中写的那样。对于一些比较特殊的插件，比如markdown-it-container，还有额外的参数进行配置。

在插件引入完成后，我对链接的打开方式进行了一些调整，给外部链接添加了target="_blank"的属性，以避免点击链接直接在页面内打开。

Preview模块

由于我用的是Vue，所以我直接创建一个Vue单文件即可。

渲染方法（示例）

<template>
  <div ref="previewContainer" id="previewContainer" v-html="html" :class="themeName"></div>
</template>

<script>
//import '../style/acrmd.css';
import "highlight.js/styles/dracula.css";
import {previewConfig} from '../lib/previewConfig.js';
//...
export default{
    name: 'preview',
    mounted() {
        window.Preview = this;
    },
    data(){
        return{
            html:'',
            markdownIt:previewConfig.getMarkdownItParser()
        }
    },

    methods:{
        markdownRender(content){
            this.html = this.markdownIt.render(content);
        }
    }
}
</script>

<style scoped>
@import url("<https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css>");
</style>

要是简单的调用，可以在浏览器控制台输入window.Preview.markdownRender('# Hello Markdown!')。

需要注意的是，markdown-it-highlightjs, markdown-it-katex都是需要进行资源引入的，否则无法正常渲染。 你也能够在我给出的示例代码中看到我是如何引入相关资源的

实际项目

四篇文章完成了一个简单的Markdown编辑器，由于我制作这个编辑器主要目的是为了做UWP的控件，所以在实际项目中修改了加载流程，但大体不差。

你可以在这里查看实际的项目：Markdown-Editor-Vue