search

highlightjs / vue-plugin

Highlight.js Vue Plugin
BSD 3-Clause "New" or "Revised" License
200 stars 28 forks source link

Doc improvement for style selection #35

Open suterma opened 1 year ago

suterma commented 1 year ago

The readme lacks guidance on selecting a CSS. Although it's shown with a code line here https://github.com/highlightjs/vue-plugin#using-the-pre-built-libraries and also somewhere further down, a separate paragraph on this would be helpful, especially for users that directly come to this vue-plugin, and never used the highlight-js package beforehand.

I suggest the paragraph along something like this:

Selecting a style sheet

The underlying highlight.js offers some ready-made stylesheets that can be used with this vue-plugin. Styles can be found in the node module at highlight.js/styles/...

You can import a suitable stylesheet either by directly linking to it (replace the placeholders):

//index.html
<link rel="stylesheet" href="/path/to/styles/default.css">

or, if you are using ES6, you can just import it (replace "default"):

//main.js or main.ts
import 'highlight.js/styles/default.css';
joshgoebel commented 1 year ago

In reading the README just now I personally feel this (how to pick a theme) is already quite well covered in the two different usage examples.

If this is more about "hey there are lots of themes!" I'm not sure that makes sense to document in every single plugin (rather than in the core Highlight.js docs). Curious to hear others thoughts though.

suterma commented 1 year ago

Maybe it's just me but I had not immediately figured out where to get and how to actually include the CSS in my Vue app (as a first-time highlight.js user). I assumed that there was some colorful default theme and was initially turned down when I saw the classes there but the code still looked boring. (It's working now and really looking nice!)