我的另一个项目 planet 工作台需要实现 markdown 文档的渲染,因此参考 gfm 规范实现了一个 markdown 的解析库，取名Venus点这里直接看 Demo

基础使用方式

<script src="./venus.js"></script>
// 导入库

Venus(res, id); //调用库

导入venus.js后直接调用即可

Venus 接受两个参数

res-> markdown 源码 id-> 将解析的 markdown 渲染到指定 id 的容器里

添加样式

你可以自己添加样式让渲染后的页面更好看

Demo 里提供了基础的样式markdown.css

导入<link rel="stylesheet" href="./markdown.css">

代码高亮方案

这里我选择 highligt.js 来对 markdown 的代码块实现高亮

<script src="./highlight.pack.js"></script>
<link rel="stylesheet" href="./styles/paraiso-dark.css" />

由于venus的渲染方式是直接将解析后的html直接放在innerHTML中，调用highlight的方法需要一点改动。

window.onload = function() {
  document.querySelectorAll("pre code").forEach(block => {
    hljs.highlightBlock(block);
  });
};

bug

应该有很多 bug，但是目前没有仔细调试，暂时提供一个实现 markdown 解析的参考。 后面有时间了会重构

demo 代码里我作了详细的注释，可以去看，主要是利用正则对 markdown 源码的处理。