Quick toolbar thrown together for PrismJS. Typical "windows" style toolbar, with minimize/expand, fullscreen, and copy-to-clipboard buttons.
Quick demo of what is built:
This is a work-in-progress, but you can already get it working just by creating a new instance and calling autoInit. For example, if you always wrap your code like
Then adding the toolbar is as simple as:
You can use either
jPrismToolbar.js or the minifed
jPrismToolbar.min.js file, which is generated by
npm run minify.
Certain settings can be controlled on a 'per instance' basis and can be either passed into the constructor or added as attributes on the code element.
|Settings key||HTML attribute key||default||description|
||boolean, whether or not the toolbar + code embed should be wrapped together in wrapper, or just have toolbar and code elem be sibling|
||boolean, whether CSS animations should be used (for example, when collapsing or opening an embed)|
||boolean, whether or not the preview should use linewrap|
||Set to a URL string that returns code as text (such as what you get when you click "view raw" on Github) and it will get pulled into the code preview box via AJAX and my tool will trigger Prism to re-highlight it|
- Almost all classes are prefixed with "j" (just like the repo) to avoid conflicts with other libraries or stylesheets.
- Certain buttons try to use icons, but will fallback gracefully depending on what you have installed. It will try font-awesome -> materializecss -> fallback
- For the "copy-to-clipboard" feature, it will try to use ClipboardJS, but if it is not available within the global window scope, it will fall back to just selecting the text and letting the user either right click or use CTRL+C.