@advanced-rest-client/prism-highlight

Syntax highlighting via Prism

Usage no npm install needed!

<script type="module">
  import advancedRestClientPrismHighlight from 'https://cdn.skypack.dev/@advanced-rest-client/prism-highlight';
</script>

README

prism-highlight

Syntax highlighting with Prism JS library

Published on NPM

Tests and publishing

<prism-highlight id="c2" lang="javascript"></prism-highlight>
<script>
document.querySelector('#c2').code = 'function(param) {\n' +
  '  param.forEach((item) => this._parseItem(item))\n' +
  '  const test = null;\n' +
  '}';
</script>

Usage

Installation

npm install --save @advanced-rest-client/prism-highlight

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/prism-highlight/prism-highlight.js';
    </script>
  </head>
  <body>
    <prism-highlight></prism-highlight>
  </body>
</html>

In a LitElement template

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/prism-highlight/prism-highlight.js';

class SampleElement extends LitElement {

  render() {
    return html`
    <prism-highlight .code="${this.code}" .lang="${this.lang}"></prism-highlight>
    `;
  }
}
customElements.define('sample-element', SampleElement);

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@advanced-rest-client/prism-highlight/prism-highlight.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <prism-highlight></prism-highlight>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/prism-highlight
cd prism-highlight
npm install

Running the demo locally

npm start

Running the tests

npm test

Changes in version 4

  • The component supports only few syntax highlighting by default. It won't load other languages at runtime. The component consumer has to download definition before highlighting the code.
  • The component no longer uses Web Workers.
  • Replaced Polymer with LitElement