A web component that displays colorfully formatted code with Prism.js and LitElement.
- Loads Prism.js language definitions on demand via dynamic imports from
- Loads Prism.js custom themes
- Built as a web component on LitElement
This web component is built with ES modules in mind and is available on NPM:
npm i @justinribeiro/code-block # or yarn add @justinribeiro/code-block
After install, import into your project:
Finally, use as required:
The web component allows certain attributes to be give a little additional flexibility.
||Code language you wish to utilize from Prism||
||Path to Prism CSS theme file||
If you want the ability to load the full spectrum of languages that Prism supports, you'll want to make sure your build script includes the
/node_modules/prismjs/**, as there are many many language resources (and you don't want them all in your bundle, utilize the dynamic loading).
$ git clone email@example.com:justinribeiro/code-block.git $ cd code-block $ yarn install $ polymer serve
code-block utilizes Custom Elements and Shadow DOM (Web Components). As you can see in the table below, you'll need some polyfills to make use of this across a wide range of browsers.
|Platform Support||Chrome||Chrome for Android||Firefox||Safari||iOS Safari||Edge||IE 11|
Within your project, you can load them as such: