Docsify: Prismjs configuration

[automada]

Hi, nice project!
Is there any easy way of changing themes and adding plugins for prism.js? Adding the js-files alone doesn't seem to have any effect.

[QingWei-Li]

https://docsify.js.org/#/language-highlight

[automada]

Thanks for the quick reply, but I was thinking more about the theming e.g. Solarized, and plugins, like line numbers. I tried to add the css+js as the prism docs describe, and I see the plugin is registered in prism in the console, but nothing happens.

[QingWei-Li]

I just call the Prism.highlight() API to highlight the code. I read the Prism source code, the plugins can not work in such the way.

[automada]

Thanks for clearing that up, still a really nice project :)

[qmarcos]

I have the same question and steps to achieve it are pretty straightforward. You have all prism available themes here: https://unpkg.com/[email protected]/themes/

So in your HTML need to add this line after link vue.css styles, to override with okaidia theme:

<link rel="stylesheet" href="//unpkg.com/prismjs/themes/prism-okaidia.css">

Finally, to polish what you get, there are some styles at vue.css that need to change, básically this ones:

.markdown-section code,
.markdown-section pre,
.markdown-section pre > code {
    color: #eee; /* default color for elements not styled by prism theme */
    background-color: #353544; /* dark background, because vue.css modify it */
}

/* because the bgcolor change in previous css rule. font-color when using inline code tag */
.markdown-section code {
    color: #eccb84; 
}

Hope it helps :)

[cgatian]

@qmarcos Thank you so much !

[JeffShomali]

@qmarcos thanks for saving my time 🙏