目的

  1. 使用js实时解析markdown,可以在html写md
  2. 自动识别head标签生成文档目录
  3. 文件本地化

适合团队共享文档,可以放在本地也可以放在web服务上,修改非常方便,除了浏览器文本编辑器不需要其他工具。

实现

使用了下面的代码或库

  1. https://github.com/chris-peng/markdown_nav
  2. http://strapdownjs.com/ (不可用了,可以从其他地方找到代码)
  3. jquery

过程:

  • 由于生成导航目录的js的定位有点问题,加了一个偏移值。
  • 把浏览器滚屏导航定位加亮去掉了,总是定不准。但是代码没删注释掉了。
  • 把文件都下载到本地放到了static目录里

使用

下载压缩包:
markdown_doc.zip

修改html文件其中markdown区域的内容,就可以了。

<!DOCTYPE html>
<html>
    <head>
<title>yii2项目搭建,以及常用组件的安装配置</title>
<meta charset="UTF-8">
<link href="./static/md_toc.css" rel="stylesheet">
</head>
<xmp theme="united" style="display:none;">
## 本文目的
使用composer创建yii2的advance工程,并安装配置常用工具

我觉得我已经写的非常详细了,如果真的哪里有疏漏,通知我。

关于yii2两个模板的区别,在[初识yii2](https://moozik.cn/archives/499/)里面有写,这里主要说相关工具的安装以及配置。

安装完成之后的效果:http://yii.moozik.cn

对配置文件的修改如果不确定添加到哪里,请拉到页面最下面查看我配置好的`main.php`等文件。

........

</xmp>
<script src="./static/jquery-1.7.2.min.js"></script>
<script src="./static/md_toc.js"></script>
<script src="./static/strapdown.js"></script>
</html>

示例地址:
http://static.moozik.cn/demo/md_doc.html

最后修改:2019 年 06 月 06 日
如果觉得我的文章对你有用,请随意赞赏