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

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

marked用来干什么的?

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

marked该怎么使用?

  • 安装
    npm install -g marked       //全局安装 
  • 使用



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

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

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

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

Vue-cli实现Markdown解析为Html以及highlight高亮代码块_第1张图片

Vue-cli实现Markdown解析为Html以及highlight高亮代码块_第2张图片

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

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

你可能感兴趣的:(Vue-cli实现Markdown解析为Html以及highlight高亮代码块)