Previewer plugins should be merged into one

[LeaVerou]

CC @Golmote

Right now there are too many separate Previewer plugins. This is disruptive, both for people who want them, and for people who don't want them.
For the former, they need to check each one individually and if a new one is added, they do not get the update because it's a separate plugin. I think it's more common for people to want more than one previewer than for them to only want one.
For the latter, they have to scroll through a long list of previewers to find the plugins they actually need. It's a lot of visual clutter.
My proposal is: Merge them into one “CSS Previewers" plugin, with a way to turn certain previewers off globally. That way, you might even be able to reduce the amount of total code, as some of it will be shared across previewers. Thoughts?

[Golmote]

Code is already shared across Previewers since they all require the Previewer: Base plugin.

I agree they could be merged, though. But we still don't have any global configuration for Prism, have we? What API do you imagine to turn off some previewers?

[LeaVerou]

Awesome!
I would suggest using inheritable classes to opt-out, e.g. no-gradient-previewer on the element or an ancestor disables gradient previewers.

[LeaVerou]

Any progress on this?

[Golmote]

Hi @LeaVerou.
I was finally taking a closer look at this (it's almost done, actually), and now I have second thoughts...

The Previewer: Color plugin does preview colors in HTML bgcolor attributes, which is not CSS. Thus I'm worried about merging it into a CSS Previewers plugin.

While thinking about this, I realized it would be great to add a previewer for images. But those can appear both in CSS and HTML (and Markdown, and probably other components...). So the grouping of previewers by language looks less relevant in this case.

[LeaVerou]

Yup, you're right (in fact, dabblet previewers also do both CSS and HTML).
I think the Previewer plugin should add all of them by default, in whatever languages are included, and support a configuration attribute (inherited) to only enable specific ones. E.g. `data-previewers="color length image".
What do you think?

[Golmote]

Sounds good to me.