使用到的库文件，可以去一些cdn网站下载。可以使用marked+highlight+github-markdown-css实现markdown的显示和语法高亮

markdown

需要定义一个容器存放markdown页面，并且引入marked js脚本

<div id="content"></div>
<script src="path/to/marked.min.js"></script>

之后在js脚本里，解析markdown文件生成html页面

<script>
    // 创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    // 使用 GET 请求加载文件内容
    xhr.open('GET',"path/to/markdown/file", true);

    // 设置回调函数，当文件加载完成后执行
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 将文件内容传递给 marked.parse 函数并更新 content 元素
        var inner = marked.parse(xhr.responseText);
        document.getElementById('content').innerHTML = inner;
      }
    };

    // 发送请求
    xhr.send();
  </script>

这样就可以生成和显示解析后的html页面了

highlightjs

如果想要实现语法高亮，还可以使用另一个库：highlightjs

引入库和css文件，css文件可以下载多个主题样式，对应不同的css文件。


<link rel="stylesheet" href="path/to/lioshi.min.css">
<script src="path/to/highlight.min.js"></script>

之后在页面加载完成后调用就能够实现语法高亮

hljs.highlightAll();

配合marked就是放在解析markdown文件之后

    xhr.onload = function() {
      if (xhr.status === 200) {
        // 将文件内容传递给 marked.parse 函数并更新 content 元素
        var inner = marked.parse(xhr.responseText);
        document.getElementById('content').innerHTML = inner;
        hljs.highlightAll();
      }
    };

showdown

showdown同样可以实现markdown转html，使用方法也很简单


  <div id="content"></div>
  <script src="path/to/showdown.min.js"></script>


    // 创建一个 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    // 使用 GET 请求加载文件内容
    xhr.open('GET',"path/to/markdown/file", true);

    // 设置回调函数，当文件加载完成后执行
    xhr.onload = function() {
      if (xhr.status === 200) {
        var converter = new showdown.Converter();
        var inner = converter.makeHtml(xhr.responseText);
        document.getElementById('content').innerHTML = inner;
      }
    };

    // 发送请求
    xhr.send();

github-markdown-css

转换后的markdown有些内容是没办法通过展示的，比如块和引用，原生的html没有这种样式。通过引入github-markdown-css，可以显示正常的markdown样式。

下载地址https://github.com/sindresorhus/github-markdown-css

之后解压和得到里面的github-markdown.css文件。

在页面中引入css样式文件

<link rel="stylesheet" href="path/to/github-markdown.css">

之后在现实markdown页面的容器加上markdown-body类属性


<div id="content" class="markdown-body"></div>

你可以直接修改css文件，或者通过设置css样式来改变外观

<style>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
  }

  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
</style>

这样就可以正常在html中显示markdown样式了

html显示markdown文档和语法高亮

markdown

highlightjs

showdown

github-markdown-css