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

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文件,写入和自己胃口的样式。

用完之后具体的结果是怎么样的?

  • 做完这些之后,页面差不多就是下面这个样子

输入图片说明

输入图片说明

分享仅作参考,如果又不对的可以多多指出来,谢谢。

转载于:https://my.oschina.net/u/3041966/blog/1606167

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值