Vue3解析markdown解析并实现代码高亮显示
Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。
Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。
具体实现步骤如下:
一、安装依赖库
在vue项目下打开命令窗口,并输入以下命令
npm install marked -save // marked 用于将markdown转换成html
npm install highlight.js -save //用于代码高亮显示
命令执行完后可以在控制台或package.json文件中看到有安装的版本号
二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式//创建v-highlight全局指令
Vue.directive('highlight',function (el) {let blocks = el.querySelectorAll('pre code');blocks.forEach((block)=>{hljs.highlightBlock(block)})
})
这样就可以在vue组件中使用v-highlight引用代码高亮的方法了。
三、在Vue组件中应用marked解析及实现代码高亮
代码示例如下:
<!-- 正文输出 -->
<div class="entry-content"><div v-highlight v-html="article" id="content"></div>
</div>
<script>// 将marked 引入import { marked }from 'marked';export default {name: 'articles',data(){return{article:''}},methods: {getPostDetail() {console.log('getPostDetail()'+this.id)fetchPostDetail(this.id).then(res => {this.postdetail=res.data// 调用marked()方法,将markdown转换成htmlthis.article= marked(this.postdetail.content);console.log(res.data)}).catch(err => {console.log(err)})},created() {//调用获取文章内容的接口方法this.getPostDetail()},}</script>
四、显示效果
markdown解析及代码高亮显示效果
示例中引用的样式是 import 'highlight.js/styles/atom-one-dark.css'
实际highlight.js/styles中提供了很多样式,可以根据自己的喜好选用。
博客:http://xiejava.ishareread.com/
Vue3解析markdown解析并实现代码高亮显示相关推荐
- 解析Markdown文件生成React组件文档
前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项 ...
- markdown解析
markdown解析 demo 1.解析markdown里的所有代码块. 通过创建visitor,收集markdown里的代码片段并分类. public static void main(String ...
- 使用 markdown-it 解析 markdown 代码(读 VuePress 三)
前言 在此系列文章的第一篇,我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的,但没有提到非 Vue 组件的其他部分如何被解析. 今天,我们就来看看 Vuepress 是如何 ...
- 刘光瑞php,PHP Markdown 解析器 HyperDown
软件介绍 HyperDown 是 SegmentFault 开发的一个结构清晰.易于维护.现代的 PHP Markdown 解析器. Markdown已经面世许多年了,国内外许多大大小小的网站都在用它 ...
- Java如何解析markdown_使用Java实现的一款Markdown解析器md2x
使用Java实现的一款Markdown解析器md2x 前段时间在写自己的博客程序的时候,在前台使用了marked.js来解析自己的markdown文章,然后发现在进入文章页面的时候总会闪烁一下(前台解 ...
- C#解析Markdown文档,实现替换图片链接操作
前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
- python下载图片到文件夹_python实现解析markdown文档中的图片,并且保存到本地~
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
- php解析markdown前端渲染,Vuejs使用 vue-markdown 来渲染评论方法
如果你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markd ...
- php进行Markdown解析
1.建立一个基本类 Hyperdown <?phpnamespace jplt\markdown;/*** Parser** @copyright Copyright (c) 2012 Segm ...
最新文章
- 《learning ROS for robotics programming》
- 运维无小事,小事不运维
- 那些读了硕士博士的人,最不想让你知道的是什么?
- 比IETEST更好用的浏览器兼容性测试软件[绿色]
- python生成随机密码串
- HttpWebRequest简单使用
- ps打开闪退_Photoshop2020安装教程,会安装软件是学ps的前提
- 易到实际控制人温晓东成老赖:与贾跃亭曾是盟友 如今反目
- antd自定义样式主题
- python flask教程
- Redis Cluster 添加/删除 完整折腾步骤
- 利用samba漏洞入侵linux主机(samba低版本漏洞利用)
- PMP培训机构选择五大关键点!看完就会!
- 元器件 失效分析 过程介绍
- Echarts百分比饼状图
- 苹果还为 Windows 版 Chrome 用户带来 iCloud 密码浏览器扩展
- 完整兼职项目——2500块接的外包Python项目
- JUC源码分析-线程池篇(五):ForkJoinPool - 2
- java实现一个简易网络聊天室
- Java入门到精通要多久??