# 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();
        Parsedown->setSafeMode(true);   
        
        return $Parsedown->text($content);
    }
}

# 代码高亮

使用highlightjs (opens new window) 插件可以方便的对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 (opens new window) 在前端将Markdown转为HTML,然后按照上面的方式使用 highlightjs (opens new window) 对代码进行高亮。

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

import MarkdownIt from 'markdown-it'

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