Question

我正在使用Vue创建博客，并正在使用vue-highlightjs向将在博客文章中编写的代码添加语法突出显示功能。我只是在管理面板中使用textarea来撰写博客文章，所以我必须手动输入要显示的HTML。

<textarea v-model="editorData" cols="60" rows="10"></textarea>

editorData只是一个字符串。在显示博客文章的页面上，我从服务器获取博客文章，并将其显示在BlogPost.vue组件中。这是该组件的代码：

<template>
  <div>
    <pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>
    <h1 class="page-title">{{postTitle}}</h1>
    <div v-html="postBody"></div>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/strings";
export default {
  name: "BlogPost",
  data: function() {
    return {
      postTitle: "",
      postBody: ""
    };
  },

  beforeRouteEnter(to, from, next) {
    axios.get(baseUrl + "/blogPosts/" + to.params.id).then(response => {
      next(vm => vm.setData(response.data));
    });
  },
  methods: {
    setData(data) {
      this.postTitle = data.title;
      this.postBody = data.content;
    }
  }
};
</script>

模板开头v-highlightjs标记中的pre指令只是告诉vue-highlightjs插件向其中的代码添加语法突出显示。

问题是pre开头的div标记中的硬编码代码被突出显示，而postBody中的动态加载的代码未突出显示。例如，如果我在管理面板的textarea中键入<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>，然后在BlogPost.vue页面中显示该帖子，则如下所示：

我不知道vue-highlightjs是否突出显示代码，因为它是动态的还是什么。有任何想法吗？预先谢谢你。

P.S。必须有一种更好的方法来创建管理面板，使我可以制作博客文章，这些文章将在我键入代码时以语法高亮显示。我试了一下CKEditor，但发现它确实令人困惑。有什么建议吗？

Answer 1

该指令在初始突出显示后不会突出显示更新的代码。为此，您需要将变量传递给v-highlightjs指令：

<pre v-highlightjs="postBody"><code class="javascript"></code></pre>

来自Vue.js Syntax Highlighting with Highlight.js：

对代码进行更新
highlight.js替换代码块的内容。如果使用上述指令，则在初始高亮显示之后更新源代码将不再起作用。为了能够更新代码并在更新后再次突出显示它，请将变量直接传递到v-highlightjs指令

这是从jsFiddle修改而来的this example。

如果您需要对突出显示的内容进行更多控制，建议您使用highlightjs库本身而非指令，并手动调用hljs.highlightBlock。

new Vue({
  el: '#app',
  data: () => ({
    post: null,
    posts: [
      `Phasellus luctus magna non sem fermentum, sed pulvinar ex blandit. Vestibulum id auctor neque. Etiam aliquam commodo sollicitudin. <pre><code class="javascript">var foo = bar</code></pre>Etiam cursus commodo neque, at semper dui vestibulum auctor.`,
      `Etiam non elit velit. <pre><code class="javascript">while (true) { console.log('test') }</code></pre>Vestibulum nec posuere lorem. Ut dolor ante, eleifend ut porttitor eu, faucibus non sapien.`,
      `Morbi eleifend ornare felis, vel vulputate nibh suscipit id. <pre><code class="javascript">const func = () = ({ foo: 'bar' })</code></pre>Phasellus luctus magna non sem fermentum, sed pulvinar ex blandit. Vestibulum id auctor neque. Etiam aliquam commodo sollicitudin.`
    ]
  }),
  beforeMount() {
    this.post = this.posts[0]
  },
  mounted() {
    this.highlightPost()
  },
  methods: {
    highlightPost() {
      document.querySelectorAll('code').forEach((block) => {
        hljs.highlightBlock(block)
      })
    },
    cycle() {
      const index = this.posts.indexOf(this.post)

      this.post = index === this.posts.length - 1 ? this.posts[0] : this.posts[index + 1]

      this.$nextTick(() => {
        this.highlightPost()
      })
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="cycle">Next Post</button>
  <p id="post-content" v-html="post"></p>
</div>

动态博客文章上的语法突出显示不起作用

1 个答案: