首页 > web前端 > Vue.js > 正文

Vue3怎么解析markdown并实现代码高亮显示

王林
发布: 2023-05-20 16:16:24
转载
3720 人浏览过

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文件中看到有安装的版本号

Vue3怎么解析markdown并实现代码高亮显示

二、在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 &#39;marked&#39;;
    export default {
        name: &#39;articles&#39;,
        data(){
          return{
              article:&#39;&#39;
          }
        },
        methods: {
          getPostDetail() {
            console.log(&#39;getPostDetail()&#39;+this.id)
            fetchPostDetail(this.id).then(res => {
               this.postdetail=res.data
               // 调用marked()方法,将markdown转换成html
               this.article= marked(this.postdetail.content);
               console.log(res.data)
              }).catch(err => {
                  console.log(err)
              })

          },
        created() {
          //调用获取文章内容的接口方法
          this.getPostDetail()
        },
    }
 </script>
登录后复制

四、显示效果

markdown解析及代码高亮显示效果

Vue3怎么解析markdown并实现代码高亮显示

示例中引用的样式是 import 'highlight.js/styles/atom-one-dark.css'
实际highlight.js/styles中提供了很多样式,可以根据自己的喜好选用。

Vue3怎么解析markdown并实现代码高亮显示

以上是Vue3怎么解析markdown并实现代码高亮显示的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:yisu.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板