Markdown

向军大叔每晚八点在 抖音 和 bilibli 直播

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

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

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

PHP

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

安装扩展

composer require erusev/parsedown

解析 markdown

下面将 markdown 解析为 HTML

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

        return $Parsedown->text($content);
    }
}

代码高亮

使用highlightjs 插件可以方便的对 markdown 进行代码高亮。

首先安装插件

yarn add highlight.js

下面是对代码进行高亮处理

import hljs from 'highlight.js'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/atom-one-dark.css'

...

hljs.registerLanguage('javascript', javascript)
const pre = el.querySelector('pre')
if (pre) {
  hljs.highlightBlock(pre, { language: 'javascript' })
  pre.style.backgroundColor = '#354249'
}

vue 指令

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

import hljs from 'highlight.js'
import 'highlight.js/styles/rainbow.css'

export default app => {
  app.directive('markdown', {
    mounted(el) {
      el.querySelectorAll('pre').forEach(pre => {
        hljs.highlightBlock(pre)
      })
    }
  })
}

使用方式如下，其中 content 为 markdown 同容

<div v-markdown v-html="{{content}}" class="leading-10 text-base" />

Javascript

下面使用 markdown-it 在前端将 Markdown 转为 HTML，然后按照上面的方式使用 highlightjs 对代码进行高亮。

首先使用markdown-it插件将 Markdown 转为 HTML

import MarkdownIt from 'markdown-it'

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