I am currently developing a blog using Vue and have decided to incorporate syntax highlighting for the code snippets in my posts by utilizing vue-highlightjs. In order to write the content of my blog posts, I am simply using a textarea within my admin panel where I manually enter the HTML markup.
<textarea v-model="editorData" cols="60" rows="10"></textarea>
The data bound to editorData is just a String. When displaying a blog post on the page, I retrieve it from the server and render it within a BlogPost.vue component. Below is the code snippet for that particular component:
<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>
The directive v-highlightjs, assigned to the pre tag within the template, triggers the vue-highlightjs plugin to apply syntax highlighting to the code inside these elements.
An issue arises with dynamically loaded content stored in postBody not being highlighted. For instance, if I input
<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>https://i.sstatic.net/qgrBF.png
I'm uncertain why vue-highlightjs fails to highlight dynamic content. Any insights or suggestions would be greatly appreciated. Thank you for your help.
P.S. I'm open to exploring alternative methods for creating an admin panel for writing blog posts with integrated syntax highlighting. Although I briefly experimented with CKEditor, I found it to be quite confusing. Do you have any recommendations?