HTML 页面显示 md 文件

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

根据网上的方法尝试，虽然还不是自己想要的结果，尤其是列表项，但至少能正常显示 md 文件内容了。

主要分为二部分：

第一：html 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* 列表项
*/
<form name="form" action="" method="post">
        <select name="q">
          <option value="../md/测试.md">测试1</option>
          <option value="../md/还是测试.md">测试2</option>
        </select>
        <input type="button" value="显示" onclick="showMarkdown()">
</form>

/**
* 内容的容器
*/
<div id="content"></div>

第二：解析 md 文件内容为 html 显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* js 代码
* 主要为两步：
* 第一：通过 ajax 获取 md 文件内容
* 第二：通过 marked 插件解析显示为 html 内容
*/
<script type="text/javascript">
    function showMarkdown() {
      // 获取表单变量
      var f = form;
      // 创建XMLHttpRequest对象
      var xmlhttp;
      if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
      }else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      // 得到服务器响应后，对得到的Markdown文档进行解析
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
          // 谷歌浏览器的 status 是 0
          if (xmlhttp.status == 0 || xmlhttp.status == 200) {
            // 这里调用了 marked 框架中的 marked 函数实现 Markdown2HTML 的解析
            // marked("# 解析 markdown 语法 #")
            document.getElementById("content").innerHTML = marked(xmlhttp.responseText);
          }else{
            alert("status: " + xmlhttp.status);
          }
        }
      }
      
      // 向服务器发送请求，获取你需要的Markdown文档
      // f.q.value 获取的就是列表项每项的 value 值，也就是 md 文件。
      xmlhttp.open("GET", f.q.value, true);
      xmlhttp.send();
    }
  </script>

   // 使用这个插件解析 md 文件
  // 嫌麻烦所以直接使用远程依赖了，如果为了性能，可以下载下来做本地依赖。
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

在这里出现了个问题，因为是本地调试，也就是 file:/// 。如果都跑通了，获取到的文件内容一直为空，可在谷歌浏览器中 F12，在 Console 里看是否有报错，比如 CORS 跨域问题。

貌似是因为访问本地文件会有安全问题，所以被限制了。这个问题还没有深入研究，因为有自己的服务器，在服务器上就没问题了。