web页面 js 加载和显示Markdown .md文件总结

  Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多技术博客都采用Markdown来显示,如:简书、csdn等。Markdown编辑器主要有两类,都可以导出.md文件:

  • 客户端:Typora,有道笔记等
  • 在线编辑器:简书、CSDN等

本文讨论web页面(html、jsp等)如何用js显示md文件,基本流程如下:

  • ajax 请求加载md文件
  • js解析md文件内容,将md文本转换成html dom
  • 网页加载转换后的html dom
  • 加载md 匹配的css

这里有2个关键技术点:

  • md格式内容解析
  • 匹配md格式、美观的css

1、md格式内容解析

github上有很多开源的md解析框架,star比较多的有:

  • markedjs
  • markdown
  • showdown
  • remark

使用方法都大同小异,将md文本内容转换成html dom,但是转换结果却差异很大,个人推荐marked

2、匹配的css

上述框架都没有提供详尽的css,要想实现类似简书等美观的展示效果,需要UI团队自行实现,网上倒是有github的markdown css可以参考:
https://cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.css

3、一个来自有道的markdown在线编辑、预览器

下面看一个来在有道笔记的markdown在线编辑、预览器,html代码如下:

<!DOCTYPE html>
<html manifest="index.appcache">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="none">
    <title>有道云笔记</title>
  </head>
  <body data-mode="edit">
    <div class="ui-layout-toggler" id="north-toggler"></div>
    <div class="ui-layout-south">
      <div class="ui-layout-center">
        <div id="editor"></div> <!-- 编辑器 -->
      </div>
      <div class="ui-layout-toggler" id="east-toggler"></div>
      <div class="ui-layout-east">
        <article class="markdown-body" id="preview" data-open-title="Hide Preview" data-closed-title="Show Preview">
        </article> <!-- 实时预览 -->
      </div>
    </div>
    <div class="theme-list"></div>
    <script src="https://note.youdao.com/md/vendor-c7413287a3.js"></script>
    <script src="https://note.youdao.com/md/index-3abeeca70a.js"></script>
  </body>
</html>
展开阅读全文

没有更多推荐了,返回首页