Allow usage of PrismJS plugins

[rafi]

Feature request

What problem does this feature solve?

Improve code-snippets user experience. Allowing usage of prismjs plugins such as "copy to clipboard" and "show language". These plugins, and more, allows greater extensibility.

What does the proposed API look like?

Basically a way to use Prism.plugins such as described here:

• https://prismjs.com/plugins/show-language/
• https://prismjs.com/plugins/copy-to-clipboard/
• https://prismjs.com/plugins/toolbar/

How should this be implemented in your opinion?

Allow a pre-process function in config.js like you do for markdown, i.e.:

module.exports = {
  prismjs: {
    extendPrism: prism => {
    }
  }
}

Are you willing to work on this yourself?**

I might try, yes.

[flozero]

What you ask is for client side. What they did with actual prism is using a mix with what we can do with prism with node and markdown-it plugins.

I am working on something with coupling mixin and component wrapper coming back if i have something with sens

edit: I think i have something near ok. I will clear a bit a explain it tomorrow and create a plugin for this

[rafi]

@f3ltron thanks, let me know when you have something :)

[flozero]

i am just watching how to config all plugins and use just what you want but i found a way to use them

[flozero]

Its coming sorry for time but I dont have a lot of time...

I think I should work on it in the layout but actually i mix enhanceAppFiles and clientRootMixin

[flozero]

Hello i come back after long time ^^. I created a plugin maybe not the best one but it's a first version

https://f3ltron.github.io/vuepress-plugin-prismjs/

Actually let you have access to:

• previewer
• copy clipboard (need toolbar)
• toolbar

I will complete docs and other stuff for open sources if it work smoothly for you

[flozero]

@rafi for explaining you fast what was the problem.

Vuepress used behind the scene markdown-it and some server side prismjs

so by this, I added some front logic by async components. I give you a try 👍

I didn't add the line numbers has it's supported by markdown

module.exports = {
markdown: {
    lineNumbers: true
 },
}

I will update the docs if people validate it with more examples and documentation about how it's work behind the scene

see yah :)

[JulioJu]

@f3ltron sad https://www.npmjs.com/package/vuepress-plugin-prismjs?activeTab=readme does not work anymore :disappointed: . It seems to be very cool :-) .