How do I display syntax-highlighted HTML code like this picture from the VueJS documentation?
I have tried using v-html but I just get a console error.
Add a comment
|
3 Answers
Upon inspecting the VueJS documentation code snips, you can see they contain the class hljs.
This class is used by HighlightJS, a simple framework for code syntax highlighting.
HighlightJS automatically detects the language based on the syntax and can be extended with custom themes and configurations.
To install it in your vue package simply run either npm install highlight.js --save or yarn add highlight.js.
Once installed, import it and register it as a Vue plugin Vue.use(hljs.vuePlugin);
You can then use the component within your Vue templates:
<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
</div>
You can find the above Vue example here in the documentation.
2 Comments
imnhasan
Brother, actually I want to implement this inertia js + laravel project I use in Vue 3. but don't implement highlight.js. Have you any idea of that 😢?
Jordan
What is the problem you are having? Any errors or issues? It may be more helpful to create a new question as comments aren't for off-topic discussion
If you use vue 3 I recommend you to use this package https://www.npmjs.com/package/vue-code-highlighter
It's a modern vue syntax highlighter made by me :)
3 Comments
starball
show how to use it.
Muhammad Ichsan
you can read at their documentation
starball
you can read this community's guidelines meta.stackexchange.com/a/8259/997587
You could just put out the sanitized string:
new Vue({
el: "#app",
data() {
return {
script: `<script src="https://unpkg.com/vue@next"></script>`,
}
},
template: `
<div>
Code:<br>
<code v-html="script"></code><br>
</div>
`,
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
7 Comments
Jordan
I don't think this is what OP wants to do. It seems like he wanted to know how the Vue documentation displays their code examples, which it does with syntax highlighting. See my answer for an example of the exact library VueJS documentation uses
muka.gergely
@Jordan maybe - to me it's not totally clear from the question. "I use v-html but when I type script tag it shows an error". He might need a full library, but he might just want the error to "go away".
Jordan
That's fair, honestly. I do notice now that he said he had an error with the
v-html. Could be that too. My interpretation was that he wanted to mimic how VueJS displays their code. However, if he wants to display code it would definitely be more user friendly to also syntax highlight it - even if this wasn't his question to begin with.imnhasan
thank you, brother. Both of you give me the answer. Sorry for my mistake. I actually want to know how the vue documentation shows their code in a document like a script tag which one describes by @Jordan Thank you again, Jordan, muka.gergely
Jordan
Thanks for clarifying @imnhasan. Make sure to mark my answer as the correct one so it gets more visibility to help others with a similar question and please leave a comment if anything isn't clear enough :)
|