Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads.
Today, I ran across this component, vue-code-highlight
Beautiful code syntax highlighting as Vue.js component.
Usage
npm install vue-code-highlight --save
We can use this module in two different ways, as a component or as a directive.
Component
//We have to extract the component from the module
import { component as VueCodeHighlight } from 'vue-code-highlight';
components:{
VueCodeHighlight,
...
}
HTML
<vue-code-highlight>
//Paste code and output snippets here
</vue-code-highlight>
Window styles are already present in a component mode, but we will need to select and include a theme to properly highlight code. (See the themes section.)
Directive
In the main file:
import VueCodeHighlight from 'vue-code-highlight';
Vue.use(VueCodeHighlight) //registers the v-highlight directive
And then in any Vue component:
<div v-highlight >
...
</div>
HTML
All markup under the div element having the following structure will be syntax highlighted.
<pre class="language-javascript">
<code>
//your code goes here
</code>
</pre>
HTML
To give the highlighter a window look in a directive mode, include the ./node_modules/vue-code-highlight/themes/window.css file somewhere in the app.
Themes
In order to visually highlight code, we need to select a theme from ./node_modules/vue-code-highlight/themes/ and import it somewhere into the component/application.
Reference: vue-code-highlight - npm
GitHub: GitHub - elisiondesign/vue-code-highlight: Beautiful code highlighter as Vue.js component.
