metachris / vue-highlightjs

Syntax highlighting with highlight.js for Vue.js 2.x
337 stars 41 forks source link

No styles/stylesheets present #19

Closed Octavector closed 6 years ago

Octavector commented 6 years ago

Following the process outlined:

Installed vue-highlightjs:

npm install --save vue-highlightjs

Imported in main.js:

import Vue from 'vue'
import VueHighlightJS from 'vue-highlightjs'
Vue.use(VueHighlightJS)

Used in component callled by vue-router:

<pre v-highlightjs><code class="javascript">const s = new Date().toString()</code></pre>

My output is without styling. vue-highlightjs appears to be doing its job as the output has the correct class names:

<pre>
   <code class="javascript hljs">
      <span class="hljs-keyword">const</span> s = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toString()
   </code>
</pre>

What method do I use to apply the styles? Should they have been added automatically or do I need to add them in the component or add them with Webpack?

ghost commented 6 years ago

highlight.js

npm install --save highlight.js

Styles

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">

Source

https://www.metachris.com/2017/02/vuejs-syntax-highlighting-with-highlightjs/

Octavector commented 6 years ago

@vegenera Thank you!