Narcoleptic's Patch Mangler

    @justinribeiro/code-block

    1.0.0 • Public • Published

    npm version

    <code-block>

    A web component that displays colorfully formatted code with Prism.js and LitElement.

    screenshot of code-block

    Features

    • Loads Prism.js language definitions on demand via dynamic imports from node_modules/prismjs/components/
    • Loads Prism.js custom themes
    • Built as a web component on LitElement

    Install

    This web component is built with ES modules in mind and is available on NPM:

    Install code-block:

    npm i @justinribeiro/code-block
    # or
    yarn add @justinribeiro/code-block

    After install, import into your project:

    import '@justinribeiro/code-block';

    Finally, use as required:

    <code-block language="javascript">
    function helloWorld(say) {
      console.log(say);
    }
    
    helloWorld('Hi there!');
    </code-block>

    Attributes

    The web component allows certain attributes to be give a little additional flexibility.

    Name Description Default
    language Code language you wish to utilize from Prism clike
    theme Path to Prism CSS theme file /node_modules/prismjs/themes/prism.css

    Building

    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).

    Develop

    $ git clone git@github.com:justinribeiro/code-block.git
    $ cd code-block
    $ yarn install
    $ polymer serve

    Polyfills Required

    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
    Supported
    Polyfill(s) Required - -

    Within your project, you can load them as such:

    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    Install

    npm i @justinribeiro/code-block

    DownloadsWeekly Downloads

    54

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    9.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • justinribeiro