基于marked.js将markdown文件解析成网页内容

基于marked.js和highlight.js搭建个人博客网站的思路

这里对那些想要搭建个人博客网站又不想受限于主流框架的朋友们提供一个思路。我写的很简单，具体的内容自己去丰富即可。话不多说，直接上代码。

前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <style>
    .language-javascript.hljs{
      /*不加这个的话代码块过宽会被截取掉一部分*/
      overflow-x: auto;
    }

    /*以下是对markdown样式的调整,根据个人喜好修改即可*/
    img{
      max-width: 1000px;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,th {
      padding: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #cbcbcb;
    }
    table td,table th {
      border-left: 1px solid #cbcbcb;
      border-width: 0 0 0 1px;
      font-size: inherit;
      margin: 0;
      overflow: visible;
      padding: .5em 1em;
    }
    table thead {
      background-color: #e0e0e0;
      color: #000;
      text-align: left;
      vertical-align: bottom;
    }
    table td {
      background-color: transparent;
      border-bottom: 1px solid #cbcbcb;
      min-width: 70px;
    }
    table tbody>tr:last-child>td {
      border-bottom-width: 0;
    }
  </style>
</head>
<body>
<div id="content"></div>
<!--这是我自己封装的的ajax,使用jquery即可-->
<script src="../untils/hdx_ajax.js"></script>
<!--代码块高亮插件-->
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--解析markdown的插件-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  window.onload=function(){
    let rendererMD = new marked.Renderer();
    let markdownString = '';
    my_ajax({//这里是我自己封装的简易ajax,不想自己封装的话使用jquery的ajax即可
      type:'get',
      url:'http://172.31.15.199:3307',//此处的地址改为你自己创建的服务器接口地址
      success:function (res) {
        markdownString=res.responseText
        marked.setOptions({
          renderer: rendererMD,
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          highlight: function (code) {
            return hljs.highlightAuto(code).value;
          }
        });
        document.getElementById('content').innerHTML = marked.parse(markdownString);
        //在文档加载后为元素添加属性
        document.querySelectorAll('table').forEach(function (el) {
          el.setAttribute('border','1')
        })
        document.querySelectorAll('code').forEach(function (el) {
          //缺少这个类代码块没有背景
          el.classList.add('hljs')
        })
      }
    })
  }
</script>
</body>
</html>

后端代码(采用node)

const http=require('http');
const port=3307;//端口号,只要不写已经被占用的即可
const fs=require('fs');
const host='172.31.15.199';//填你自己的IPv4地址(win+R输入CMD,然后输入ipconfig即可查看)

http.createServer((req,res)=>{
  //跨域处理
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  //防止返回的中文乱码
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  fs.readFile('js解析md.md',(err,data)=>{//js解析md.md 换成你的markdown文件路径
    if(err){
      return;
    }else {
      res.end(data.toString('utf-8'));//防止乱码
    }
  })
}).listen(port,()=>{
  console.log(`服务器运行在http://${host}:${port}`);
})

问题

  • 由于异步的原因，会导致highlight这个代码块插件的一些类加不上去(我目前只发现了code标签的hljs类)。如果还有其他的问题，
    可以尝试直接将markdown的内容赋值给markdownString这个变量，然后在浏览里面进行调试，找出哪些元素缺少哪些类，
    然后自己在文档加载之后手动加上去即可。

  • 经过本人尝试，marked.js这个插件无法解析带竖线的区块语法，就是下面这个


    无法解析的语法.png

源文件及效果

markdown文件

# 基于marked.js和highlight.js搭建个人博客网站的思路
这里对那些想要搭建个人博客网站又不想受限于主流框架的朋友们提供一个思路。我写的很简单，具体的内容自己去丰富即可。话不多说，直接上代码。
### 前端代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <style>
    .language-javascript.hljs{
      /*不加这个的话代码块过宽会被截取掉一部分*/
      overflow-x: auto;
    }

    /*以下是对markdown样式的调整,根据个人喜好修改即可*/
    img{
      max-width: 1000px;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    td,th {
      padding: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #cbcbcb;
    }
    table td,table th {
      border-left: 1px solid #cbcbcb;
      border-width: 0 0 0 1px;
      font-size: inherit;
      margin: 0;
      overflow: visible;
      padding: .5em 1em;
    }
    table thead {
      background-color: #e0e0e0;
      color: #000;
      text-align: left;
      vertical-align: bottom;
    }
    table td {
      background-color: transparent;
      border-bottom: 1px solid #cbcbcb;
      min-width: 70px;
    }
    table tbody>tr:last-child>td {
      border-bottom-width: 0;
    }
  </style>
</head>
<body>
<div id="content"></div>
<!--这是我自己封装的的ajax,使用jquery即可-->
<script src="../untils/hdx_ajax.js"></script>
<!--代码块高亮插件-->
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--解析markdown的插件-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  window.onload=function(){
    let rendererMD = new marked.Renderer();
    let markdownString = '';
    my_ajax({//这里是我自己封装的简易ajax,不想自己封装的话使用jquery的ajax即可
      type:'get',
      url:'http://172.31.15.199:3307',//此处的地址改为你自己创建的服务器接口地址
      success:function (res) {
        markdownString=res.responseText
        marked.setOptions({
          renderer: rendererMD,
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          highlight: function (code) {
            return hljs.highlightAuto(code).value;
          }
        });
        document.getElementById('content').innerHTML = marked.parse(markdownString);
        //在文档加载后为元素添加属性
        document.querySelectorAll('table').forEach(function (el) {
          el.setAttribute('border','1')
        })
        document.querySelectorAll('code').forEach(function (el) {
          //缺少这个类代码块没有背景
          el.classList.add('hljs')
        })
      }
    })
  }
</script>
</body>
</html>
### 后端代码(采用node)
const http=require('http');
const port=3307;//端口号,只要不写已经被占用的即可
const fs=require('fs');
const host='172.31.15.199';//填你自己的IPv4地址(win+R输入CMD,然后输入ipconfig即可查看)

http.createServer((req,res)=>{
  //跨域处理
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  //防止返回的中文乱码
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  fs.readFile('js解析md.md',(err,data)=>{//js解析md.md 换成你的markdown文件路径
    if(err){
      return;
    }else {
      res.end(data.toString('utf-8'));//防止乱码
    }
  })
}).listen(port,()=>{
  console.log(`服务器运行在http://${host}:${port}`);
})
### 问题
* 由于异步的原因，会导致highlight这个代码块插件的一些类加不上去(我目前只发现了code标签的hljs类)。如果还有其他的问题，
  可以尝试直接将markdown的内容赋值给markdownString这个变量，然后在浏览里面进行调试，找出哪些元素缺少哪些类，
  然后自己在文档加载之后手动加上去即可。
* 经过本人尝试，marked.js这个插件无法解析带竖线的区块语法，就是下面这个
<img src="../md转html/无法解析.png" alt="无法解析的语法" width="100%">

效果

解析效果.gif
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容