@favware/syntax-highlighter-core/dist/collection/components/syntax-highlighter.js

A lightweight, easy-to-use and framework agnostic syntax highlighter for your code snippets.

import { Component, Event, h, Host, Prop } from '@stencil/core';
import ClipboardJS from 'clipboard';
import Prism from 'prismjs';
import 'prismjs/components/prism-asciidoc.min.js';
import 'prismjs/components/prism-autohotkey.min.js';
import 'prismjs/components/prism-autoit.min.js';
import 'prismjs/components/prism-bash.min.js';
import 'prismjs/components/prism-batch.min.js';
import 'prismjs/components/prism-c.min.js';
import 'prismjs/components/prism-clike.min.js';
import 'prismjs/components/prism-clojure.min.js';
import 'prismjs/components/prism-coffeescript.min.js';
import 'prismjs/components/prism-cpp.min.js';
import 'prismjs/components/prism-csharp.min.js';
import 'prismjs/components/prism-csp.min.js';
import 'prismjs/components/prism-css-extras.min.js';
import 'prismjs/components/prism-css.min.js';
import 'prismjs/components/prism-dart.min.js';
import 'prismjs/components/prism-diff.min.js';
import 'prismjs/components/prism-docker.min.js';
import 'prismjs/components/prism-elixir.min.js';
import 'prismjs/components/prism-gherkin.min.js';
import 'prismjs/components/prism-git.min.js';
import 'prismjs/components/prism-go.min.js';
import 'prismjs/components/prism-graphql.min.js';
import 'prismjs/components/prism-groovy.min.js';
import 'prismjs/components/prism-http.min.js';
import 'prismjs/components/prism-ini.min.js';
import 'prismjs/components/prism-java.min.js';
import 'prismjs/components/prism-javascript.min.js';
import 'prismjs/components/prism-json.min.js';
import 'prismjs/components/prism-jsx.min.js';
import 'prismjs/components/prism-kotlin.min.js';
import 'prismjs/components/prism-less.min.js';
import 'prismjs/components/prism-lua.min.js';
import 'prismjs/components/prism-makefile.min.js';
import 'prismjs/components/prism-markdown.min.js';
import 'prismjs/components/prism-nginx.min.js';
import 'prismjs/components/prism-objectivec.min.js';
import 'prismjs/components/prism-powershell.min.js';
import 'prismjs/components/prism-python.min.js';
import 'prismjs/components/prism-ruby.min.js';
import 'prismjs/components/prism-rust.min.js';
import 'prismjs/components/prism-sass.min.js';
import 'prismjs/components/prism-scala.min.js';
import 'prismjs/components/prism-scss.min.js';
import 'prismjs/components/prism-sql.min.js';
import 'prismjs/components/prism-swift.min.js';
import 'prismjs/components/prism-tsx.min.js';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/components/prism-vim.min.js';
import 'prismjs/components/prism-visual-basic.min.js';
import 'prismjs/components/prism-wasm.min.js';
import 'prismjs/components/prism-wiki.min.js';
import 'prismjs/components/prism-yaml.min.js';
export class SyntaxHighlighter {
  constructor() {
    /**
     * The theme to use, one of light or dark
     * @default dark
     */
    this.theme = 'dark';
    /**
     * The language to highlight for
     * @default html
     */
    this.language = 'html';
    /**
     * The text inside the "copy to clipboard" button
     * @remark This is primarily for if you want to provide i18n with your syntax highlighted component
     * @example "Kopieer naar klembord"
     * @default "Copy to clipboard"
     */
    this.copyButtonLabel = 'Copy to clipboard';
  }
  componentWillLoad() {
    this.clipboardJsInstance = new ClipboardJS('#syntaxhighlighter__ctc-button');
    this.clipboardJsInstance //
      .on('success', (event) => event.clearSelection()) //
      .on('error', (event) => this.clipboardJsError.emit(event));
  }
  componentDidRender() {
    Prism.highlightAll();
  }
  componentDidUpdate() {
    Prism.highlightAll();
  }
  render() {
    return (h(Host, { class: "syntaxhighlighter", ref: () => this.codeBlockRef },
      h("div", { class: "syntaxhighlighter__hidden" },
        h("slot", null)),
      h("div", { class: this.theme },
        h("div", { class: "syntaxhighlighter__code-toolbar" },
          h("pre", { class: `language-${this.language}` },
            h("code", { id: "syntaxhighlighter__ctc-target", class: `language-${this.language}`, innerHTML: this.encodeContent(this.content) })),
          h("div", { class: "syntaxhighlighter__toolbar" },
            h("div", { class: "syntaxhighlighter__toolbar-item" },
              h("span", { class: "syntaxhighlighter__language-label" }, this.language.toUpperCase())),
            h("div", { class: "syntaxhighlighter__toolbar-item" },
              h("button", { id: "syntaxhighlighter__ctc-button", class: "syntaxhighlighter__copy-button", "data-clipboard-target": "#syntaxhighlighter__ctc-target" }, this.copyButtonLabel)))))));
  }
  encodeContent(str) {
    if (!str) {
      return undefined;
    }
    return Prism.util.encode(str);
  }
  static get is() { return "syntax-highlighter"; }
  static get originalStyleUrls() { return {
    "$": ["syntax-highlighter.css"]
  }; }
  static get styleUrls() { return {
    "$": ["syntax-highlighter.css"]
  }; }
  static get properties() { return {
    "content": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The content to show in the syntax highlighter element"
      },
      "attribute": "content",
      "reflect": true
    },
    "theme": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "'dark' | 'light'",
        "resolved": "\"dark\" | \"light\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "dark",
            "name": "default"
          }],
        "text": "The theme to use, one of light or dark"
      },
      "attribute": "theme",
      "reflect": true,
      "defaultValue": "'dark'"
    },
    "language": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "html",
            "name": "default"
          }],
        "text": "The language to highlight for"
      },
      "attribute": "language",
      "reflect": true,
      "defaultValue": "'html'"
    },
    "copyButtonLabel": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "This is primarily for if you want to provide i18n with your syntax highlighted component",
            "name": "remark"
          }, {
            "text": "\"Kopieer naar klembord\"",
            "name": "example"
          }, {
            "text": "\"Copy to clipboard\"",
            "name": "default"
          }],
        "text": "The text inside the \"copy to clipboard\" button"
      },
      "attribute": "copy-button-label",
      "reflect": true,
      "defaultValue": "'Copy to clipboard'"
    }
  }; }
  static get events() { return [{
      "method": "clipboardJsError",
      "name": "clipboardJsError",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "text": "You can use this to, for example, show notifications to users",
            "name": "remark"
          }, {
            "text": "This event will bubble up through the DOM",
            "name": "remark"
          }, {
            "text": "undefined",
            "name": "default"
          }, {
            "text": "```html\n<body>\n\t<syntax-highlighter id=\"example-highlight\" theme=\"dark\" language=\"typescript\" content=\"console.log('example')\" />\n\t<script>\n\t\tconst syntaxHighlighterElement = document.querySelector('#example-highlight');\n\t\tsyntaxHighlighterElement.addEventListener('clipboardJsError', event => {\n\t\t\tconsole.log('handling');\n\t\t});\n\t</script>\n</body>\n```",
            "name": "example"
          }],
        "text": "The callback that will be fired when ClipboardJS fails to copy the text"
      },
      "complexType": {
        "original": "ClipboardJSEvent",
        "resolved": "ClipboardJSEvent",
        "references": {
          "ClipboardJSEvent": {
            "location": "import",
            "path": "../interfaces"
          }
        }
      }
    }]; }
}