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

我正在使用Vue创建一个博客，并将语法突出显示添加到我将在博客文章中编写的代码中。我只是在我的管理面板中使用

textarea

来写博客文章，所以我必须手动输入我想要显示的HTML

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

{{postTitle}} 从“axios”导入axios； 从“@/strings”导入{baseUrl}； 导出默认值{ 名称：“博客帖子”， 数据：函数（）{ 返回{ 职称：“， 正文：“” }; }, 路由前（到、从、下一个）{ get（baseUrl+“/blogPosts/”+to.params.id）。然后（response=>{ 接下来（vm=>vm.setData（response.data））； }); }, 方法：{ setData（数据）{ this.postTitle=data.title； this.postBody=data.content； } } }; 模板开头的

pre

标记中的

v-highlightjs

指令只是告诉vue highlightjs插件向其中的代码添加语法高亮显示

问题在于，

div

开头的

pre

标记中的硬编码代码高亮显示，但

postBody

中动态加载的代码未高亮显示。例如，如果我在我的管理面板文本区域中键入

const s=new Date（）.toString（）

，然后在我的BlogPost.vue页面中显示文章，它如下所示：

我不知道vue highlightjs是否因为代码是动态的还是其他原因而没有突出显示代码。有什么想法吗？先谢谢你

---

另外，一定有更好的方法来创建一个管理面板，在这里我可以发表博客文章，当我键入代码时，这些文章会显示语法突出显示。我尝试了一下CKEditor，但发现它确实令人困惑。有什么建议吗？

指令在初始高亮显示后不会高亮显示更新的代码。为此，您需要将一个变量传递给

v-highlightjs

指令：

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

Etiam cursus commodo neque，在semper dui前庭拍卖行， `埃蒂亚姆·非精英维利特while（true）{console.log（'test'）}前庭nec posuere lorem。我是多洛·安特，我是波特托尔·欧盟，我是非智人， `Morbi eleifend ornare felis，vel vulputate nibh suscipit id.const func=（）=（{foo:'bar'}）Phasellus luctus magna非sem发酵液，由pulvinar ex blandit制成。内克前庭。这是一个很好的例子` ] }), beforeMount（）{ this.post=this.posts[0] }, 安装的（）{ 这个.highlightPost（） }, 方法：{ highlightPost（）{ document.querySelectorAll（'code'）.forEach（（块）=>{ hljs.highlightBlock（块） }) }, 循环（）{ const index=this.posts.indexOf（this.post） this.post=index==this.posts.length-1？this.posts[0]：this.posts[index+1] 这个.$nextTick（（）=>{ 这个.highlightPost（） }) } } })

下一篇文章

听起来好像你不想使用

v-html

。尝试使用

{{postBody}}

insteadIt是值得一试的，但是使用

postBody

不会呈现HTML，它只是按原样打印字符串。这确实会在文章内部的代码中添加高亮显示，但是如果我有一些部分应该像普通HTML一样呈现，该怎么办？如果博客文章看起来像应该正常显示的

内容
文章中的一些代码

，并且只应该突出显示

代码

标记中的内容，该怎么办？现在执行

会将所有内容放入代码块中。在这种情况下，我会直接使用highlightjs库，并在每次内容更新时手动调用

hljs.highlightBlock

。我用一个例子更新了答案。

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