@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/esm/vega-code-block.entry.js

@@ -0,0 +1,4069 @@
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d0a47531.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-58cf8aa6.js';
+import { t as trashCan } from './trash-can-8819a939.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-6083d518.js';
+import { f as VegaChange, a as VegaClick, d as domNodeSubjectFactory, k as VegaRemove } from './dom-node-subject-factory-eb6bba5d.js';
+import { X as CodeLanguage } from './code-block-8b5bd928.js';
+import { a as arrayToClassString } from './ui-ed1283bb.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-480d3b54.js';
+import { d as deepEqual } from './object-261e7344.js';
+import { T as TranslationSlimmer } from './translation-slimmer-e6b130bf.js';
+import { A as AutoRunWhenReRenderTaskQueueSlimmer, S as ShadowSelection, a as ShadowSelectionPolyfill, b as SelectionController } from './selection-controller-dd4f4407.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { o as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-820393ad.js';
+import { d as debounce } from './timer-9321173b.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1142fb79.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
+import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
+import './icon-manager-638dd4d4.js';
+import './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import './dynamic-slimmer-90b8af32.js';
+import './observer-3959f9dd.js';
+import './type-guard-158f6d7a.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './string-a953eafc.js';
+import './dark-mode-style-controller-2ada8e22.js';
+import './static-subject-title-ca83d6b6.js';
+import './internal-vega-event-manager-56c6469a.js';
+import './translation-71e0711d.js';
+import './synchronize-task-queue-ac8acc3b.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-0fbe8fb0.js';
+import './index-44c794b4.js';
+
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The code block editor renderer class.
+ */
+class VegaCodeBlockRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.languageDropdownProps = {
+      searchable: false,
+    };
+    this.languageOptions = Object.keys(CodeLanguage).map((key) => {
+      return { id: CodeLanguage[key], displayName: key };
+    });
+    /**
+     * Handle the code language update.
+     *
+     * @param {HTMLVegaInputSelectElement} node - The language select element.
+     */
+    this.handleLanguageChange = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (payload) => {
+        var _a;
+        this.valueController.updateValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.code, payload.detail);
+      });
+    };
+    /**
+     * Handle the code language update.
+     *
+     * @param {HTMLVegaButtonCircleElement} node - The delete button.
+     */
+    this.handleDeleteClick = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, () => {
+        const event = this.removeEventEmitter.emit();
+        if (!event.defaultPrevented) {
+          this.host.remove();
+        }
+      });
+    };
+  }
+  /**
+   * Get the toolbar container element ref.
+   *
+   * @returns {HTMLDivElement} - The div element.
+   */
+  getToolbarContainerRef() {
+    return this.toolbarContainerRef;
+  }
+  /**
+   * Render the code block editor toolbar element or copy element.
+   *
+   * @returns {HTMLElement} - The code block operate action button.
+   */
+  render() {
+    return (h(Fragment, null,
+      h("div", { part: "editor-toolbar", contenteditable: false, class: {
+          'editor-toolbar': !this.readOnly,
+          'copy-button-container': this.showCopyButton && this.readOnly,
+        }, ref: (node) => (this.toolbarContainerRef = node) },
+        this.renderEditorToolbar(),
+        this.copyButtonRenderer.render()),
+      this.contentRenderer.render()));
+  }
+  /**
+   * Render a language select and delete button.
+   *
+   * @returns {Nullable<HTMLElement>} The editor toolbar container element.
+   */
+  renderEditorToolbar() {
+    var _a, _b;
+    if (!this.readOnly) {
+      return (h(Fragment, null,
+        h("vega-input-select", { source: this.languageOptions, value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.language) !== null && _b !== void 0 ? _b : '', disabled: this.disabled, placeholder: this.translationSlimmer.t('Select Language'), size: "small", vegaDropdownProps: this.languageDropdownProps, exportparts: "select-container, selected-box, placeholder, toggle-icon-container, toggle-icon", ref: this.handleLanguageChange }),
+        h("vega-button-circle", { key: "delete-button", disabled: this.disabled, label: this.translationSlimmer.t('Delete Code'), icon: VegaInternalIconManager.getIconKey('trash-can'), iconColor: "text-secondary", variant: "icon-only", size: "extra-small", ref: this.handleDeleteClick })));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'trash-can': trashCan,
+  });
+})();
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "readOnly", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "disabled", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "showCopyButton", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "value", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "contentRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "valueController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "removeEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "translationSlimmer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "copyButtonRenderer", void 0);
+
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The code block content renderer class.
+ */
+class VegaCodeBlockContentRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The code input area focus.
+     */
+    this.handleFocus = () => {
+      if (!this.readOnly && !this.disabled) {
+        this.host.classList.add('focus');
+      }
+    };
+    /**
+     * The code input area blur.
+     */
+    this.handleBlur = () => {
+      this.host.classList.remove('focus');
+    };
+  }
+  /**
+   * Get the editable root element.
+   *
+   * @returns {HTMLElement} - The root element.
+   */
+  getCodeContentContainerRef() {
+    return this.codeContentContainerRef;
+  }
+  /**
+   * Add focus and blur event listener.
+   */
+  registerEventListener() {
+    if (this.codeContentContainerRef) {
+      this.codeContentContainerRef.addEventListener('focusin', this.handleFocus);
+      this.codeContentContainerRef.addEventListener('focusout', this.handleBlur);
+    }
+  }
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener() {
+    if (this.codeContentContainerRef) {
+      this.codeContentContainerRef.removeEventListener('focusin', this.handleFocus);
+      this.codeContentContainerRef.removeEventListener('focusout', this.handleBlur);
+    }
+  }
+  /**
+   * Render the code content.
+   *
+   * @returns {HTMLElement} - The code element.
+   */
+  render() {
+    var _a;
+    const codeNodes = this.contentParseController.parseCode();
+    const language = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.language) || '';
+    return (h(Fragment, null,
+      h("style", null, this.getLineNumberStyleVariable(codeNodes)),
+      h("code", { role: "textbox", tabIndex: 0, spellcheck: false, ref: (node) => (this.codeContentContainerRef = node), contenteditable: this.readOnly || this.disabled ? false : true, "data-language": language, innerHTML: codeNodes
+          .map((codeNode) => this.renderCodeNode(codeNode))
+          .join('') })));
+  }
+  /**
+   * Render the code node the html element.
+   *
+   * @param {CodeNodeType} codeNode - The code node object.
+   * @returns {string} - The html element.
+   */
+  renderCodeNode(codeNode) {
+    const { key, className, mark, text } = codeNode;
+    return `<span key='${key}' class='${className}' data-mark='${mark}' data-index='${key}'>${text || ' '}</span>`;
+  }
+  /**
+   * Dynamic calculate line number element width and update the margin and padding variable.
+   *
+   * @param {CodeNodeType[]} codeNodes - The code node array.
+   * @returns {string} - The style content.
+   */
+  getLineNumberStyleVariable(codeNodes) {
+    const lineCountArray = codeNodes.filter((item) => {
+      return item.text === '\n';
+    });
+    const singleTextLength = 10;
+    const gap = 16;
+    const space = (lineCountArray.length + 1).toString().length * singleTextLength;
+    return `code{--v-code-line-number-width:${space}px;--v-code-line-number-ml:-${space + gap}px;--v-code-block-pl:${space + gap}px}`;
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "readOnly", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "disabled", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "value", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "contentParseController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCodeBlockContentRenderer.prototype, "selectionController", void 0);
+__decorate$8([
+  MapToComponentMethod('componentDidLoad')
+], VegaCodeBlockContentRenderer.prototype, "registerEventListener", null);
+__decorate$8([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCodeBlockContentRenderer.prototype, "unregisterEventListener", null);
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The component value controller.
+ */
+class VegaCodeBlockValueController extends VegaSlimmer {
+  /**
+   * Update the component value if code content or code language update.
+   *
+   * @param {string} code - The new code content.
+   * @param {string} language - The new code language.
+   */
+  updateValue(code, language) {
+    if (!this.value || this.value.code !== code || this.value.language !== language) {
+      this.value = {
+        language: language,
+        code,
+      };
+      this.changeEventEmitter.emit(this.value);
+    }
+  }
+  /**
+   * Set a default value if the value is not defined.
+   */
+  initialValue() {
+    if (!this.value) {
+      this.value = { code: '', language: 'plainText' };
+    }
+  }
+}
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaCodeBlockValueController.prototype, "value", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaCodeBlockValueController.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], VegaCodeBlockValueController.prototype, "initialValue", null);
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Parse the code content to different tokens.
+ */
+class CodeContentParseController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.codeNodes = [];
+  }
+  /**
+   * Get the current rendering code node array.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  getCurrentCodeNodes() {
+    return this.codeNodes;
+  }
+  /**
+   * Split the code content to code node array. The default parse used if the language is not defined.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  parseCode() {
+    const parsers = [
+      this.prismCodeHighlightParser,
+      this.defaultCodeHighlightParser,
+    ];
+    let result = [];
+    for (const parser of parsers) {
+      if (parser.canParse()) {
+        result = parser.parse();
+        break;
+      }
+    }
+    this.codeNodes = result;
+    return result;
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], CodeContentParseController.prototype, "prismCodeHighlightParser", void 0);
+__decorate$6([
+  MapToComponentField()
+], CodeContentParseController.prototype, "defaultCodeHighlightParser", void 0);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The class used to control the code block input cursor.
+ */
+class VegaCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.selectionState = null;
+    this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, VegaCodeBlockSelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      // add await Promise.resolve to put the code behind to a micro task
+      await Promise.resolve();
+      const selection = this.getSelection();
+      const range = this.createNextRange();
+      if (selection && range) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    };
+  }
+  /**
+   * Get current range instance.
+   *
+   * @returns {Nullable<Range>} - The range instance or null.
+   */
+  getCurrentRange() {
+    const selection = this.getSelection();
+    if (selection.rangeCount) {
+      return selection.getRangeAt(0);
+    }
+  }
+  /**
+   * We need to store the selection state if the selection is a ShadowSelection, because the range is out of date in `input` event.
+   *
+   * @param {VegaRangeLike} range - The range like object.
+   */
+  storeInputStaticRange(range) {
+    const selection = this.getSelection();
+    if (selection instanceof ShadowSelection) {
+      this.selectionState = {
+        contentOffset: this.getContentOffsetByRange(range),
+        currentNodeOffset: 0,
+      };
+    }
+  }
+  /**
+   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue.
+   *
+   * @param {Nullable<number>} [offset] - Set the range start offset to current position.
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false.
+   */
+  enqueueSelectionRangeFutureState(offset, immediatelyRun = false) {
+    if (offset || offset === 0) {
+      this.selectionState = {
+        contentOffset: offset,
+        currentNodeOffset: 0,
+      };
+    }
+    else {
+      const selection = this.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        // If the selection is a ShadowSelection, we need to use the selectionState update in method `storeInputStaticRange`.
+        // Otherwise, we can get the content offset from the selection range.
+        if (!(selection instanceof ShadowSelection)) {
+          const range = selection.getRangeAt(0);
+          this.selectionState = {
+            contentOffset: this.getContentOffsetByRange(range),
+            currentNodeOffset: range.startOffset,
+          };
+        }
+      }
+    }
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Component lifecycle
+   */
+  addSelectionChangeEventListener() {
+    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Component lifecycle
+   */
+  removeSelectionChangeEventListener() {
+    document.removeEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Create the code block shadowRoot new range instance from the next selection state.
+   *
+   * @returns {Nullable<Range>} - The new range instance.
+   */
+  createNextRange() {
+    if (this.selectionState) {
+      const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+      const rangeStartNodeSelector = this.getCursorNodeSelectorAndUpdateOffset();
+      let startOffset = this.selectionState.currentNodeOffset;
+      const cursorSpan = codeContentContainerRef.querySelector(rangeStartNodeSelector);
+      if (cursorSpan) {
+        const range = new Range();
+        startOffset = Math.min(cursorSpan.firstChild.textContent.length, startOffset);
+        range.setStart(cursorSpan.firstChild, startOffset);
+        range.setEnd(cursorSpan.firstChild, startOffset);
+        this.selectionState = null;
+        return range;
+      }
+    }
+  }
+  /**
+   * Get the code block selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    return ShadowSelectionPolyfill.getSelection(this.host.shadowRoot);
+  }
+  /**
+   * Get the current input cursor offset of the code content, so we can get the next cursor node according the offset after re-render.
+   *
+   * @example
+   * Code content: const t = new Date();\nconsole.log(t);
+   * Render result: <span>const</span><span> t</span><span> = </span><span>new</span><span> Date();</span><span>\n</span><span>console.</span><span>log</span><span>(t)</span>
+   * Current range: {startContainer: [The last span], startOffset:2}
+   * Offset: 26
+   * @param {VegaRangeLike} range - The current selection range like object.
+   * @returns {number} - The index of the cursor position.
+   */
+  getContentOffsetByRange(range) {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    let { startContainer, startOffset } = range;
+    if (startContainer.nodeName === 'SPAN' && startContainer.childNodes.length > 1) {
+      startContainer = startContainer.childNodes[Math.max(0, startOffset - 1)];
+      startOffset = this.getTextContent(startContainer).length;
+    }
+    const spanNodes = Array.from(codeContentContainerRef.childNodes);
+    let offset = 0;
+    const startSpan = startContainer.nodeName === 'BR' || startContainer.nodeType === Node.TEXT_NODE
+      ? startContainer.parentElement
+      : startContainer;
+    for (let i = 0; i < spanNodes.length; i++) {
+      if (startContainer === codeContentContainerRef) {
+        if (i < startOffset) {
+          offset += this.getTextContent(spanNodes[i]).length;
+        }
+      }
+      else {
+        if (spanNodes[i] === startSpan) {
+          if (startSpan.childNodes.length === 1) {
+            offset += startOffset;
+          }
+          else {
+            for (let j = 0; j < startSpan.childNodes.length; j++) {
+              if (startSpan.childNodes[j] === startContainer) {
+                offset += startOffset;
+                break;
+              }
+              else {
+                offset += this.getTextContent(startSpan.childNodes[j]).length;
+              }
+            }
+          }
+          break;
+        }
+        else {
+          offset += this.getTextContent(spanNodes[i]).length;
+        }
+      }
+    }
+    return offset;
+  }
+  /**
+   * Get the range start container selector after the code content re-render and update the offset of current node.
+   *
+   * @returns {string} - The span which has attribute data-index=[index].
+   */
+  getCursorNodeSelectorAndUpdateOffset() {
+    const codeNodes = this.contentParseController.getCurrentCodeNodes();
+    const { contentOffset } = this.selectionState;
+    let nodeIndex = 0;
+    if (!this.value || !this.value.code || contentOffset >= this.value.code.length) {
+      this.selectionState.currentNodeOffset = codeNodes[codeNodes.length - 1].text.length;
+      nodeIndex = codeNodes.length - 1;
+    }
+    else {
+      let text = '';
+      for (let i = 0; i < codeNodes.length; i++) {
+        text += codeNodes[i].text;
+        if (text.length >= contentOffset) {
+          this.selectionState.currentNodeOffset = Math.max(0, codeNodes[i].text.length - (text.length - contentOffset));
+          nodeIndex = i;
+          break;
+        }
+      }
+    }
+    // The cursor position is incorrect in firefox when cursor node is line break node.
+    if (codeNodes[nodeIndex].text === '\n' && this.selectionState.currentNodeOffset > 0) {
+      nodeIndex++;
+      this.selectionState.currentNodeOffset = 0;
+    }
+    return `span[data-index="${nodeIndex}"]`;
+  }
+  /**
+   * Notify the code content selection change event.
+   */
+  handleSelectionChange() {
+    const selection = this.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCodeBlockSelectionChange), { detail: true });
+    }
+    else {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCodeBlockSelectionChange), { detail: false });
+    }
+  }
+  /**
+   * Get the node text content, the BR node will return `\n`;
+   *
+   * @param {Node} node - The node instance.
+   * @returns {string} - The node text content.
+   */
+  getTextContent(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+    else if (node.nodeName === 'BR') {
+      return '\n';
+    }
+    else {
+      return node.innerText;
+    }
+  }
+}
+// Must make sure the debounce time will not greater than the RTE selection range debounce time.
+VegaCodeBlockSelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = Math.min(SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, 40);
+__decorate$5([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "host", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "contentRenderer", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaCodeBlockSelectionController.prototype, "contentParseController", void 0);
+__decorate$5([
+  MapToComponentMethod('componentDidLoad')
+], VegaCodeBlockSelectionController.prototype, "addSelectionChangeEventListener", null);
+__decorate$5([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCodeBlockSelectionController.prototype, "removeSelectionChangeEventListener", null);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The class used to control the code block modify content action.
+ */
+class CodeBlockInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertCompositionTextEndFlag = true;
+    /**
+     * Stop the input event bubbles and update the code value.
+     *
+     * @param {InputEvent} e - The input event object.
+     */
+    this.handleInputEvent = (e) => {
+      this.stopEventPropagation(e);
+      this.updateCodeContent();
+    };
+    /**
+     * Prevent paste the file into code block. Prevent to delete the last space.
+     *
+     * @param {InputEvent} e - The input event object.
+     */
+    this.handleBeforeInput = (e) => {
+      e.stopPropagation();
+      const inputType = e.inputType;
+      if (inputType === 'insertFromPaste' &&
+        e.dataTransfer &&
+        e.dataTransfer.files &&
+        e.dataTransfer.files.length) {
+        e.preventDefault();
+        return;
+      }
+      else if (inputType === 'deleteContentBackward') {
+        if (!this.value || !this.value.code || this.value.code === ' ') {
+          e.preventDefault();
+          return;
+        }
+        // In low version firefox, the selected text could not delete when press delete key, so we delete it manually.
+        const range = this.selectionController.getCurrentRange();
+        if (range && !range.collapsed) {
+          const contentStartOffset = this.getContentStartOffset(range);
+          const newValue = this.deleteSelectedText(contentStartOffset, range.toString().length);
+          e.preventDefault();
+          this.valueController.updateValue(newValue, this.value.language);
+          this.selectionController.enqueueSelectionRangeFutureState(contentStartOffset);
+          return;
+        }
+      }
+      this.storeStaticRange(e);
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input starts. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+     *
+     * @param {CompositionEvent} e The composition event instance
+     */
+    this.handleCompositionStart = (e) => {
+      this.insertCompositionTextEndFlag = false;
+      this.stopEventPropagation(e);
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input ends. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+     *
+     * @param {CompositionEvent} e The composition event instance
+     */
+    this.handleCompositionEnd = (e) => {
+      this.insertCompositionTextEndFlag = true;
+      this.stopEventPropagation(e);
+      this.updateCodeContent();
+    };
+  }
+  /**
+   * Stop `beforeinput` and `input` event bubbles to parent element.
+   */
+  registerInputEvent() {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    if (codeContentContainerRef) {
+      codeContentContainerRef.addEventListener('compositionstart', this.handleCompositionStart);
+      codeContentContainerRef.addEventListener('compositionend', this.handleCompositionEnd);
+      codeContentContainerRef.addEventListener('beforeinput', this.handleBeforeInput);
+      codeContentContainerRef.addEventListener('input', this.handleInputEvent);
+    }
+  }
+  /**
+   * Remove the event listener.
+   */
+  unregisterEventListener() {
+    const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+    if (codeContentContainerRef) {
+      codeContentContainerRef.removeEventListener('beforeinput', this.handleBeforeInput);
+      codeContentContainerRef.removeEventListener('input', this.handleInputEvent);
+      codeContentContainerRef.removeEventListener('compositionstart', this.handleCompositionStart);
+      codeContentContainerRef.removeEventListener('compositionend', this.handleCompositionEnd);
+    }
+  }
+  /**
+   * Stop the event bubbles.
+   *
+   * @param {Event} e - The event object.
+   */
+  stopEventPropagation(e) {
+    e.stopPropagation();
+  }
+  /**
+   * Delete the selected text manually.
+   *
+   * @param {number} contentStartOffset - The start index.
+   * @param {number} length - The selected text length.
+   * @returns {string} - The content after delete.
+   */
+  deleteSelectedText(contentStartOffset, length) {
+    let oldValue = this.value.code;
+    if (length >= oldValue.length) {
+      oldValue = '';
+    }
+    else {
+      oldValue = oldValue.slice(0, contentStartOffset) + oldValue.slice(contentStartOffset + length);
+    }
+    return oldValue;
+  }
+  /**
+   * Calculate caret position of the code content.
+   *
+   * @param {Range} param - The range instance.
+   * @returns {number} - The caret position.
+   */
+  getContentStartOffset({ startContainer, startOffset }) {
+    const startSpan = startContainer.nodeType === Node.TEXT_NODE
+      ? startContainer.parentElement
+      : startContainer;
+    const currentNodes = this.contentParseController.getCurrentCodeNodes();
+    let index = Number(startSpan.dataset.index);
+    if (startSpan.nodeName === 'CODE') {
+      index = startOffset;
+      startOffset = 0;
+    }
+    let beforeText = '';
+    for (let i = 0; i < index; i++) {
+      beforeText += currentNodes[i].text;
+    }
+    return beforeText.length + startOffset;
+  }
+  /**
+   * Store the static range of the input event if the `insertCompositionTextEndFlag` is true.
+   * The static range will be used to get the correct cursor position. In safari browser the range from the ShadowSelectionPolyfill is incorrect.
+   *
+   * @param {InputEvent} e - The input event object.
+   */
+  storeStaticRange(e) {
+    const range = this.selectionController.getCurrentRange();
+    if (this.insertCompositionTextEndFlag && range) {
+      const { startContainer, startOffset } = range;
+      const dataLength = this.getInsertDataLength(e);
+      this.selectionController.storeInputStaticRange({
+        startContainer: startContainer,
+        startOffset: Math.max(0, startOffset + dataLength),
+      });
+    }
+  }
+  //TODO: Refactor the update range logic to unified the flow.
+  /**
+   * Calculates the length of the inserted data based on the input event type.
+   *
+   * @param {InputEvent} e - The input event object.
+   * @returns {number} - The length of the inserted data.
+   */
+  getInsertDataLength(e) {
+    const { data, inputType } = e;
+    switch (inputType) {
+      case 'insertText':
+        return data.length; // For insert text, we return the length of the inserted text.
+      case 'insertParagraph':
+      case 'insertLineBreak':
+        return 1; // For paragraph or line break, we consider it as a single character.
+      case 'deleteContentBackward':
+        return -1; // For delete backward, we return -1.
+      default:
+        return 0; // For other input types, we return 0.
+    }
+  }
+  /**
+   * Update the code content after user modify action.
+   */
+  updateCodeContent() {
+    var _a;
+    if (this.insertCompositionTextEndFlag) {
+      this.selectionController.enqueueSelectionRangeFutureState();
+      const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+      // Remove the unnecessary line break tag before get the code content.
+      this.removeUnnecessaryLineBreak(codeContentContainerRef.querySelector('br'));
+      let newContent = codeContentContainerRef.innerText;
+      if (newContent.endsWith('\n\n')) {
+        newContent = newContent.slice(0, newContent.length - '\n'.length) + ' ';
+      }
+      if (this.isInsertSingleLineBreakAtEnd(newContent)) {
+        newContent = newContent + ' ';
+      }
+      if (newContent.endsWith('\n')) {
+        newContent = newContent.slice(0, newContent.length - '\n'.length);
+      }
+      this.valueController.updateValue(newContent, (_a = this.value) === null || _a === void 0 ? void 0 : _a.language);
+    }
+  }
+  /**
+   * If remove all content of span element, browser will create a new <br/> element, we need remove the unnecessary element.
+   * In firefox, the new <br/> element will append in span element when insert line break at end of content, and the current element should not remove.
+   *
+   * @param {Nullable<HTMLElement>} br - The new create line break element.
+   */
+  removeUnnecessaryLineBreak(br) {
+    if (br && br.parentElement && br.parentElement.tagName !== 'SPAN') {
+      br.remove();
+    }
+  }
+  /**
+   * In some low versions of firefox, there are only one line break tag when insert line break at end of content. We need check this and add white space to make the line break work properly.
+   *
+   * @param {string} newValue - The new code content.
+   * @returns {boolean} - Boolean result.
+   */
+  isInsertSingleLineBreakAtEnd(newValue) {
+    if ((!this.value && newValue === ' \n') || (this.value && this.value.code + '\n' === newValue)) {
+      return true;
+    }
+    return false;
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "selectionController", void 0);
+__decorate$4([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "contentRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "valueController", void 0);
+__decorate$4([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "contentParseController", void 0);
+__decorate$4([
+  MapToComponentField()
+], CodeBlockInputController.prototype, "value", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], CodeBlockInputController.prototype, "registerInputEvent", null);
+__decorate$4([
+  MapToComponentMethod('disconnectedCallback')
+], CodeBlockInputController.prototype, "unregisterEventListener", null);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Control the component focus state.
+ */
+class VegaCodeBlockFocusController extends VegaSlimmer {
+  /**
+   * Focus the code block and update the selection range offset to end.
+   */
+  focusAndUpdateSelection() {
+    if (!this.disabled && !this.readOnly) {
+      const codeContentContainerRef = this.contentRenderer.getCodeContentContainerRef();
+      if (codeContentContainerRef) {
+        codeContentContainerRef.focus();
+        const offset = this.value && this.value.code && this.value.code !== ' ' ? this.value.code.length : 0;
+        this.selectionController.enqueueSelectionRangeFutureState(offset, true);
+      }
+    }
+  }
+  /**
+   * Remove the focus class when component disabled or readonly.
+   */
+  removeFocusAfterDisabled() {
+    if (this.disabled || this.readOnly) {
+      this.host.classList.remove('focus');
+    }
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "value", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "readOnly", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "disabled", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "contentRenderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaCodeBlockFocusController.prototype, "selectionController", void 0);
+__decorate$3([
+  MapToComponentMethod('doFocus')
+], VegaCodeBlockFocusController.prototype, "focusAndUpdateSelection", null);
+__decorate$3([
+  MapToComponentMethod('watchEditableChange')
+], VegaCodeBlockFocusController.prototype, "removeFocusAfterDisabled", null);
+
+const copy = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><g clip-path="url(#clip0_70002_574)"><path fill="currentColor" d="M11.7794 1.65539L10.3439 0.219844C10.2044 0.0790078 10.0122 0 9.81303 0H5.97865C5.15014 0 4.47865 0.671719 4.47865 1.5L4.47911 7.5C4.49975 8.32969 5.1724 9 5.99975 9H10.4997C11.3247 9 11.9997 8.325 11.9997 7.5V2.18555C11.9997 1.9868 11.9201 1.79602 11.7794 1.65539ZM10.8747 7.5C10.8747 7.70709 10.7068 7.875 10.4997 7.875H5.97865C5.77151 7.875 5.60365 7.70709 5.60365 7.5V1.50305C5.60365 1.29595 5.77156 1.12805 5.97865 1.12805H8.97865L8.99975 2.25C8.99975 2.66414 9.33561 3 9.74975 3H10.8537V7.5H10.8747ZM6.37475 10.5C6.37475 10.7071 6.20684 10.875 5.99975 10.875H1.47865C1.27151 10.875 1.10365 10.7071 1.10365 10.5L1.12428 4.50234C1.12428 4.29525 1.29218 4.12734 1.49928 4.12734H3.74975V3H1.49951C0.670996 3 -0.000488281 3.67148 -0.000488281 4.5L-0.000258594 10.5C-0.000207031 11.3273 0.671465 12 1.49975 12H5.99975C6.82475 12 7.49975 11.325 7.49975 10.5V9.75H6.39584L6.37475 10.5Z"/></g><defs><clipPath id="clip0_70002_574"><rect width="12" height="12" fill="currentColor"/></clipPath></defs></svg>`,
+};
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaCodeBlockCopyButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Copy the code.
+     *
+     * @param {HTMLVegaButtonCircleElement} node - The copy button.
+     */
+    this.handleCopyClick = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, async () => {
+        var _a;
+        const content = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.code) || '';
+        if (content && globalThis.navigator && globalThis.navigator.clipboard) {
+          clearTimeout(this.updateLabelTimer);
+          await globalThis.navigator.clipboard.writeText(content);
+          const oldTooltip = node.label;
+          node.label = this.translationSlimmer.t('Copied');
+          this.updateLabelTimer = setTimeout(() => {
+            if (node) {
+              node.label = oldTooltip;
+            }
+          }, VegaCodeBlockCopyButtonRenderer.RESET_TOOLTIP_TIME);
+        }
+      });
+    };
+  }
+  /**
+   * Render a copy button.
+   *
+   * @returns {Nullable<HTMLElement>} The button element.
+   */
+  render() {
+    if (this.showCopyButton && this.readOnly) {
+      return (h("vega-button-circle", { key: "copy-button", label: this.translationSlimmer.t('Copy Code'), class: "copy-code-button", icon: VegaInternalIconManager.getIconKey('copy'), iconColor: "text-secondary", variant: "icon-only", size: "extra-small", ref: this.handleCopyClick }));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    copy: copy,
+  });
+})();
+VegaCodeBlockCopyButtonRenderer.RESET_TOOLTIP_TIME = 1000;
+__decorate$2([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "value", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "readOnly", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "showCopyButton", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "translationSlimmer", void 0);
+
+var prism = createCommonjsModule(function (module) {
+/* **********************************************
+     Begin prism-core.js
+********************************************** */
+
+/// <reference lib="WebWorker"/>
+
+var _self = (typeof window !== 'undefined')
+	? window   // if in browser
+	: (
+		(typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope)
+			? self // if in worker
+			: {}   // if in node js
+	);
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+var Prism = (function (_self) {
+
+	// Private helper vars
+	var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
+	var uniqueId = 0;
+
+	// The grammar object for plaintext
+	var plainTextGrammar = {};
+
+
+	var _ = {
+		/**
+		 * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the
+		 * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
+		 * additional languages or plugins yourself.
+		 *
+		 * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
+		 *
+		 * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
+		 * empty Prism object into the global scope before loading the Prism script like this:
+		 *
+		 * ```js
+		 * window.Prism = window.Prism || {};
+		 * Prism.manual = true;
+		 * // add a new <script> to load Prism's script
+		 * ```
+		 *
+		 * @default false
+		 * @type {boolean}
+		 * @memberof Prism
+		 * @public
+		 */
+		manual: _self.Prism && _self.Prism.manual,
+		/**
+		 * By default, if Prism is in a web worker, it assumes that it is in a worker it created itself, so it uses
+		 * `addEventListener` to communicate with its parent instance. However, if you're using Prism manually in your
+		 * own worker, you don't want it to do this.
+		 *
+		 * By setting this value to `true`, Prism will not add its own listeners to the worker.
+		 *
+		 * You obviously have to change this value before Prism executes. To do this, you can add an
+		 * empty Prism object into the global scope before loading the Prism script like this:
+		 *
+		 * ```js
+		 * window.Prism = window.Prism || {};
+		 * Prism.disableWorkerMessageHandler = true;
+		 * // Load Prism's script
+		 * ```
+		 *
+		 * @default false
+		 * @type {boolean}
+		 * @memberof Prism
+		 * @public
+		 */
+		disableWorkerMessageHandler: _self.Prism && _self.Prism.disableWorkerMessageHandler,
+
+		/**
+		 * A namespace for utility methods.
+		 *
+		 * All function in this namespace that are not explicitly marked as _public_ are for __internal use only__ and may
+		 * change or disappear at any time.
+		 *
+		 * @namespace
+		 * @memberof Prism
+		 */
+		util: {
+			encode: function encode(tokens) {
+				if (tokens instanceof Token) {
+					return new Token(tokens.type, encode(tokens.content), tokens.alias);
+				} else if (Array.isArray(tokens)) {
+					return tokens.map(encode);
+				} else {
+					return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
+				}
+			},
+
+			/**
+			 * Returns the name of the type of the given value.
+			 *
+			 * @param {any} o
+			 * @returns {string}
+			 * @example
+			 * type(null)      === 'Null'
+			 * type(undefined) === 'Undefined'
+			 * type(123)       === 'Number'
+			 * type('foo')     === 'String'
+			 * type(true)      === 'Boolean'
+			 * type([1, 2])    === 'Array'
+			 * type({})        === 'Object'
+			 * type(String)    === 'Function'
+			 * type(/abc+/)    === 'RegExp'
+			 */
+			type: function (o) {
+				return Object.prototype.toString.call(o).slice(8, -1);
+			},
+
+			/**
+			 * Returns a unique number for the given object. Later calls will still return the same number.
+			 *
+			 * @param {Object} obj
+			 * @returns {number}
+			 */
+			objId: function (obj) {
+				if (!obj['__id']) {
+					Object.defineProperty(obj, '__id', { value: ++uniqueId });
+				}
+				return obj['__id'];
+			},
+
+			/**
+			 * Creates a deep clone of the given object.
+			 *
+			 * The main intended use of this function is to clone language definitions.
+			 *
+			 * @param {T} o
+			 * @param {Record<number, any>} [visited]
+			 * @returns {T}
+			 * @template T
+			 */
+			clone: function deepClone(o, visited) {
+				visited = visited || {};
+
+				var clone; var id;
+				switch (_.util.type(o)) {
+					case 'Object':
+						id = _.util.objId(o);
+						if (visited[id]) {
+							return visited[id];
+						}
+						clone = /** @type {Record<string, any>} */ ({});
+						visited[id] = clone;
+
+						for (var key in o) {
+							if (o.hasOwnProperty(key)) {
+								clone[key] = deepClone(o[key], visited);
+							}
+						}
+
+						return /** @type {any} */ (clone);
+
+					case 'Array':
+						id = _.util.objId(o);
+						if (visited[id]) {
+							return visited[id];
+						}
+						clone = [];
+						visited[id] = clone;
+
+						(/** @type {Array} */(/** @type {any} */(o))).forEach(function (v, i) {
+							clone[i] = deepClone(v, visited);
+						});
+
+						return /** @type {any} */ (clone);
+
+					default:
+						return o;
+				}
+			},
+
+			/**
+			 * Returns the Prism language of the given element set by a `language-xxxx` or `lang-xxxx` class.
+			 *
+			 * If no language is set for the element or the element is `null` or `undefined`, `none` will be returned.
+			 *
+			 * @param {Element} element
+			 * @returns {string}
+			 */
+			getLanguage: function (element) {
+				while (element) {
+					var m = lang.exec(element.className);
+					if (m) {
+						return m[1].toLowerCase();
+					}
+					element = element.parentElement;
+				}
+				return 'none';
+			},
+
+			/**
+			 * Sets the Prism `language-xxxx` class of the given element.
+			 *
+			 * @param {Element} element
+			 * @param {string} language
+			 * @returns {void}
+			 */
+			setLanguage: function (element, language) {
+				// remove all `language-xxxx` classes
+				// (this might leave behind a leading space)
+				element.className = element.className.replace(RegExp(lang, 'gi'), '');
+
+				// add the new `language-xxxx` class
+				// (using `classList` will automatically clean up spaces for us)
+				element.classList.add('language-' + language);
+			},
+
+			/**
+			 * Returns the script element that is currently executing.
+			 *
+			 * This does __not__ work for line script element.
+			 *
+			 * @returns {HTMLScriptElement | null}
+			 */
+			currentScript: function () {
+				if (typeof document === 'undefined') {
+					return null;
+				}
+				if (document.currentScript && document.currentScript.tagName === 'SCRIPT' && 1 < 2 /* hack to trip TS' flow analysis */) {
+					return /** @type {any} */ (document.currentScript);
+				}
+
+				// IE11 workaround
+				// we'll get the src of the current script by parsing IE11's error stack trace
+				// this will not work for inline scripts
+
+				try {
+					throw new Error();
+				} catch (err) {
+					// Get file src url from stack. Specifically works with the format of stack traces in IE.
+					// A stack will look like this:
+					//
+					// Error
+					//    at _.util.currentScript (http://localhost/components/prism-core.js:119:5)
+					//    at Global code (http://localhost/components/prism-core.js:606:1)
+
+					var src = (/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(err.stack) || [])[1];
+					if (src) {
+						var scripts = document.getElementsByTagName('script');
+						for (var i in scripts) {
+							if (scripts[i].src == src) {
+								return scripts[i];
+							}
+						}
+					}
+					return null;
+				}
+			},
+
+			/**
+			 * Returns whether a given class is active for `element`.
+			 *
+			 * The class can be activated if `element` or one of its ancestors has the given class and it can be deactivated
+			 * if `element` or one of its ancestors has the negated version of the given class. The _negated version_ of the
+			 * given class is just the given class with a `no-` prefix.
+			 *
+			 * Whether the class is active is determined by the closest ancestor of `element` (where `element` itself is
+			 * closest ancestor) that has the given class or the negated version of it. If neither `element` nor any of its
+			 * ancestors have the given class or the negated version of it, then the default activation will be returned.
+			 *
+			 * In the paradoxical situation where the closest ancestor contains __both__ the given class and the negated
+			 * version of it, the class is considered active.
+			 *
+			 * @param {Element} element
+			 * @param {string} className
+			 * @param {boolean} [defaultActivation=false]
+			 * @returns {boolean}
+			 */
+			isActive: function (element, className, defaultActivation) {
+				var no = 'no-' + className;
+
+				while (element) {
+					var classList = element.classList;
+					if (classList.contains(className)) {
+						return true;
+					}
+					if (classList.contains(no)) {
+						return false;
+					}
+					element = element.parentElement;
+				}
+				return !!defaultActivation;
+			}
+		},
+
+		/**
+		 * This namespace contains all currently loaded languages and the some helper functions to create and modify languages.
+		 *
+		 * @namespace
+		 * @memberof Prism
+		 * @public
+		 */
+		languages: {
+			/**
+			 * The grammar for plain, unformatted text.
+			 */
+			plain: plainTextGrammar,
+			plaintext: plainTextGrammar,
+			text: plainTextGrammar,
+			txt: plainTextGrammar,
+
+			/**
+			 * Creates a deep copy of the language with the given id and appends the given tokens.
+			 *
+			 * If a token in `redef` also appears in the copied language, then the existing token in the copied language
+			 * will be overwritten at its original position.
+			 *
+			 * ## Best practices
+			 *
+			 * Since the position of overwriting tokens (token in `redef` that overwrite tokens in the copied language)
+			 * doesn't matter, they can technically be in any order. However, this can be confusing to others that trying to
+			 * understand the language definition because, normally, the order of tokens matters in Prism grammars.
+			 *
+			 * Therefore, it is encouraged to order overwriting tokens according to the positions of the overwritten tokens.
+			 * Furthermore, all non-overwriting tokens should be placed after the overwriting ones.
+			 *
+			 * @param {string} id The id of the language to extend. This has to be a key in `Prism.languages`.
+			 * @param {Grammar} redef The new tokens to append.
+			 * @returns {Grammar} The new language created.
+			 * @public
+			 * @example
+			 * Prism.languages['css-with-colors'] = Prism.languages.extend('css', {
+			 *     // Prism.languages.css already has a 'comment' token, so this token will overwrite CSS' 'comment' token
+			 *     // at its original position
+			 *     'comment': { ... },
+			 *     // CSS doesn't have a 'color' token, so this token will be appended
+			 *     'color': /\b(?:red|green|blue)\b/
+			 * });
+			 */
+			extend: function (id, redef) {
+				var lang = _.util.clone(_.languages[id]);
+
+				for (var key in redef) {
+					lang[key] = redef[key];
+				}
+
+				return lang;
+			},
+
+			/**
+			 * Inserts tokens _before_ another token in a language definition or any other grammar.
+			 *
+			 * ## Usage
+			 *
+			 * This helper method makes it easy to modify existing languages. For example, the CSS language definition
+			 * not only defines CSS highlighting for CSS documents, but also needs to define highlighting for CSS embedded
+			 * in HTML through `<style>` elements. To do this, it needs to modify `Prism.languages.markup` and add the
+			 * appropriate tokens. However, `Prism.languages.markup` is a regular JavaScript object literal, so if you do
+			 * this:
+			 *
+			 * ```js
+			 * Prism.languages.markup.style = {
+			 *     // token
+			 * };
+			 * ```
+			 *
+			 * then the `style` token will be added (and processed) at the end. `insertBefore` allows you to insert tokens
+			 * before existing tokens. For the CSS example above, you would use it like this:
+			 *
+			 * ```js
+			 * Prism.languages.insertBefore('markup', 'cdata', {
+			 *     'style': {
+			 *         // token
+			 *     }
+			 * });
+			 * ```
+			 *
+			 * ## Special cases
+			 *
+			 * If the grammars of `inside` and `insert` have tokens with the same name, the tokens in `inside`'s grammar
+			 * will be ignored.
+			 *
+			 * This behavior can be used to insert tokens after `before`:
+			 *
+			 * ```js
+			 * Prism.languages.insertBefore('markup', 'comment', {
+			 *     'comment': Prism.languages.markup.comment,
+			 *     // tokens after 'comment'
+			 * });
+			 * ```
+			 *
+			 * ## Limitations
+			 *
+			 * The main problem `insertBefore` has to solve is iteration order. Since ES2015, the iteration order for object
+			 * properties is guaranteed to be the insertion order (except for integer keys) but some browsers behave
+			 * differently when keys are deleted and re-inserted. So `insertBefore` can't be implemented by temporarily
+			 * deleting properties which is necessary to insert at arbitrary positions.
+			 *
+			 * To solve this problem, `insertBefore` doesn't actually insert the given tokens into the target object.
+			 * Instead, it will create a new object and replace all references to the target object with the new one. This
+			 * can be done without temporarily deleting properties, so the iteration order is well-defined.
+			 *
+			 * However, only references that can be reached from `Prism.languages` or `insert` will be replaced. I.e. if
+			 * you hold the target object in a variable, then the value of the variable will not change.
+			 *
+			 * ```js
+			 * var oldMarkup = Prism.languages.markup;
+			 * var newMarkup = Prism.languages.insertBefore('markup', 'comment', { ... });
+			 *
+			 * assert(oldMarkup !== Prism.languages.markup);
+			 * assert(newMarkup === Prism.languages.markup);
+			 * ```
+			 *
+			 * @param {string} inside The property of `root` (e.g. a language id in `Prism.languages`) that contains the
+			 * object to be modified.
+			 * @param {string} before The key to insert before.
+			 * @param {Grammar} insert An object containing the key-value pairs to be inserted.
+			 * @param {Object<string, any>} [root] The object containing `inside`, i.e. the object that contains the
+			 * object to be modified.
+			 *
+			 * Defaults to `Prism.languages`.
+			 * @returns {Grammar} The new grammar object.
+			 * @public
+			 */
+			insertBefore: function (inside, before, insert, root) {
+				root = root || /** @type {any} */ (_.languages);
+				var grammar = root[inside];
+				/** @type {Grammar} */
+				var ret = {};
+
+				for (var token in grammar) {
+					if (grammar.hasOwnProperty(token)) {
+
+						if (token == before) {
+							for (var newToken in insert) {
+								if (insert.hasOwnProperty(newToken)) {
+									ret[newToken] = insert[newToken];
+								}
+							}
+						}
+
+						// Do not insert token which also occur in insert. See #1525
+						if (!insert.hasOwnProperty(token)) {
+							ret[token] = grammar[token];
+						}
+					}
+				}
+
+				var old = root[inside];
+				root[inside] = ret;
+
+				// Update references in other language definitions
+				_.languages.DFS(_.languages, function (key, value) {
+					if (value === old && key != inside) {
+						this[key] = ret;
+					}
+				});
+
+				return ret;
+			},
+
+			// Traverse a language definition with Depth First Search
+			DFS: function DFS(o, callback, type, visited) {
+				visited = visited || {};
+
+				var objId = _.util.objId;
+
+				for (var i in o) {
+					if (o.hasOwnProperty(i)) {
+						callback.call(o, i, o[i], type || i);
+
+						var property = o[i];
+						var propertyType = _.util.type(property);
+
+						if (propertyType === 'Object' && !visited[objId(property)]) {
+							visited[objId(property)] = true;
+							DFS(property, callback, null, visited);
+						} else if (propertyType === 'Array' && !visited[objId(property)]) {
+							visited[objId(property)] = true;
+							DFS(property, callback, i, visited);
+						}
+					}
+				}
+			}
+		},
+
+		plugins: {},
+
+		/**
+		 * This is the most high-level function in Prism’s API.
+		 * It fetches all the elements that have a `.language-xxxx` class and then calls {@link Prism.highlightElement} on
+		 * each one of them.
+		 *
+		 * This is equivalent to `Prism.highlightAllUnder(document, async, callback)`.
+		 *
+		 * @param {boolean} [async=false] Same as in {@link Prism.highlightAllUnder}.
+		 * @param {HighlightCallback} [callback] Same as in {@link Prism.highlightAllUnder}.
+		 * @memberof Prism
+		 * @public
+		 */
+		highlightAll: function (async, callback) {
+			_.highlightAllUnder(document, async, callback);
+		},
+
+		/**
+		 * Fetches all the descendants of `container` that have a `.language-xxxx` class and then calls
+		 * {@link Prism.highlightElement} on each one of them.
+		 *
+		 * The following hooks will be run:
+		 * 1. `before-highlightall`
+		 * 2. `before-all-elements-highlight`
+		 * 3. All hooks of {@link Prism.highlightElement} for each element.
+		 *
+		 * @param {ParentNode} container The root element, whose descendants that have a `.language-xxxx` class will be highlighted.
+		 * @param {boolean} [async=false] Whether each element is to be highlighted asynchronously using Web Workers.
+		 * @param {HighlightCallback} [callback] An optional callback to be invoked on each element after its highlighting is done.
+		 * @memberof Prism
+		 * @public
+		 */
+		highlightAllUnder: function (container, async, callback) {
+			var env = {
+				callback: callback,
+				container: container,
+				selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
+			};
+
+			_.hooks.run('before-highlightall', env);
+
+			env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
+
+			_.hooks.run('before-all-elements-highlight', env);
+
+			for (var i = 0, element; (element = env.elements[i++]);) {
+				_.highlightElement(element, async === true, env.callback);
+			}
+		},
+
+		/**
+		 * Highlights the code inside a single element.
+		 *
+		 * The following hooks will be run:
+		 * 1. `before-sanity-check`
+		 * 2. `before-highlight`
+		 * 3. All hooks of {@link Prism.highlight}. These hooks will be run by an asynchronous worker if `async` is `true`.
+		 * 4. `before-insert`
+		 * 5. `after-highlight`
+		 * 6. `complete`
+		 *
+		 * Some the above hooks will be skipped if the element doesn't contain any text or there is no grammar loaded for
+		 * the element's language.
+		 *
+		 * @param {Element} element The element containing the code.
+		 * It must have a class of `language-xxxx` to be processed, where `xxxx` is a valid language identifier.
+		 * @param {boolean} [async=false] Whether the element is to be highlighted asynchronously using Web Workers
+		 * to improve performance and avoid blocking the UI when highlighting very large chunks of code. This option is
+		 * [disabled by default](https://prismjs.com/faq.html#why-is-asynchronous-highlighting-disabled-by-default).
+		 *
+		 * Note: All language definitions required to highlight the code must be included in the main `prism.js` file for
+		 * asynchronous highlighting to work. You can build your own bundle on the
+		 * [Download page](https://prismjs.com/download.html).
+		 * @param {HighlightCallback} [callback] An optional callback to be invoked after the highlighting is done.
+		 * Mostly useful when `async` is `true`, since in that case, the highlighting is done asynchronously.
+		 * @memberof Prism
+		 * @public
+		 */
+		highlightElement: function (element, async, callback) {
+			// Find language
+			var language = _.util.getLanguage(element);
+			var grammar = _.languages[language];
+
+			// Set language on the element, if not present
+			_.util.setLanguage(element, language);
+
+			// Set language on the parent, for styling
+			var parent = element.parentElement;
+			if (parent && parent.nodeName.toLowerCase() === 'pre') {
+				_.util.setLanguage(parent, language);
+			}
+
+			var code = element.textContent;
+
+			var env = {
+				element: element,
+				language: language,
+				grammar: grammar,
+				code: code
+			};
+
+			function insertHighlightedCode(highlightedCode) {
+				env.highlightedCode = highlightedCode;
+
+				_.hooks.run('before-insert', env);
+
+				env.element.innerHTML = env.highlightedCode;
+
+				_.hooks.run('after-highlight', env);
+				_.hooks.run('complete', env);
+				callback && callback.call(env.element);
+			}
+
+			_.hooks.run('before-sanity-check', env);
+
+			// plugins may change/add the parent/element
+			parent = env.element.parentElement;
+			if (parent && parent.nodeName.toLowerCase() === 'pre' && !parent.hasAttribute('tabindex')) {
+				parent.setAttribute('tabindex', '0');
+			}
+
+			if (!env.code) {
+				_.hooks.run('complete', env);
+				callback && callback.call(env.element);
+				return;
+			}
+
+			_.hooks.run('before-highlight', env);
+
+			if (!env.grammar) {
+				insertHighlightedCode(_.util.encode(env.code));
+				return;
+			}
+
+			if (async && _self.Worker) {
+				var worker = new Worker(_.filename);
+
+				worker.onmessage = function (evt) {
+					insertHighlightedCode(evt.data);
+				};
+
+				worker.postMessage(JSON.stringify({
+					language: env.language,
+					code: env.code,
+					immediateClose: true
+				}));
+			} else {
+				insertHighlightedCode(_.highlight(env.code, env.grammar, env.language));
+			}
+		},
+
+		/**
+		 * Low-level function, only use if you know what you’re doing. It accepts a string of text as input
+		 * and the language definitions to use, and returns a string with the HTML produced.
+		 *
+		 * The following hooks will be run:
+		 * 1. `before-tokenize`
+		 * 2. `after-tokenize`
+		 * 3. `wrap`: On each {@link Token}.
+		 *
+		 * @param {string} text A string with the code to be highlighted.
+		 * @param {Grammar} grammar An object containing the tokens to use.
+		 *
+		 * Usually a language definition like `Prism.languages.markup`.
+		 * @param {string} language The name of the language definition passed to `grammar`.
+		 * @returns {string} The highlighted HTML.
+		 * @memberof Prism
+		 * @public
+		 * @example
+		 * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
+		 */
+		highlight: function (text, grammar, language) {
+			var env = {
+				code: text,
+				grammar: grammar,
+				language: language
+			};
+			_.hooks.run('before-tokenize', env);
+			if (!env.grammar) {
+				throw new Error('The language "' + env.language + '" has no grammar.');
+			}
+			env.tokens = _.tokenize(env.code, env.grammar);
+			_.hooks.run('after-tokenize', env);
+			return Token.stringify(_.util.encode(env.tokens), env.language);
+		},
+
+		/**
+		 * This is the heart of Prism, and the most low-level function you can use. It accepts a string of text as input
+		 * and the language definitions to use, and returns an array with the tokenized code.
+		 *
+		 * When the language definition includes nested tokens, the function is called recursively on each of these tokens.
+		 *
+		 * This method could be useful in other contexts as well, as a very crude parser.
+		 *
+		 * @param {string} text A string with the code to be highlighted.
+		 * @param {Grammar} grammar An object containing the tokens to use.
+		 *
+		 * Usually a language definition like `Prism.languages.markup`.
+		 * @returns {TokenStream} An array of strings and tokens, a token stream.
+		 * @memberof Prism
+		 * @public
+		 * @example
+		 * let code = `var foo = 0;`;
+		 * let tokens = Prism.tokenize(code, Prism.languages.javascript);
+		 * tokens.forEach(token => {
+		 *     if (token instanceof Prism.Token && token.type === 'number') {
+		 *         console.log(`Found numeric literal: ${token.content}`);
+		 *     }
+		 * });
+		 */
+		tokenize: function (text, grammar) {
+			var rest = grammar.rest;
+			if (rest) {
+				for (var token in rest) {
+					grammar[token] = rest[token];
+				}
+
+				delete grammar.rest;
+			}
+
+			var tokenList = new LinkedList();
+			addAfter(tokenList, tokenList.head, text);
+
+			matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+
+			return toArray(tokenList);
+		},
+
+		/**
+		 * @namespace
+		 * @memberof Prism
+		 * @public
+		 */
+		hooks: {
+			all: {},
+
+			/**
+			 * Adds the given callback to the list of callbacks for the given hook.
+			 *
+			 * The callback will be invoked when the hook it is registered for is run.
+			 * Hooks are usually directly run by a highlight function but you can also run hooks yourself.
+			 *
+			 * One callback function can be registered to multiple hooks and the same hook multiple times.
+			 *
+			 * @param {string} name The name of the hook.
+			 * @param {HookCallback} callback The callback function which is given environment variables.
+			 * @public
+			 */
+			add: function (name, callback) {
+				var hooks = _.hooks.all;
+
+				hooks[name] = hooks[name] || [];
+
+				hooks[name].push(callback);
+			},
+
+			/**
+			 * Runs a hook invoking all registered callbacks with the given environment variables.
+			 *
+			 * Callbacks will be invoked synchronously and in the order in which they were registered.
+			 *
+			 * @param {string} name The name of the hook.
+			 * @param {Object<string, any>} env The environment variables of the hook passed to all callbacks registered.
+			 * @public
+			 */
+			run: function (name, env) {
+				var callbacks = _.hooks.all[name];
+
+				if (!callbacks || !callbacks.length) {
+					return;
+				}
+
+				for (var i = 0, callback; (callback = callbacks[i++]);) {
+					callback(env);
+				}
+			}
+		},
+
+		Token: Token
+	};
+	_self.Prism = _;
+
+
+	// Typescript note:
+	// The following can be used to import the Token type in JSDoc:
+	//
+	//   @typedef {InstanceType<import("./prism-core")["Token"]>} Token
+
+	/**
+	 * Creates a new token.
+	 *
+	 * @param {string} type See {@link Token#type type}
+	 * @param {string | TokenStream} content See {@link Token#content content}
+	 * @param {string|string[]} [alias] The alias(es) of the token.
+	 * @param {string} [matchedStr=""] A copy of the full string this token was created from.
+	 * @class
+	 * @global
+	 * @public
+	 */
+	function Token(type, content, alias, matchedStr) {
+		/**
+		 * The type of the token.
+		 *
+		 * This is usually the key of a pattern in a {@link Grammar}.
+		 *
+		 * @type {string}
+		 * @see GrammarToken
+		 * @public
+		 */
+		this.type = type;
+		/**
+		 * The strings or tokens contained by this token.
+		 *
+		 * This will be a token stream if the pattern matched also defined an `inside` grammar.
+		 *
+		 * @type {string | TokenStream}
+		 * @public
+		 */
+		this.content = content;
+		/**
+		 * The alias(es) of the token.
+		 *
+		 * @type {string|string[]}
+		 * @see GrammarToken
+		 * @public
+		 */
+		this.alias = alias;
+		// Copy of the full string this token was created from
+		this.length = (matchedStr || '').length | 0;
+	}
+
+	/**
+	 * A token stream is an array of strings and {@link Token Token} objects.
+	 *
+	 * Token streams have to fulfill a few properties that are assumed by most functions (mostly internal ones) that process
+	 * them.
+	 *
+	 * 1. No adjacent strings.
+	 * 2. No empty strings.
+	 *
+	 *    The only exception here is the token stream that only contains the empty string and nothing else.
+	 *
+	 * @typedef {Array<string | Token>} TokenStream
+	 * @global
+	 * @public
+	 */
+
+	/**
+	 * Converts the given token or token stream to an HTML representation.
+	 *
+	 * The following hooks will be run:
+	 * 1. `wrap`: On each {@link Token}.
+	 *
+	 * @param {string | Token | TokenStream} o The token or token stream to be converted.
+	 * @param {string} language The name of current language.
+	 * @returns {string} The HTML representation of the token or token stream.
+	 * @memberof Token
+	 * @static
+	 */
+	Token.stringify = function stringify(o, language) {
+		if (typeof o == 'string') {
+			return o;
+		}
+		if (Array.isArray(o)) {
+			var s = '';
+			o.forEach(function (e) {
+				s += stringify(e, language);
+			});
+			return s;
+		}
+
+		var env = {
+			type: o.type,
+			content: stringify(o.content, language),
+			tag: 'span',
+			classes: ['token', o.type],
+			attributes: {},
+			language: language
+		};
+
+		var aliases = o.alias;
+		if (aliases) {
+			if (Array.isArray(aliases)) {
+				Array.prototype.push.apply(env.classes, aliases);
+			} else {
+				env.classes.push(aliases);
+			}
+		}
+
+		_.hooks.run('wrap', env);
+
+		var attributes = '';
+		for (var name in env.attributes) {
+			attributes += ' ' + name + '="' + (env.attributes[name] || '').replace(/"/g, '&quot;') + '"';
+		}
+
+		return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + attributes + '>' + env.content + '</' + env.tag + '>';
+	};
+
+	/**
+	 * @param {RegExp} pattern
+	 * @param {number} pos
+	 * @param {string} text
+	 * @param {boolean} lookbehind
+	 * @returns {RegExpExecArray | null}
+	 */
+	function matchPattern(pattern, pos, text, lookbehind) {
+		pattern.lastIndex = pos;
+		var match = pattern.exec(text);
+		if (match && lookbehind && match[1]) {
+			// change the match to remove the text matched by the Prism lookbehind group
+			var lookbehindLength = match[1].length;
+			match.index += lookbehindLength;
+			match[0] = match[0].slice(lookbehindLength);
+		}
+		return match;
+	}
+
+	/**
+	 * @param {string} text
+	 * @param {LinkedList<string | Token>} tokenList
+	 * @param {any} grammar
+	 * @param {LinkedListNode<string | Token>} startNode
+	 * @param {number} startPos
+	 * @param {RematchOptions} [rematch]
+	 * @returns {void}
+	 * @private
+	 *
+	 * @typedef RematchOptions
+	 * @property {string} cause
+	 * @property {number} reach
+	 */
+	function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+		for (var token in grammar) {
+			if (!grammar.hasOwnProperty(token) || !grammar[token]) {
+				continue;
+			}
+
+			var patterns = grammar[token];
+			patterns = Array.isArray(patterns) ? patterns : [patterns];
+
+			for (var j = 0; j < patterns.length; ++j) {
+				if (rematch && rematch.cause == token + ',' + j) {
+					return;
+				}
+
+				var patternObj = patterns[j];
+				var inside = patternObj.inside;
+				var lookbehind = !!patternObj.lookbehind;
+				var greedy = !!patternObj.greedy;
+				var alias = patternObj.alias;
+
+				if (greedy && !patternObj.pattern.global) {
+					// Without the global flag, lastIndex won't work
+					var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
+					patternObj.pattern = RegExp(patternObj.pattern.source, flags + 'g');
+				}
+
+				/** @type {RegExp} */
+				var pattern = patternObj.pattern || patternObj;
+
+				for ( // iterate the token list and keep track of the current token/string position
+					var currentNode = startNode.next, pos = startPos;
+					currentNode !== tokenList.tail;
+					pos += currentNode.value.length, currentNode = currentNode.next
+				) {
+
+					if (rematch && pos >= rematch.reach) {
+						break;
+					}
+
+					var str = currentNode.value;
+
+					if (tokenList.length > text.length) {
+						// Something went terribly wrong, ABORT, ABORT!
+						return;
+					}
+
+					if (str instanceof Token) {
+						continue;
+					}
+
+					var removeCount = 1; // this is the to parameter of removeBetween
+					var match;
+
+					if (greedy) {
+						match = matchPattern(pattern, pos, text, lookbehind);
+						if (!match || match.index >= text.length) {
+							break;
+						}
+
+						var from = match.index;
+						var to = match.index + match[0].length;
+						var p = pos;
+
+						// find the node that contains the match
+						p += currentNode.value.length;
+						while (from >= p) {
+							currentNode = currentNode.next;
+							p += currentNode.value.length;
+						}
+						// adjust pos (and p)
+						p -= currentNode.value.length;
+						pos = p;
+
+						// the current node is a Token, then the match starts inside another Token, which is invalid
+						if (currentNode.value instanceof Token) {
+							continue;
+						}
+
+						// find the last node which is affected by this match
+						for (
+							var k = currentNode;
+							k !== tokenList.tail && (p < to || typeof k.value === 'string');
+							k = k.next
+						) {
+							removeCount++;
+							p += k.value.length;
+						}
+						removeCount--;
+
+						// replace with the new match
+						str = text.slice(pos, p);
+						match.index -= pos;
+					} else {
+						match = matchPattern(pattern, 0, str, lookbehind);
+						if (!match) {
+							continue;
+						}
+					}
+
+					// eslint-disable-next-line no-redeclare
+					var from = match.index;
+					var matchStr = match[0];
+					var before = str.slice(0, from);
+					var after = str.slice(from + matchStr.length);
+
+					var reach = pos + str.length;
+					if (rematch && reach > rematch.reach) {
+						rematch.reach = reach;
+					}
+
+					var removeFrom = currentNode.prev;
+
+					if (before) {
+						removeFrom = addAfter(tokenList, removeFrom, before);
+						pos += before.length;
+					}
+
+					removeRange(tokenList, removeFrom, removeCount);
+
+					var wrapped = new Token(token, inside ? _.tokenize(matchStr, inside) : matchStr, alias, matchStr);
+					currentNode = addAfter(tokenList, removeFrom, wrapped);
+
+					if (after) {
+						addAfter(tokenList, currentNode, after);
+					}
+
+					if (removeCount > 1) {
+						// at least one Token object was removed, so we have to do some rematching
+						// this can only happen if the current pattern is greedy
+
+						/** @type {RematchOptions} */
+						var nestedRematch = {
+							cause: token + ',' + j,
+							reach: reach
+						};
+						matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
+
+						// the reach might have been extended because of the rematching
+						if (rematch && nestedRematch.reach > rematch.reach) {
+							rematch.reach = nestedRematch.reach;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * @typedef LinkedListNode
+	 * @property {T} value
+	 * @property {LinkedListNode<T> | null} prev The previous node.
+	 * @property {LinkedListNode<T> | null} next The next node.
+	 * @template T
+	 * @private
+	 */
+
+	/**
+	 * @template T
+	 * @private
+	 */
+	function LinkedList() {
+		/** @type {LinkedListNode<T>} */
+		var head = { value: null, prev: null, next: null };
+		/** @type {LinkedListNode<T>} */
+		var tail = { value: null, prev: head, next: null };
+		head.next = tail;
+
+		/** @type {LinkedListNode<T>} */
+		this.head = head;
+		/** @type {LinkedListNode<T>} */
+		this.tail = tail;
+		this.length = 0;
+	}
+
+	/**
+	 * Adds a new node with the given value to the list.
+	 *
+	 * @param {LinkedList<T>} list
+	 * @param {LinkedListNode<T>} node
+	 * @param {T} value
+	 * @returns {LinkedListNode<T>} The added node.
+	 * @template T
+	 */
+	function addAfter(list, node, value) {
+		// assumes that node != list.tail && values.length >= 0
+		var next = node.next;
+
+		var newNode = { value: value, prev: node, next: next };
+		node.next = newNode;
+		next.prev = newNode;
+		list.length++;
+
+		return newNode;
+	}
+	/**
+	 * Removes `count` nodes after the given node. The given node will not be removed.
+	 *
+	 * @param {LinkedList<T>} list
+	 * @param {LinkedListNode<T>} node
+	 * @param {number} count
+	 * @template T
+	 */
+	function removeRange(list, node, count) {
+		var next = node.next;
+		for (var i = 0; i < count && next !== list.tail; i++) {
+			next = next.next;
+		}
+		node.next = next;
+		next.prev = node;
+		list.length -= i;
+	}
+	/**
+	 * @param {LinkedList<T>} list
+	 * @returns {T[]}
+	 * @template T
+	 */
+	function toArray(list) {
+		var array = [];
+		var node = list.head.next;
+		while (node !== list.tail) {
+			array.push(node.value);
+			node = node.next;
+		}
+		return array;
+	}
+
+
+	if (!_self.document) {
+		if (!_self.addEventListener) {
+			// in Node.js
+			return _;
+		}
+
+		if (!_.disableWorkerMessageHandler) {
+			// In worker
+			_self.addEventListener('message', function (evt) {
+				var message = JSON.parse(evt.data);
+				var lang = message.language;
+				var code = message.code;
+				var immediateClose = message.immediateClose;
+
+				_self.postMessage(_.highlight(code, _.languages[lang], lang));
+				if (immediateClose) {
+					_self.close();
+				}
+			}, false);
+		}
+
+		return _;
+	}
+
+	// Get current script and highlight
+	var script = _.util.currentScript();
+
+	if (script) {
+		_.filename = script.src;
+
+		if (script.hasAttribute('data-manual')) {
+			_.manual = true;
+		}
+	}
+
+	function highlightAutomaticallyCallback() {
+		if (!_.manual) {
+			_.highlightAll();
+		}
+	}
+
+	if (!_.manual) {
+		// If the document state is "loading", then we'll use DOMContentLoaded.
+		// If the document state is "interactive" and the prism.js script is deferred, then we'll also use the
+		// DOMContentLoaded event because there might be some plugins or languages which have also been deferred and they
+		// might take longer one animation frame to execute which can create a race condition where only some plugins have
+		// been loaded when Prism.highlightAll() is executed, depending on how fast resources are loaded.
+		// See https://github.com/PrismJS/prism/issues/2102
+		var readyState = document.readyState;
+		if (readyState === 'loading' || readyState === 'interactive' && script && script.defer) {
+			document.addEventListener('DOMContentLoaded', highlightAutomaticallyCallback);
+		} else {
+			if (window.requestAnimationFrame) {
+				window.requestAnimationFrame(highlightAutomaticallyCallback);
+			} else {
+				window.setTimeout(highlightAutomaticallyCallback, 16);
+			}
+		}
+	}
+
+	return _;
+
+}(_self));
+
+if (module.exports) {
+	module.exports = Prism;
+}
+
+// hack for components to work correctly in node.js
+if (typeof commonjsGlobal !== 'undefined') {
+	commonjsGlobal.Prism = Prism;
+}
+
+// some additional documentation/types
+
+/**
+ * The expansion of a simple `RegExp` literal to support additional properties.
+ *
+ * @typedef GrammarToken
+ * @property {RegExp} pattern The regular expression of the token.
+ * @property {boolean} [lookbehind=false] If `true`, then the first capturing group of `pattern` will (effectively)
+ * behave as a lookbehind group meaning that the captured text will not be part of the matched text of the new token.
+ * @property {boolean} [greedy=false] Whether the token is greedy.
+ * @property {string|string[]} [alias] An optional alias or list of aliases.
+ * @property {Grammar} [inside] The nested grammar of this token.
+ *
+ * The `inside` grammar will be used to tokenize the text value of each token of this kind.
+ *
+ * This can be used to make nested and even recursive language definitions.
+ *
+ * Note: This can cause infinite recursion. Be careful when you embed different languages or even the same language into
+ * each another.
+ * @global
+ * @public
+ */
+
+/**
+ * @typedef Grammar
+ * @type {Object<string, RegExp | GrammarToken | Array<RegExp | GrammarToken>>}
+ * @property {Grammar} [rest] An optional grammar object that will be appended to this grammar.
+ * @global
+ * @public
+ */
+
+/**
+ * A function which will invoked after an element was successfully highlighted.
+ *
+ * @callback HighlightCallback
+ * @param {Element} element The element successfully highlighted.
+ * @returns {void}
+ * @global
+ * @public
+ */
+
+/**
+ * @callback HookCallback
+ * @param {Object<string, any>} env The environment variables of the hook.
+ * @returns {void}
+ * @global
+ * @public
+ */
+
+
+/* **********************************************
+     Begin prism-markup.js
+********************************************** */
+
+Prism.languages.markup = {
+	'comment': {
+		pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+		greedy: true
+	},
+	'prolog': {
+		pattern: /<\?[\s\S]+?\?>/,
+		greedy: true
+	},
+	'doctype': {
+		// https://www.w3.org/TR/xml/#NT-doctypedecl
+		pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+		greedy: true,
+		inside: {
+			'internal-subset': {
+				pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+				lookbehind: true,
+				greedy: true,
+				inside: null // see below
+			},
+			'string': {
+				pattern: /"[^"]*"|'[^']*'/,
+				greedy: true
+			},
+			'punctuation': /^<!|>$|[[\]]/,
+			'doctype-tag': /^DOCTYPE/i,
+			'name': /[^\s<>'"]+/
+		}
+	},
+	'cdata': {
+		pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+		greedy: true
+	},
+	'tag': {
+		pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+		greedy: true,
+		inside: {
+			'tag': {
+				pattern: /^<\/?[^\s>\/]+/,
+				inside: {
+					'punctuation': /^<\/?/,
+					'namespace': /^[^\s>\/:]+:/
+				}
+			},
+			'special-attr': [],
+			'attr-value': {
+				pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+				inside: {
+					'punctuation': [
+						{
+							pattern: /^=/,
+							alias: 'attr-equals'
+						},
+						{
+							pattern: /^(\s*)["']|["']$/,
+							lookbehind: true
+						}
+					]
+				}
+			},
+			'punctuation': /\/?>/,
+			'attr-name': {
+				pattern: /[^\s>\/]+/,
+				inside: {
+					'namespace': /^[^\s>\/:]+:/
+				}
+			}
+
+		}
+	},
+	'entity': [
+		{
+			pattern: /&[\da-z]{1,8};/i,
+			alias: 'named-entity'
+		},
+		/&#x?[\da-f]{1,8};/i
+	]
+};
+
+Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
+	Prism.languages.markup['entity'];
+Prism.languages.markup['doctype'].inside['internal-subset'].inside = Prism.languages.markup;
+
+// Plugin to make entity title show the real entity, idea by Roman Komarov
+Prism.hooks.add('wrap', function (env) {
+
+	if (env.type === 'entity') {
+		env.attributes['title'] = env.content.replace(/&amp;/, '&');
+	}
+});
+
+Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
+	/**
+	 * Adds an inlined language to markup.
+	 *
+	 * An example of an inlined language is CSS with `<style>` tags.
+	 *
+	 * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+	 * case insensitive.
+	 * @param {string} lang The language key.
+	 * @example
+	 * addInlined('style', 'css');
+	 */
+	value: function addInlined(tagName, lang) {
+		var includedCdataInside = {};
+		includedCdataInside['language-' + lang] = {
+			pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+			lookbehind: true,
+			inside: Prism.languages[lang]
+		};
+		includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;
+
+		var inside = {
+			'included-cdata': {
+				pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+				inside: includedCdataInside
+			}
+		};
+		inside['language-' + lang] = {
+			pattern: /[\s\S]+/,
+			inside: Prism.languages[lang]
+		};
+
+		var def = {};
+		def[tagName] = {
+			pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
+			lookbehind: true,
+			greedy: true,
+			inside: inside
+		};
+
+		Prism.languages.insertBefore('markup', 'cdata', def);
+	}
+});
+Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
+	/**
+	 * Adds an pattern to highlight languages embedded in HTML attributes.
+	 *
+	 * An example of an inlined language is CSS with `style` attributes.
+	 *
+	 * @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
+	 * case insensitive.
+	 * @param {string} lang The language key.
+	 * @example
+	 * addAttribute('style', 'css');
+	 */
+	value: function (attrName, lang) {
+		Prism.languages.markup.tag.inside['special-attr'].push({
+			pattern: RegExp(
+				/(^|["'\s])/.source + '(?:' + attrName + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+				'i'
+			),
+			lookbehind: true,
+			inside: {
+				'attr-name': /^[^\s=]+/,
+				'attr-value': {
+					pattern: /=[\s\S]+/,
+					inside: {
+						'value': {
+							pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+							lookbehind: true,
+							alias: [lang, 'language-' + lang],
+							inside: Prism.languages[lang]
+						},
+						'punctuation': [
+							{
+								pattern: /^=/,
+								alias: 'attr-equals'
+							},
+							/"|'/
+						]
+					}
+				}
+			}
+		});
+	}
+});
+
+Prism.languages.html = Prism.languages.markup;
+Prism.languages.mathml = Prism.languages.markup;
+Prism.languages.svg = Prism.languages.markup;
+
+Prism.languages.xml = Prism.languages.extend('markup', {});
+Prism.languages.ssml = Prism.languages.xml;
+Prism.languages.atom = Prism.languages.xml;
+Prism.languages.rss = Prism.languages.xml;
+
+
+/* **********************************************
+     Begin prism-css.js
+********************************************** */
+
+(function (Prism) {
+
+	var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+
+	Prism.languages.css = {
+		'comment': /\/\*[\s\S]*?\*\//,
+		'atrule': {
+			pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + string.source + ')*?' + /(?:;|(?=\s*\{))/.source),
+			inside: {
+				'rule': /^@[\w-]+/,
+				'selector-function-argument': {
+					pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+					lookbehind: true,
+					alias: 'selector'
+				},
+				'keyword': {
+					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+					lookbehind: true
+				}
+				// See rest below
+			}
+		},
+		'url': {
+			// https://drafts.csswg.org/css-values-3/#urls
+			pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
+			greedy: true,
+			inside: {
+				'function': /^url/i,
+				'punctuation': /^\(|\)$/,
+				'string': {
+					pattern: RegExp('^' + string.source + '$'),
+					alias: 'url'
+				}
+			}
+		},
+		'selector': {
+			pattern: RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' + string.source + ')*(?=\\s*\\{)'),
+			lookbehind: true
+		},
+		'string': {
+			pattern: string,
+			greedy: true
+		},
+		'property': {
+			pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+			lookbehind: true
+		},
+		'important': /!important\b/i,
+		'function': {
+			pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+			lookbehind: true
+		},
+		'punctuation': /[(){};:,]/
+	};
+
+	Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
+
+	var markup = Prism.languages.markup;
+	if (markup) {
+		markup.tag.addInlined('style', 'css');
+		markup.tag.addAttribute('style', 'css');
+	}
+
+}(Prism));
+
+
+/* **********************************************
+     Begin prism-clike.js
+********************************************** */
+
+Prism.languages.clike = {
+	'comment': [
+		{
+			pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+			lookbehind: true,
+			greedy: true
+		},
+		{
+			pattern: /(^|[^\\:])\/\/.*/,
+			lookbehind: true,
+			greedy: true
+		}
+	],
+	'string': {
+		pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+		greedy: true
+	},
+	'class-name': {
+		pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+		lookbehind: true,
+		inside: {
+			'punctuation': /[.\\]/
+		}
+	},
+	'keyword': /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+	'boolean': /\b(?:false|true)\b/,
+	'function': /\b\w+(?=\()/,
+	'number': /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+	'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+	'punctuation': /[{}[\];(),.:]/
+};
+
+
+/* **********************************************
+     Begin prism-javascript.js
+********************************************** */
+
+Prism.languages.javascript = Prism.languages.extend('clike', {
+	'class-name': [
+		Prism.languages.clike['class-name'],
+		{
+			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+			lookbehind: true
+		}
+	],
+	'keyword': [
+		{
+			pattern: /((?:^|\})\s*)catch\b/,
+			lookbehind: true
+		},
+		{
+			pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+			lookbehind: true
+		},
+	],
+	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+	'function': /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+	'number': {
+		pattern: RegExp(
+			/(^|[^\w$])/.source +
+			'(?:' +
+			(
+				// constant
+				/NaN|Infinity/.source +
+				'|' +
+				// binary integer
+				/0[bB][01]+(?:_[01]+)*n?/.source +
+				'|' +
+				// octal integer
+				/0[oO][0-7]+(?:_[0-7]+)*n?/.source +
+				'|' +
+				// hexadecimal integer
+				/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source +
+				'|' +
+				// decimal bigint
+				/\d+(?:_\d+)*n/.source +
+				'|' +
+				// decimal number (integer or float) but no bigint
+				/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source
+			) +
+			')' +
+			/(?![\w$])/.source
+		),
+		lookbehind: true
+	},
+	'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+});
+
+Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
+
+Prism.languages.insertBefore('javascript', 'keyword', {
+	'regex': {
+		pattern: RegExp(
+			// lookbehind
+			// eslint-disable-next-line regexp/no-dupe-characters-character-class
+			/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source +
+			// Regex pattern:
+			// There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
+			// classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
+			// with the only syntax, so we have to define 2 different regex patterns.
+			/\//.source +
+			'(?:' +
+			/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source +
+			'|' +
+			// `v` flag syntax. This supports 3 levels of nested character classes.
+			/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source +
+			')' +
+			// lookahead
+			/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
+		),
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			'regex-source': {
+				pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+				lookbehind: true,
+				alias: 'language-regex',
+				inside: Prism.languages.regex
+			},
+			'regex-delimiter': /^\/|\/$/,
+			'regex-flags': /^[a-z]+$/,
+		}
+	},
+	// This must be declared before keyword because we use "function" inside the look-forward
+	'function-variable': {
+		pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+		alias: 'function'
+	},
+	'parameter': [
+		{
+			pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		}
+	],
+	'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+});
+
+Prism.languages.insertBefore('javascript', 'string', {
+	'hashbang': {
+		pattern: /^#!.*/,
+		greedy: true,
+		alias: 'comment'
+	},
+	'template-string': {
+		pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+		greedy: true,
+		inside: {
+			'template-punctuation': {
+				pattern: /^`|`$/,
+				alias: 'string'
+			},
+			'interpolation': {
+				pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+				lookbehind: true,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\$\{|\}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			'string': /[\s\S]+/
+		}
+	},
+	'string-property': {
+		pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+		lookbehind: true,
+		greedy: true,
+		alias: 'property'
+	}
+});
+
+Prism.languages.insertBefore('javascript', 'operator', {
+	'literal-property': {
+		pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+		lookbehind: true,
+		alias: 'property'
+	},
+});
+
+if (Prism.languages.markup) {
+	Prism.languages.markup.tag.addInlined('script', 'javascript');
+
+	// add attribute support for all DOM events.
+	// https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
+	Prism.languages.markup.tag.addAttribute(
+		/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
+		'javascript'
+	);
+}
+
+Prism.languages.js = Prism.languages.javascript;
+
+
+/* **********************************************
+     Begin prism-file-highlight.js
+********************************************** */
+
+(function () {
+
+	if (typeof Prism === 'undefined' || typeof document === 'undefined') {
+		return;
+	}
+
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+	if (!Element.prototype.matches) {
+		Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+	}
+
+	var LOADING_MESSAGE = 'Loading…';
+	var FAILURE_MESSAGE = function (status, message) {
+		return '✖ Error ' + status + ' while fetching file: ' + message;
+	};
+	var FAILURE_EMPTY_MESSAGE = '✖ Error: File does not exist or is empty';
+
+	var EXTENSIONS = {
+		'js': 'javascript',
+		'py': 'python',
+		'rb': 'ruby',
+		'ps1': 'powershell',
+		'psm1': 'powershell',
+		'sh': 'bash',
+		'bat': 'batch',
+		'h': 'c',
+		'tex': 'latex'
+	};
+
+	var STATUS_ATTR = 'data-src-status';
+	var STATUS_LOADING = 'loading';
+	var STATUS_LOADED = 'loaded';
+	var STATUS_FAILED = 'failed';
+
+	var SELECTOR = 'pre[data-src]:not([' + STATUS_ATTR + '="' + STATUS_LOADED + '"])'
+		+ ':not([' + STATUS_ATTR + '="' + STATUS_LOADING + '"])';
+
+	/**
+	 * Loads the given file.
+	 *
+	 * @param {string} src The URL or path of the source file to load.
+	 * @param {(result: string) => void} success
+	 * @param {(reason: string) => void} error
+	 */
+	function loadFile(src, success, error) {
+		var xhr = new XMLHttpRequest();
+		xhr.open('GET', src, true);
+		xhr.onreadystatechange = function () {
+			if (xhr.readyState == 4) {
+				if (xhr.status < 400 && xhr.responseText) {
+					success(xhr.responseText);
+				} else {
+					if (xhr.status >= 400) {
+						error(FAILURE_MESSAGE(xhr.status, xhr.statusText));
+					} else {
+						error(FAILURE_EMPTY_MESSAGE);
+					}
+				}
+			}
+		};
+		xhr.send(null);
+	}
+
+	/**
+	 * Parses the given range.
+	 *
+	 * This returns a range with inclusive ends.
+	 *
+	 * @param {string | null | undefined} range
+	 * @returns {[number, number | undefined] | undefined}
+	 */
+	function parseRange(range) {
+		var m = /^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(range || '');
+		if (m) {
+			var start = Number(m[1]);
+			var comma = m[2];
+			var end = m[3];
+
+			if (!comma) {
+				return [start, start];
+			}
+			if (!end) {
+				return [start, undefined];
+			}
+			return [start, Number(end)];
+		}
+		return undefined;
+	}
+
+	Prism.hooks.add('before-highlightall', function (env) {
+		env.selector += ', ' + SELECTOR;
+	});
+
+	Prism.hooks.add('before-sanity-check', function (env) {
+		var pre = /** @type {HTMLPreElement} */ (env.element);
+		if (pre.matches(SELECTOR)) {
+			env.code = ''; // fast-path the whole thing and go to complete
+
+			pre.setAttribute(STATUS_ATTR, STATUS_LOADING); // mark as loading
+
+			// add code element with loading message
+			var code = pre.appendChild(document.createElement('CODE'));
+			code.textContent = LOADING_MESSAGE;
+
+			var src = pre.getAttribute('data-src');
+
+			var language = env.language;
+			if (language === 'none') {
+				// the language might be 'none' because there is no language set;
+				// in this case, we want to use the extension as the language
+				var extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
+				language = EXTENSIONS[extension] || extension;
+			}
+
+			// set language classes
+			Prism.util.setLanguage(code, language);
+			Prism.util.setLanguage(pre, language);
+
+			// preload the language
+			var autoloader = Prism.plugins.autoloader;
+			if (autoloader) {
+				autoloader.loadLanguages(language);
+			}
+
+			// load file
+			loadFile(
+				src,
+				function (text) {
+					// mark as loaded
+					pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
+
+					// handle data-range
+					var range = parseRange(pre.getAttribute('data-range'));
+					if (range) {
+						var lines = text.split(/\r\n?|\n/g);
+
+						// the range is one-based and inclusive on both ends
+						var start = range[0];
+						var end = range[1] == null ? lines.length : range[1];
+
+						if (start < 0) { start += lines.length; }
+						start = Math.max(0, Math.min(start - 1, lines.length));
+						if (end < 0) { end += lines.length; }
+						end = Math.max(0, Math.min(end, lines.length));
+
+						text = lines.slice(start, end).join('\n');
+
+						// add data-start for line numbers
+						if (!pre.hasAttribute('data-start')) {
+							pre.setAttribute('data-start', String(start + 1));
+						}
+					}
+
+					// highlight code
+					code.textContent = text;
+					Prism.highlightElement(code);
+				},
+				function (error) {
+					// mark as failed
+					pre.setAttribute(STATUS_ATTR, STATUS_FAILED);
+
+					code.textContent = error;
+				}
+			);
+		}
+	});
+
+	Prism.plugins.fileHighlight = {
+		/**
+		 * Executes the File Highlight plugin for all matching `pre` elements under the given container.
+		 *
+		 * Note: Elements which are already loaded or currently loading will not be touched by this method.
+		 *
+		 * @param {ParentNode} [container=document]
+		 */
+		highlight: function highlight(container) {
+			var elements = (container || document).querySelectorAll(SELECTOR);
+
+			for (var i = 0, element; (element = elements[i++]);) {
+				Prism.highlightElement(element);
+			}
+		}
+	};
+
+	var logged = false;
+	/** @deprecated Use `Prism.plugins.fileHighlight.highlight` instead. */
+	Prism.fileHighlight = function () {
+		if (!logged) {
+			console.warn('Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead.');
+			logged = true;
+		}
+		Prism.plugins.fileHighlight.highlight.apply(this, arguments);
+	};
+
+}());
+});
+
+Prism.languages.clike = {
+	'comment': [
+		{
+			pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+			lookbehind: true,
+			greedy: true
+		},
+		{
+			pattern: /(^|[^\\:])\/\/.*/,
+			lookbehind: true,
+			greedy: true
+		}
+	],
+	'string': {
+		pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+		greedy: true
+	},
+	'class-name': {
+		pattern: /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,
+		lookbehind: true,
+		inside: {
+			'punctuation': /[.\\]/
+		}
+	},
+	'keyword': /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,
+	'boolean': /\b(?:false|true)\b/,
+	'function': /\b\w+(?=\()/,
+	'number': /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,
+	'operator': /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,
+	'punctuation': /[{}[\];(),.:]/
+};
+
+Prism.languages.javascript = Prism.languages.extend('clike', {
+	'class-name': [
+		Prism.languages.clike['class-name'],
+		{
+			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,
+			lookbehind: true
+		}
+	],
+	'keyword': [
+		{
+			pattern: /((?:^|\})\s*)catch\b/,
+			lookbehind: true
+		},
+		{
+			pattern: /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,
+			lookbehind: true
+		},
+	],
+	// Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444)
+	'function': /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,
+	'number': {
+		pattern: RegExp(
+			/(^|[^\w$])/.source +
+			'(?:' +
+			(
+				// constant
+				/NaN|Infinity/.source +
+				'|' +
+				// binary integer
+				/0[bB][01]+(?:_[01]+)*n?/.source +
+				'|' +
+				// octal integer
+				/0[oO][0-7]+(?:_[0-7]+)*n?/.source +
+				'|' +
+				// hexadecimal integer
+				/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source +
+				'|' +
+				// decimal bigint
+				/\d+(?:_\d+)*n/.source +
+				'|' +
+				// decimal number (integer or float) but no bigint
+				/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source
+			) +
+			')' +
+			/(?![\w$])/.source
+		),
+		lookbehind: true
+	},
+	'operator': /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/
+});
+
+Prism.languages.javascript['class-name'][0].pattern = /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/;
+
+Prism.languages.insertBefore('javascript', 'keyword', {
+	'regex': {
+		pattern: RegExp(
+			// lookbehind
+			// eslint-disable-next-line regexp/no-dupe-characters-character-class
+			/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source +
+			// Regex pattern:
+			// There are 2 regex patterns here. The RegExp set notation proposal added support for nested character
+			// classes if the `v` flag is present. Unfortunately, nested CCs are both context-free and incompatible
+			// with the only syntax, so we have to define 2 different regex patterns.
+			/\//.source +
+			'(?:' +
+			/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source +
+			'|' +
+			// `v` flag syntax. This supports 3 levels of nested character classes.
+			/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source +
+			')' +
+			// lookahead
+			/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source
+		),
+		lookbehind: true,
+		greedy: true,
+		inside: {
+			'regex-source': {
+				pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/,
+				lookbehind: true,
+				alias: 'language-regex',
+				inside: Prism.languages.regex
+			},
+			'regex-delimiter': /^\/|\/$/,
+			'regex-flags': /^[a-z]+$/,
+		}
+	},
+	// This must be declared before keyword because we use "function" inside the look-forward
+	'function-variable': {
+		pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,
+		alias: 'function'
+	},
+	'parameter': [
+		{
+			pattern: /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		{
+			pattern: /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		}
+	],
+	'constant': /\b[A-Z](?:[A-Z_]|\dx?)*\b/
+});
+
+Prism.languages.insertBefore('javascript', 'string', {
+	'hashbang': {
+		pattern: /^#!.*/,
+		greedy: true,
+		alias: 'comment'
+	},
+	'template-string': {
+		pattern: /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,
+		greedy: true,
+		inside: {
+			'template-punctuation': {
+				pattern: /^`|`$/,
+				alias: 'string'
+			},
+			'interpolation': {
+				pattern: /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,
+				lookbehind: true,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\$\{|\}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			'string': /[\s\S]+/
+		}
+	},
+	'string-property': {
+		pattern: /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,
+		lookbehind: true,
+		greedy: true,
+		alias: 'property'
+	}
+});
+
+Prism.languages.insertBefore('javascript', 'operator', {
+	'literal-property': {
+		pattern: /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,
+		lookbehind: true,
+		alias: 'property'
+	},
+});
+
+if (Prism.languages.markup) {
+	Prism.languages.markup.tag.addInlined('script', 'javascript');
+
+	// add attribute support for all DOM events.
+	// https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events
+	Prism.languages.markup.tag.addAttribute(
+		/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,
+		'javascript'
+	);
+}
+
+Prism.languages.js = Prism.languages.javascript;
+
+Prism.languages.markup = {
+	'comment': {
+		pattern: /<!--(?:(?!<!--)[\s\S])*?-->/,
+		greedy: true
+	},
+	'prolog': {
+		pattern: /<\?[\s\S]+?\?>/,
+		greedy: true
+	},
+	'doctype': {
+		// https://www.w3.org/TR/xml/#NT-doctypedecl
+		pattern: /<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,
+		greedy: true,
+		inside: {
+			'internal-subset': {
+				pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/,
+				lookbehind: true,
+				greedy: true,
+				inside: null // see below
+			},
+			'string': {
+				pattern: /"[^"]*"|'[^']*'/,
+				greedy: true
+			},
+			'punctuation': /^<!|>$|[[\]]/,
+			'doctype-tag': /^DOCTYPE/i,
+			'name': /[^\s<>'"]+/
+		}
+	},
+	'cdata': {
+		pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+		greedy: true
+	},
+	'tag': {
+		pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,
+		greedy: true,
+		inside: {
+			'tag': {
+				pattern: /^<\/?[^\s>\/]+/,
+				inside: {
+					'punctuation': /^<\/?/,
+					'namespace': /^[^\s>\/:]+:/
+				}
+			},
+			'special-attr': [],
+			'attr-value': {
+				pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,
+				inside: {
+					'punctuation': [
+						{
+							pattern: /^=/,
+							alias: 'attr-equals'
+						},
+						{
+							pattern: /^(\s*)["']|["']$/,
+							lookbehind: true
+						}
+					]
+				}
+			},
+			'punctuation': /\/?>/,
+			'attr-name': {
+				pattern: /[^\s>\/]+/,
+				inside: {
+					'namespace': /^[^\s>\/:]+:/
+				}
+			}
+
+		}
+	},
+	'entity': [
+		{
+			pattern: /&[\da-z]{1,8};/i,
+			alias: 'named-entity'
+		},
+		/&#x?[\da-f]{1,8};/i
+	]
+};
+
+Prism.languages.markup['tag'].inside['attr-value'].inside['entity'] =
+	Prism.languages.markup['entity'];
+Prism.languages.markup['doctype'].inside['internal-subset'].inside = Prism.languages.markup;
+
+// Plugin to make entity title show the real entity, idea by Roman Komarov
+Prism.hooks.add('wrap', function (env) {
+
+	if (env.type === 'entity') {
+		env.attributes['title'] = env.content.replace(/&amp;/, '&');
+	}
+});
+
+Object.defineProperty(Prism.languages.markup.tag, 'addInlined', {
+	/**
+	 * Adds an inlined language to markup.
+	 *
+	 * An example of an inlined language is CSS with `<style>` tags.
+	 *
+	 * @param {string} tagName The name of the tag that contains the inlined language. This name will be treated as
+	 * case insensitive.
+	 * @param {string} lang The language key.
+	 * @example
+	 * addInlined('style', 'css');
+	 */
+	value: function addInlined(tagName, lang) {
+		var includedCdataInside = {};
+		includedCdataInside['language-' + lang] = {
+			pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,
+			lookbehind: true,
+			inside: Prism.languages[lang]
+		};
+		includedCdataInside['cdata'] = /^<!\[CDATA\[|\]\]>$/i;
+
+		var inside = {
+			'included-cdata': {
+				pattern: /<!\[CDATA\[[\s\S]*?\]\]>/i,
+				inside: includedCdataInside
+			}
+		};
+		inside['language-' + lang] = {
+			pattern: /[\s\S]+/,
+			inside: Prism.languages[lang]
+		};
+
+		var def = {};
+		def[tagName] = {
+			pattern: RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g, function () { return tagName; }), 'i'),
+			lookbehind: true,
+			greedy: true,
+			inside: inside
+		};
+
+		Prism.languages.insertBefore('markup', 'cdata', def);
+	}
+});
+Object.defineProperty(Prism.languages.markup.tag, 'addAttribute', {
+	/**
+	 * Adds an pattern to highlight languages embedded in HTML attributes.
+	 *
+	 * An example of an inlined language is CSS with `style` attributes.
+	 *
+	 * @param {string} attrName The name of the tag that contains the inlined language. This name will be treated as
+	 * case insensitive.
+	 * @param {string} lang The language key.
+	 * @example
+	 * addAttribute('style', 'css');
+	 */
+	value: function (attrName, lang) {
+		Prism.languages.markup.tag.inside['special-attr'].push({
+			pattern: RegExp(
+				/(^|["'\s])/.source + '(?:' + attrName + ')' + /\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,
+				'i'
+			),
+			lookbehind: true,
+			inside: {
+				'attr-name': /^[^\s=]+/,
+				'attr-value': {
+					pattern: /=[\s\S]+/,
+					inside: {
+						'value': {
+							pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,
+							lookbehind: true,
+							alias: [lang, 'language-' + lang],
+							inside: Prism.languages[lang]
+						},
+						'punctuation': [
+							{
+								pattern: /^=/,
+								alias: 'attr-equals'
+							},
+							/"|'/
+						]
+					}
+				}
+			}
+		});
+	}
+});
+
+Prism.languages.html = Prism.languages.markup;
+Prism.languages.mathml = Prism.languages.markup;
+Prism.languages.svg = Prism.languages.markup;
+
+Prism.languages.xml = Prism.languages.extend('markup', {});
+Prism.languages.ssml = Prism.languages.xml;
+Prism.languages.atom = Prism.languages.xml;
+Prism.languages.rss = Prism.languages.xml;
+
+Prism.languages.c = Prism.languages.extend('clike', {
+	'comment': {
+		pattern: /\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,
+		greedy: true
+	},
+	'string': {
+		// https://en.cppreference.com/w/c/language/string_literal
+		pattern: /"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,
+		greedy: true
+	},
+	'class-name': {
+		pattern: /(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,
+		lookbehind: true
+	},
+	'keyword': /\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,
+	'function': /\b[a-z_]\w*(?=\s*\()/i,
+	'number': /(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,
+	'operator': />>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/
+});
+
+Prism.languages.insertBefore('c', 'string', {
+	'char': {
+		// https://en.cppreference.com/w/c/language/character_constant
+		pattern: /'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,
+		greedy: true
+	}
+});
+
+Prism.languages.insertBefore('c', 'string', {
+	'macro': {
+		// allow for multiline macro definitions
+		// spaces after the # character compile fine with gcc
+		pattern: /(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,
+		lookbehind: true,
+		greedy: true,
+		alias: 'property',
+		inside: {
+			'string': [
+				{
+					// highlight the path of the include statement as a string
+					pattern: /^(#\s*include\s*)<[^>]+>/,
+					lookbehind: true
+				},
+				Prism.languages.c['string']
+			],
+			'char': Prism.languages.c['char'],
+			'comment': Prism.languages.c['comment'],
+			'macro-name': [
+				{
+					pattern: /(^#\s*define\s+)\w+\b(?!\()/i,
+					lookbehind: true
+				},
+				{
+					pattern: /(^#\s*define\s+)\w+\b(?=\()/i,
+					lookbehind: true,
+					alias: 'function'
+				}
+			],
+			// highlight macro directives as keywords
+			'directive': {
+				pattern: /^(#\s*)[a-z]+/,
+				lookbehind: true,
+				alias: 'keyword'
+			},
+			'directive-hash': /^#/,
+			'punctuation': /##|\\(?=[\r\n])/,
+			'expression': {
+				pattern: /\S[\s\S]*/,
+				inside: Prism.languages.c
+			}
+		}
+	}
+});
+
+Prism.languages.insertBefore('c', 'function', {
+	// highlight predefined macros as constants
+	'constant': /\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/
+});
+
+delete Prism.languages.c['boolean'];
+
+(function (Prism) {
+
+	var string = /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;
+
+	Prism.languages.css = {
+		'comment': /\/\*[\s\S]*?\*\//,
+		'atrule': {
+			pattern: RegExp('@[\\w-](?:' + /[^;{\s"']|\s+(?!\s)/.source + '|' + string.source + ')*?' + /(?:;|(?=\s*\{))/.source),
+			inside: {
+				'rule': /^@[\w-]+/,
+				'selector-function-argument': {
+					pattern: /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,
+					lookbehind: true,
+					alias: 'selector'
+				},
+				'keyword': {
+					pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/,
+					lookbehind: true
+				}
+				// See rest below
+			}
+		},
+		'url': {
+			// https://drafts.csswg.org/css-values-3/#urls
+			pattern: RegExp('\\burl\\((?:' + string.source + '|' + /(?:[^\\\r\n()"']|\\[\s\S])*/.source + ')\\)', 'i'),
+			greedy: true,
+			inside: {
+				'function': /^url/i,
+				'punctuation': /^\(|\)$/,
+				'string': {
+					pattern: RegExp('^' + string.source + '$'),
+					alias: 'url'
+				}
+			}
+		},
+		'selector': {
+			pattern: RegExp('(^|[{}\\s])[^{}\\s](?:[^{};"\'\\s]|\\s+(?![\\s{])|' + string.source + ')*(?=\\s*\\{)'),
+			lookbehind: true
+		},
+		'string': {
+			pattern: string,
+			greedy: true
+		},
+		'property': {
+			pattern: /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,
+			lookbehind: true
+		},
+		'important': /!important\b/i,
+		'function': {
+			pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,
+			lookbehind: true
+		},
+		'punctuation': /[(){};:,]/
+	};
+
+	Prism.languages.css['atrule'].inside.rest = Prism.languages.css;
+
+	var markup = Prism.languages.markup;
+	if (markup) {
+		markup.tag.addInlined('style', 'css');
+		markup.tag.addAttribute('style', 'css');
+	}
+
+}(Prism));
+
+(function (Prism) {
+
+	Prism.languages.typescript = Prism.languages.extend('javascript', {
+		'class-name': {
+			pattern: /(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,
+			lookbehind: true,
+			greedy: true,
+			inside: null // see below
+		},
+		'builtin': /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/,
+	});
+
+	// The keywords TypeScript adds to JavaScript
+	Prism.languages.typescript.keyword.push(
+		/\b(?:abstract|declare|is|keyof|readonly|require)\b/,
+		// keywords that have to be followed by an identifier
+		/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
+		// This is for `import type *, {}`
+		/\btype\b(?=\s*(?:[\{*]|$))/
+	);
+
+	// doesn't work with TS because TS is too complex
+	delete Prism.languages.typescript['parameter'];
+	delete Prism.languages.typescript['literal-property'];
+
+	// a version of typescript specifically for highlighting types
+	var typeInside = Prism.languages.extend('typescript', {});
+	delete typeInside['class-name'];
+
+	Prism.languages.typescript['class-name'].inside = typeInside;
+
+	Prism.languages.insertBefore('typescript', 'function', {
+		'decorator': {
+			pattern: /@[$\w\xA0-\uFFFF]+/,
+			inside: {
+				'at': {
+					pattern: /^@/,
+					alias: 'operator'
+				},
+				'function': /^[\s\S]+/
+			}
+		},
+		'generic-function': {
+			// e.g. foo<T extends "bar" | "baz">( ...
+			pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
+			greedy: true,
+			inside: {
+				'function': /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+				'generic': {
+					pattern: /<[\s\S]+/, // everything after the first <
+					alias: 'class-name',
+					inside: typeInside
+				}
+			}
+		}
+	});
+
+	Prism.languages.ts = Prism.languages.typescript;
+
+}(Prism));
+
+(function (Prism) {
+
+	var javascript = Prism.util.clone(Prism.languages.javascript);
+
+	var space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
+	var braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
+	var spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
+
+	/**
+	 * @param {string} source
+	 * @param {string} [flags]
+	 */
+	function re(source, flags) {
+		source = source
+			.replace(/<S>/g, function () { return space; })
+			.replace(/<BRACES>/g, function () { return braces; })
+			.replace(/<SPREAD>/g, function () { return spread; });
+		return RegExp(source, flags);
+	}
+
+	spread = re(spread).source;
+
+
+	Prism.languages.jsx = Prism.languages.extend('markup', javascript);
+	Prism.languages.jsx.tag.pattern = re(
+		/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
+	);
+
+	Prism.languages.jsx.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/;
+	Prism.languages.jsx.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/;
+	Prism.languages.jsx.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
+	Prism.languages.jsx.tag.inside['comment'] = javascript['comment'];
+
+	Prism.languages.insertBefore('inside', 'attr-name', {
+		'spread': {
+			pattern: re(/<SPREAD>/.source),
+			inside: Prism.languages.jsx
+		}
+	}, Prism.languages.jsx.tag);
+
+	Prism.languages.insertBefore('inside', 'special-attr', {
+		'script': {
+			// Allow for two levels of nesting
+			pattern: re(/=<BRACES>/.source),
+			alias: 'language-javascript',
+			inside: {
+				'script-punctuation': {
+					pattern: /^=(?=\{)/,
+					alias: 'punctuation'
+				},
+				rest: Prism.languages.jsx
+			},
+		}
+	}, Prism.languages.jsx.tag);
+
+	// The following will handle plain text inside tags
+	var stringifyToken = function (token) {
+		if (!token) {
+			return '';
+		}
+		if (typeof token === 'string') {
+			return token;
+		}
+		if (typeof token.content === 'string') {
+			return token.content;
+		}
+		return token.content.map(stringifyToken).join('');
+	};
+
+	var walkTokens = function (tokens) {
+		var openedTags = [];
+		for (var i = 0; i < tokens.length; i++) {
+			var token = tokens[i];
+			var notTagNorBrace = false;
+
+			if (typeof token !== 'string') {
+				if (token.type === 'tag' && token.content[0] && token.content[0].type === 'tag') {
+					// We found a tag, now find its kind
+
+					if (token.content[0].content[0].content === '</') {
+						// Closing tag
+						if (openedTags.length > 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token.content[0].content[1])) {
+							// Pop matching opening tag
+							openedTags.pop();
+						}
+					} else {
+						if (token.content[token.content.length - 1].content === '/>') ; else {
+							// Opening tag
+							openedTags.push({
+								tagName: stringifyToken(token.content[0].content[1]),
+								openedBraces: 0
+							});
+						}
+					}
+				} else if (openedTags.length > 0 && token.type === 'punctuation' && token.content === '{') {
+
+					// Here we might have entered a JSX context inside a tag
+					openedTags[openedTags.length - 1].openedBraces++;
+
+				} else if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces > 0 && token.type === 'punctuation' && token.content === '}') {
+
+					// Here we might have left a JSX context inside a tag
+					openedTags[openedTags.length - 1].openedBraces--;
+
+				} else {
+					notTagNorBrace = true;
+				}
+			}
+			if (notTagNorBrace || typeof token === 'string') {
+				if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces === 0) {
+					// Here we are inside a tag, and not inside a JSX context.
+					// That's plain text: drop any tokens matched.
+					var plainText = stringifyToken(token);
+
+					// And merge text with adjacent text
+					if (i < tokens.length - 1 && (typeof tokens[i + 1] === 'string' || tokens[i + 1].type === 'plain-text')) {
+						plainText += stringifyToken(tokens[i + 1]);
+						tokens.splice(i + 1, 1);
+					}
+					if (i > 0 && (typeof tokens[i - 1] === 'string' || tokens[i - 1].type === 'plain-text')) {
+						plainText = stringifyToken(tokens[i - 1]) + plainText;
+						tokens.splice(i - 1, 1);
+						i--;
+					}
+
+					tokens[i] = new Prism.Token('plain-text', plainText, null, plainText);
+				}
+			}
+
+			if (token.content && typeof token.content !== 'string') {
+				walkTokens(token.content);
+			}
+		}
+	};
+
+	Prism.hooks.add('after-tokenize', function (env) {
+		if (env.language !== 'jsx' && env.language !== 'tsx') {
+			return;
+		}
+		walkTokens(env.tokens);
+	});
+
+}(Prism));
+
+(function (Prism) {
+	var typescript = Prism.util.clone(Prism.languages.typescript);
+	Prism.languages.tsx = Prism.languages.extend('jsx', typescript);
+
+	// doesn't work with TS because TS is too complex
+	delete Prism.languages.tsx['parameter'];
+	delete Prism.languages.tsx['literal-property'];
+
+	// This will prevent collisions between TSX tags and TS generic types.
+	// Idea by https://github.com/karlhorky
+	// Discussion: https://github.com/PrismJS/prism/issues/2594#issuecomment-710666928
+	var tag = Prism.languages.tsx.tag;
+	tag.pattern = RegExp(/(^|[^\w$]|(?=<\/))/.source + '(?:' + tag.pattern.source + ')', tag.pattern.flags);
+	tag.lookbehind = true;
+}(Prism));
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const presetLanguages = Object.values(CodeLanguage);
+/**
+ * Processing the code content into different types of nodes.
+ */
+class CodeHighlightParser extends VegaSlimmer {
+  /**
+   * Split the HTML tag to avoid the content render to a html element.
+   *
+   * @example <div> -> ['<', 'div', '>']
+   * @param {string} text - The code content.
+   * @returns {string[]} - The code content array.
+   */
+  splitTag(text) {
+    if (!this.hasSpecialCharacter(text) || text.length < 2) {
+      return [text];
+    }
+    else {
+      const result = [];
+      const textArray = text.split('');
+      let nextIndex = 0;
+      textArray.forEach((item) => {
+        if (item === '<' || item === '>' || item === '/') {
+          result.push(item);
+          nextIndex = result.length;
+        }
+        else {
+          result[nextIndex] = result[nextIndex] ? result[nextIndex] + item : item;
+        }
+      });
+      return result;
+    }
+  }
+  /**
+   * Check the current language is a preset language and the language is not plain text.
+   *
+   * @param {Nullable<string>} language - The input language.
+   * @returns {boolean} - The boolean result.
+   */
+  isHighlightLanguage(language) {
+    return language !== 'plainText' && presetLanguages.includes(language);
+  }
+  /**
+   * Check the text has special character.
+   *
+   * @param {string} text - The test text.
+   * @returns {boolean} - Return true is the text has <, > , /.
+   */
+  hasSpecialCharacter(text) {
+    return /[<|>|\\/]/.test(text);
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], CodeHighlightParser.prototype, "value", void 0);
+
+/**
+ * Use the plugin Prism to highlight the code content.
+ */
+class PrismCodeHighlightParseController extends CodeHighlightParser {
+  /**
+   * Return true when the content and language are defined.
+   *
+   * @returns {boolean} - Boolean value.
+   */
+  canParse() {
+    const { code, language } = this.value || { code: '' };
+    return code && language && this.isHighlightLanguage(language);
+  }
+  /**
+   * Use plugin to parse the string code into an array of nodes with different keywords.
+   *
+   * @returns {CodeNodeType[]} - The object contains content and highlight type.
+   */
+  parse() {
+    const { code, language } = this.value;
+    let result = [];
+    const parseLanguage = prism.languages[language];
+    const tokens = prism.tokenize(code, parseLanguage);
+    result = this.getHighlightNodes(tokens);
+    let lineNumber = 0;
+    return result.map((node, index) => {
+      let className = node.className;
+      if (index === 0 || result[index - 1].text === '\n') {
+        lineNumber++;
+        className = `v-code-line-number ${node.className}`;
+      }
+      return {
+        text: node.text,
+        key: `${index}`,
+        className,
+        mark: `${lineNumber}`,
+      };
+    });
+  }
+  /**
+   * Parse the plugin parse result to a usable array.
+   *
+   * @param {(string | CodeHighlightToken)[]} tokens - The plugin parse result.
+   * @param {string} [type] - The keywords. Such as variable, function-name, attr-name...
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  getHighlightNodes(tokens, type) {
+    const nodes = [];
+    for (const token of tokens) {
+      if (typeof token === 'string') {
+        const partials = token.split(/(\n|\t)/);
+        const partialsLength = partials.length;
+        for (let i = 0; i < partialsLength; i++) {
+          const part = partials[i];
+          if (part) {
+            const textArray = this.splitTag(part);
+            nodes.push(...textArray.map((text) => this.createCodeNode(text, type)));
+          }
+        }
+      }
+      else {
+        const { content } = token;
+        if (typeof content === 'string') {
+          nodes.push(...this.getHighlightNodes([content], token.type));
+        }
+        else if (Array.isArray(content)) {
+          nodes.push(...this.getHighlightNodes(content, token.type));
+        }
+      }
+    }
+    return nodes;
+  }
+  /**
+   * Create a CodeNodeType type object by the code content and highlight type.
+   *
+   * @param {string} text - The code content.
+   * @param {string} highlightType - The highlight type.
+   * @returns {CodeNodeType} - The code node object.
+   */
+  createCodeNode(text, highlightType) {
+    return {
+      text,
+      key: '',
+      className: `token ${highlightType || ''}`,
+      mark: '',
+    };
+  }
+}
+
+/**
+ * Plain text parse logic.
+ */
+class DefaultCodeHighlightParseController extends CodeHighlightParser {
+  /**
+   * Default parser will handle if others not catch.
+   *
+   * @returns {boolean} True value.
+   */
+  canParse() {
+    const { code, language } = this.value || { code: '' };
+    return !code || !language || language === 'plainText' || !this.isHighlightLanguage(language);
+  }
+  /**
+   * The default parse will split the html tag and create the line number.
+   *
+   * @returns {CodeNodeType[]} - The code node array.
+   */
+  parse() {
+    var _a, _b;
+    const code = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '';
+    const nodes = code.split('\n');
+    let result = [];
+    nodes.forEach((item, index) => {
+      result = result.concat(this.splitTag(item).map((text, textIndex) => {
+        return {
+          text: text,
+          key: '',
+          mark: `${index + 1}`,
+          className: textIndex === 0 ? 'v-code-line-number' : '',
+        };
+      }));
+      if (index < nodes.length - 1) {
+        result.push({
+          text: '\n',
+          key: `line-break${index}`,
+          className: 'v-code-line-break',
+          mark: `${index + 1}`,
+        });
+      }
+    });
+    result = result.map((item, index) => {
+      return Object.assign(Object.assign({}, item), { key: `${index}` });
+    });
+    return result;
+  }
+}
+
+const codeColorVariableCss = ":root{--code-orange:#cd3e00;--code-green:#007e7e;--code-purple:#6851f5;--code-gray:#67727e;--code-neutral:rgb(15, 36, 51);--code-neutral-8:rgba(15, 36, 51, 0.8);--code-neutral-7:rgba(15, 36, 51, 0.7)}.dark{--code-orange:#ff9571;--code-green:#73e6dc;--code-purple:#c7bdff;--code-gray:#8b959f;--code-neutral:rgb(252, 252, 252);--code-neutral-8:rgba(252, 252, 252, 0.8);--code-neutral-7:rgba(252, 252, 252, 0.7)}";
+
+const vegaCodeBlockCss = ":host{display:block;border-radius:2px;background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px}:host code{display:block;box-sizing:border-box;color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;font-family:\"Roboto Mono\";font-weight:400;line-height:22px;font-size:16px;white-space:pre-wrap;min-height:22px;tab-size:2px}:host code:focus-visible{outline:none}:host .editor-toolbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:12px;border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px;margin-bottom:12px;user-select:none}:host .editor-toolbar vega-input-select{width:auto;min-width:161px}:host(.show-line-number) code .v-code-line-number::before{content:attr(data-mark);width:var(--v-code-line-number-width);margin-left:var(--v-code-line-number-ml);padding-right:16px;text-align:right;user-select:none;font-style:normal;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));display:inline-block}:host(.show-line-number) code{padding-left:var(--v-code-block-pl)}:host::part(select-container){padding-top:0px;padding-bottom:0px;padding-left:8px;padding-right:8px;border-radius:4px}:host::part(selected-box),:host::part(placeholder){font-size:14px;user-select:none}:host::part(toggle-icon-container){width:12px;height:12px;line-height:12px}:host::part(toggle-icon){width:12px;height:12px}:host(.readonly) .copy-button-container{position:relative}:host(.readonly) .copy-button-container .copy-code-button{position:absolute;top:0px;right:0px}:host(.disabled:not(.highlight)) code{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.disabled.highlight){opacity:0.5}:host(.focus:not(.disabled,.readonly)){outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.highlight) code{color:var(--code-neutral)}code .comment,code .prolog,code .doctype,code .cdata{color:var(--code-gray);font-style:italic}code .namespace{color:var(--code-neutral-7)}code .string,code .attr-value,code .builtin{color:var(--code-green)}code .punctuation,code .operator,code .attr-equals{color:var(--code-gray)}code .entity,code .url,code .symbol,code .number,code .boolean,code .variable,code .constant,code .property,code .regex,code .inserted{color:var(--code-neutral-8)}code .atrule,code .function,code .attr-name{color:var(--code-orange)}code .deleted{color:var(--code-neutral)}code .function-variable{color:#ff0000}code .tag,code .selector,code .keyword{color:var(--code-purple)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCodeBlock = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaRemove = createEvent(this, "vegaRemove", 7);
+    this.remove = createEvent(this, "remove", 7);
+    this.globalSlimmers = {};
+    //TODO: The global style should be removed after the code color change to the color token.
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(codeColorVariableCss);
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.codeBlockRenderer = new VegaCodeBlockRenderer();
+    this.contentRenderer = new VegaCodeBlockContentRenderer();
+    this.copyButtonRenderer = new VegaCodeBlockCopyButtonRenderer();
+    this.valueController = new VegaCodeBlockValueController();
+    this.contentParseController = new CodeContentParseController();
+    this.prismCodeHighlightParser = new PrismCodeHighlightParseController();
+    this.defaultCodeHighlightParser = new DefaultCodeHighlightParseController();
+    this.selectionController = new VegaCodeBlockSelectionController();
+    this.inputController = new CodeBlockInputController();
+    this.focusController = new VegaCodeBlockFocusController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaRemove);
+    this.eventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.codeBlockRenderer.getToolbarContainerRef());
+    /**
+     * Specifies whether the code block editor is in read-only mode.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.readOnly = false;
+    /**
+     * Specifies whether the code block editor is disabled.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether to display the copy button in the code block.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.showCopyButton = true;
+    /**
+     * Specifies whether to display the code line number in the code block.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.showLineNumber = true;
+  }
+  watchEditableChange() {
+  }
+  /**
+   * Check the props value to avoid unnecessary updates.
+   *
+   * @param {unknown} newValue - The new props value.
+   * @param {unknown} oldValue - The old props value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'value' && deepEqual(newValue, oldValue)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Invoke this method to focus the current code block.
+   *
+   * @vegaVersion 2.50.0-RTE-preview
+   */
+  async doFocus() {
+  }
+  render() {
+    const classNames = arrayToClassString([
+      this.readOnly ? 'readonly' : '',
+      this.disabled ? 'disabled' : '',
+      this.showLineNumber ? 'show-line-number' : '',
+      this.prismCodeHighlightParser.canParse() ? 'highlight' : '',
+    ]);
+    return sanitizeVegaComponent(h(Host, { contenteditable: false, class: classNames }, this.codeBlockRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "readOnly": ["watchEditableChange"],
+    "disabled": ["watchEditableChange"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCodeBlock.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "codeBlockRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "copyButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentParseController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "prismCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "defaultCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "inputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "focusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "removeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "eventPreventSlimmer", void 0);
+VegaCodeBlock.style = vegaCodeBlockCss;
+
+export { VegaCodeBlock as vega_code_block };