Skip to content
A "Windows-Like" toolbar for PrismJS.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo-assets
.gitignore
LICENSE
README.md
jPrismToolbar.js
jPrismToolbar.min.js
package-lock.json
package.json

README.md

j-prism-toolbar

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:

Demo GIF


instructions

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

<pre><code></code></pre>

Then adding the toolbar is as simple as:

(new PrismToolbar('pre')).autoInit();

You can use either jPrismToolbar.js or the minifed jPrismToolbar.min.js file, which is generated by npm run minify.


Advanced Usage

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
wrapCombo NA true unless using autoInit() boolean, whether or not the toolbar + code embed should be wrapped together in wrapper, or just have toolbar and code elem be sibling
animate data-animate true boolean, whether CSS animations should be used (for example, when collapsing or opening an embed)
lineWrap data-linewrap true boolean, whether or not the preview should use linewrap
remoteSrc data-jptremote false 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

Notes:

  • 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.
You can’t perform that action at this time.