# Markdown

houdunren.com @ 向军大叔

xj-small

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

下面以PHP语言为例来说明使用解析并显示markdown文档的内容。

# 编辑器

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

# 转换格式

首先需要将markdown文档的内容解析为HTML格式,我们使用 parsedown 这个库来完成解析。

安装扩展名

composer require graham-campbell/markdown:^13.0

修改 config/app.php 文件添加 aliases

'aliases' => [
    'Markdown' => GrahamCampbell\Markdown\Facades\Markdown::class,
    ...

解析markdown

下面将markdown解析为HTML

use GrahamCampbell\Markdown\Facades\Markdown;

Markdown::convertToHtml('houdunren.com'); // <p>houdunren.com</p>

在模板中也可以使用blade标签解析

@markdown
# houdunren.com
@endmarkdown

# 高亮代码

markdown中会有代码块,所以对其高亮处理也是必须的。我们使用 highlightjs 前端库来完成处理。

# CDN

  • 下面是使用的CDN库加载,如果你觉得慢也可以从官网下载安装包,或使用NPM管理

  • 下面使用了zenburn 深色风格包,你可以访问 highlightjs 官网获取你喜欢的风格包

<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.1/styles/zenburn.min.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

<script>
    hljs.initHighlightingOnLoad();
</script>

# VUE

通过VUE指令高亮代码方便复用,你可以将指令定义在全局或单独组件中。

  • 如果在Laravl框架中使用需要在blade模板中引入highlight.js
  • 如果前后端分离请行 import hljs from 'highlight.js/lib/core'
...

directives: {
    highlight: {
      inserted: (el,binding) => {
           el.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
      }
    }
  },

...

使用定义好的指令进行代码高亮

  • 内容要为Html而不是markdown,所以需要通过上面的章节将Markdown转为Html
<div v-html="content" v-highlight="comment" class="markdown"></div>