# Markdown

houdunren.com (opens new window) @ 向军大叔

xj-small

网页中解析和处理Markdown文档也是掌用的技巧,尤其在像后盾人这样的技术类网站中。

市面上有很多Markdown编辑器,在文档库 (opens new window) 中有篇关于 tui-editor 编辑器的使用,大家可以查看。

后盾人网站使用 PHP后台解析markdown而没有使用前台解析,当然代码高亮是使用的前台操作

# PHP

下面学习使用PHP在后台将markdown转换为HTML,后盾人网站使用 parsedown (opens new window) 库来完成解析。

安装扩展

composer require erusev/parsedown

解析markdown

下面将markdown解析为HTML

if (!function_exists('markdown')) {
    /**
     * 转换markdown
     * @param string $content
     * @return mixed
     */
    function markdown(string $content)
    {
        $Parsedown = new \Parsedown();
        return $Parsedown->text($content);
    }
}

# 代码高亮

使用highlightjs (opens new window) 插件可以方便的对markdown进行代码高亮。

import hljs from 'highlight.js'
import 'highlight.js/styles/rainbow.css'
import javascript from 'highlight.js/lib/languages/javascript'

...

hljs.registerLanguage('javascript', javascript)
document.querySelectorAll('pre code').forEach(block => {
    hljs.highlightBlock(block)
})

如果你使用VUE框架,定义的指令会很方便

import Vue from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/dracula.css'
import javascript from 'highlight.js/lib/languages/javascript'

//格式化markdown内容
Vue.directive('markdown', {
    inserted: function(el) {
        hljs.registerLanguage('javascript', javascript)
        el.querySelectorAll('pre code').forEach(block => {
            hljs.highlightBlock(block)
        })
    }
})

# Javascript

下面掌握使用JS将Markdown转为HTML并进行高亮处理,我们会使用到markdown-it (opens new window)highlightjs (opens new window)

首先使用markdown-it (opens new window)插件将Markdown转为HTML

import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const content = md.render(`#后盾人`)