Vue-cli实现Markdown解析为Html以及highlight高亮代码块

最新推荐文章于 2024-09-10 09:21:15 发布

weixin_33834679

最新推荐文章于 2024-09-10 09:21:15 发布

阅读量1.1k

点赞数

文章标签： markdown javascript 前端 ViewUI

原文链接：https://my.oschina.net/u/3041966/blog/1606167

版权

2019独角兽企业重金招聘Python工程师标准>>>

marked用来干什么的？

一个功能齐全的markdown解析器和编译器，用JavaScript编写。速度建成。

marked该怎么使用？

安装

    npm install -g marked       //全局安装

使用

<template>
    <div v-html="compiledMarkdown"></div>
</template>

<script>
    let marked = require('marked');
    let hljs = require('highlight.js');
    import 'highlight.js/styles/default.css';

    marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code, lang) {
          if (lang && hljs.getLanguage(lang)) {    
            return hljs.highlight(lang, code, true).value;
          } else {
            return hljs.highlightAuto(code).value;
          }
      }
  });

   export default{
     name: 'test', 
    computed: {
        compiledMarkdown() {
        let detail = '当马孔多在《圣经》所载那种龙卷风的怒号中化作可怕的瓦砾与尘埃漩涡时，奥雷里亚诺为避免在熟知的事情上浪费时间又跳过十一页 `test` 预言他正在破解羊皮卷的最后一页，宛如他正在会言语的镜中照影。他再次跳读去寻索自己死亡的日期和情形，但没等看到最后一行便已明白自己不会再走出这房间，因为可以预料这座镜子之城——或蜃景之城——将在奥雷里亚诺·巴比伦全部译出羊皮卷之时被飓风抹去 `test`、`test` 两大应用系统，让开发者更好、更快、更方便开发移动应用。\n\n';
        return marked(detail || '', {
          sanitize: true
        });
      }
    }
   }
</script>

这里marked作为解析器解析为浏览器能够支持的网页之后，就可以和正常访问浏览器一样啦。然后这里有没有一个小插曲呢，项目经理说，咦，那代码块里面的样式都是清一色的，我可以不可以让它花里胡哨起来呢？当然没有问题啦，这里我们就介绍下一个主角登场。噔噔噔~~~，那就是我们的Highlight.js。

Highlight是一款能够输出html高亮代码的软件。支持159种程序语言，具体请看：http://www.andre-simon.de/doku/highlight/en/langs.html 内置多种高亮主题，总有一款样式是你喜欢的。
如果以上样式还有不满足个人项目需求的，可以自己动手新建一个css文件，写入和自己胃口的样式。