[vue]-通过url链接获取markdown并高亮显示

最新推荐文章于 2025-04-26 11:30:00 发布

原创最新推荐文章于 2025-04-26 11:30:00 发布 · 719 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#markdown #vue

markdown 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue应用中处理后台返回的Markdown URL，使用vue-markdown和highlight.js实现Markdown内容的加载和代码高亮。由于vue-markdown组件仅渲染一次，故需采用v-if技巧进行多次渲染。

之前也有篇文章将markdown文件转html的，但是这次后台变了，后台将返回url的形式，并且之前发现的LaTeX 公式无法转换，因此换了插件。

安装以下依赖

vue-markdown、highlight.js（高亮的）
vue-markdown源码：https://github.com/miaolz123/vue-markdown

PS：v-if=show 是因为vue-markdown仅在开始时渲染一次，它将覆盖source的属性。
而我要多次渲染

直接贴代码了

<template>
  <div>
    <vue-markdown v-if="show">{{markdownContent}}</vue-markdown>
  </div>
</template>

import '@/assets/css/markdownhere.css'      //本地的样式
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';
import VueMarkdown from 'vue-markdown';

    components: {
	  VueMarkdown
   },
   data () {
    return {
      show: false,    //
      markdownContent: '',
    };
  },
   methods: {
    async highlighthandle () {    //高亮代码
      await hljs;
      let highlight = document.querySelectorAll('code,pre');
      highlight.forEach((block) => {
        hljs.highlightBlock(block);
      })
    },
    bindEvent () {
      let self = this;
      eventBus.$on("getArticleItem", data => {    //这里是接听其他组件传来的值的，依情况而定，也可以直接写方法
        self.show = false;
        self.articleItem(data)
      });
    },
    articleItem (id) {
      let url='...'    // 这里不贴出来了
      this.$http.post(url)
        .then((res) => {
          if (res.status == 200)
          {
            this.show = true;
            this.markdownContent = res.data;
          }
          console.log(res)
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
  mounted () {
    this.highlighthandle()
  },
  updated () {
    this.highlighthandle()
  },