@magnit-ce/code-example
Version:
A custom HTML element that renders code in a syntax-highlight text block, and the results of that code in a display frame.
1,429 lines (1,373 loc) • 78.8 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/code-example.ts
var code_example_exports = {};
__export(code_example_exports, {
CodeExampleElement: () => CodeExampleElement,
CodeExampleSlotKeys: () => CodeExampleSlotKeys
});
module.exports = __toCommonJS(code_example_exports);
// src/code-example.css?raw
var code_example_default = `:host,* { box-sizing: border-box; }
:host
{
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
--gap-small: 3px;
--gap-medium: 6px;
--spinner-track: oklch(25.11% 0.006 258.36 / .2);
--spinner-thumb: oklch(25.11% 0.006 258.36);
--surface-header: oklch(25.11% 0.006 258.36);
--surface-source: oklch(91.87% 0.003 264.54);
--surface-html: oklch(74.61% 0.171 51.56);
--surface-css: oklch(54.87% 0.222 260.33);
--surface-code: oklch(80.73% 0.002 247.84);
--surface-js: oklch(89% 0.146 91.5);
--surface-success: oklch(70.03% 0.194 144.71);
--surface-error: oklch(54.41% 0.214 19.06);
--text-header: oklch(61.01% 0.005 271.34);
--text-source: oklch(25.11% 0.006 258.36);
--text-html: oklch(32.49% 0.113 51.98);
--text-css: oklch(89.66% 0.046 260.67);
--text-code: oklch(35.02% 0.005 236.66);
--text-js: oklch(42.29% 0.097 91.9);
--badge-size: 26px;
color-scheme: light dark;
display: grid;
gap: var(--gap-medium);
margin: var(--gap-medium);
font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif)
}
#sources
{
display: grid;
gap: var(--gap-medium);
overflow: hidden;
grid-row: 1;
}
.panel
{
overflow: hidden;
counter-reset: line;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
#code-source-panel
{
display: none;
}
:host(.show-code) #code-source-panel
{
display: grid;
}
#html-source-panel
{
display: none;
}
:host(.show-html) #html-source-panel
{
display: grid;
}
#style-source-panel
{
display: none;
}
:host(.show-style) #style-source-panel
{
display: grid;
}
.source-header
{
grid-column: span 2;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: flex-end;
font-size: 18px;
font-weight: bold;
gap: var(--gap-medium);
padding: var(--gap-medium);
background-color: var(--surface-header);
color: var(--text-header);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
user-select: none;
}
.badge
{
width: var(--badge-size);
height: var(--badge-size);
display: inline-flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 9px;
font-weight: bold;
padding: 2px;
border-radius: 2px;
box-sizing: border-box;
}
#html-source-badge
{
background-color: var(--surface-html);
color: var(--text-html);
font-size: 7px;
}
#style-source-badge
{
background-color: var(--surface-css);
color: var(--text-css);
}
#code-source-badge
{
background-color: var(--surface-code);
color: var(--text-code);
}
.language-js #code-source-badge
,.language-javascript #code-source-badge
{
background-color: var(--surface-js);
color: var(--text-js);
}
button.copy
{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: none;
border: none;
padding: 0;
margin: 0;
--icon-primary-color: var(--text-header);
--icon-secondary-color: var(--surface-header);
}
button.copy:hover
{
--icon-primary-color: var(--surface-source);
}
.icon
{
width: var(--copy-button-size, 20px);
height: var(--copy-button-size, 20px);
grid-column: 1;
grid-row: 1;
}
.icon.success
{
--icon-primary-color: var(--surface-success);
opacity: 0;
}
.icon.error
{
--icon-primary-color: var(--surface-error);
opacity: 0;
}
.panel.success .icon.success
,.panel.error .icon.error
{
opacity: 1;
}
.panel:is(.success,.error) .icon.copy
{
opacity: 0;
}
.panel.success .icon.success
{
animation: bounce-in .75s ease forwards;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: scale(.3);
}
20% {
opacity: 1;
transform: scale(1.1);
}
30% { transform: scale(.9); }
100% { transform: scale(1) rotate(1deg); }
}
.panel.error .icon.error {
animation: shake .35s linear forwards;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30% { transform: translateX(-2px); }
50%, 70% { transform: translateX(-1px); }
90% { transform: translateX(-.5px); }
20% { transform: translateX(2px); }
40%, 60% { transform: translateX(1px); }
80% { transform: translateX(.5px); }
}
code.source
{
min-height: 27px;
min-width: 70px;
display: block;
border-bottom-right-radius: 3px;
}
.line-numbers
{
border-right: solid 1px #222;
display: grid;
grid-auto-rows: min-content;
width: 4ch;
color: #ccc;
background: #2d2d2d;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
white-space: pre;
line-height: 1.5;
padding: 1em 0;
border-bottom-left-radius: 3px;
}
.line-number
{
display: flex;
justify-content: flex-end;
counter-increment: line;
}
.line-number:before
{
content: counter(line);
display: inline-block;
text-align: right;
padding-right: 0.5em;
color: #888;
user-select: none;
}
#preview
{
border: none;
width: 100%;
height: 100%;
grid-row: 1;
grid-column: 2;
}
::slotted(preview)
{
grid-row: 1;
grid-column: 2;
}
#spinner
{
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: center;
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid var(--spinner-track);
border-right: 1.1em solid var(--spinner-track);
border-bottom: 1.1em solid var(--spinner-track);
border-left: 1.1em solid var(--spinner-thumb);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: spin 1.1s infinite linear;
animation: spin 1.1s infinite linear;
opacity: 0;
pointer-events: none;
z-index: 10;
}
#spinner,
#spinner:after
{
border-radius: 50%;
width: var(--spinner-size, 50px);
height: var(--spinner-size, 50px);
}
:host(.loading) #spinner
,:host([loading]) #spinner
{
opacity: 1;
pointer-events: initial;
}
:host([theme="vs-dark"])
,:host([theme="hc-black"])
{
--spinner-track: rgba(255, 255, 255, 0.2);
--spinner-thumb: #ffffff;
}
@keyframes spin
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#icon-templates
{
display: none;
}
@media (max-width: 665px)
{
:host
{
grid-template-columns: 1fr;
}
}`;
// src/prism-tomorrow.css?raw
var prism_tomorrow_default = `/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"]{
color: #ccc;
background: #2d2d2d;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
white-space: pre;
line-height: 1.5;
padding: 1em;
overflow: auto;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
`;
// src/code-example.html?raw
var code_example_default2 = '<div id="sources">\n <div id="code-source-panel" class="panel">\n <header id="code-source-header" class="source-header">\n <slot name="code-badge">\n <span id="code-source-badge" class="badge"></></span>\n </slot>\n <slot name="code-title">\n <span id="code-source-title" class="title">Code</span>\n </slot>\n <button class="copy" type="button" title="Copy example code">\n <svg class="icon copy" part="svg icon button-icon copy code">\n <use href="#icon-definition_copy"></use>\n </svg>\n <svg class="icon error" part="svg icon button-icon error code">\n <use href="#icon-definition_cancel-cross"></use>\n </svg>\n <svg class="icon success" part="svg icon button-icon success code">\n <use href="#icon-definition_confirm-check"></use>\n </svg>\n </button>\n </header>\n <div class="line-numbers"></div>\n <code id="code-source" class="source line-numbers"></code>\n </div>\n <div id="html-source-panel" class="panel">\n <header id="html-source-header" class="source-header">\n <span id="html-source-badge" class="badge">HTML</span>\n <span id="html-source-title" class="title">HTML</span>\n <button class="copy" type="button" title="Copy html code">\n <svg class="icon copy" part="svg icon button-icon copy html">\n <use href="#icon-definition_copy"></use>\n </svg>\n <svg class="icon error" part="svg icon button-icon error html">\n <use href="#icon-definition_cancel-cross"></use>\n </svg>\n <svg class="icon success" part="svg icon button-icon success html">\n <use href="#icon-definition_confirm-check"></use>\n </svg>\n </button>\n </header>\n <div class="line-numbers"></div>\n <code id="html-source" class="source"></code>\n </div>\n <div id="style-source-panel" class="panel">\n <header id="style-source-header" class="source-header">\n <span id="style-source-badge" class="badge">CSS</span>\n <span id="style-source-title" class="title">CSS</span>\n <button class="copy" type="button" title="Copy style code">\n <svg class="icon copy" part="svg icon button-icon copy style">\n <use href="#icon-definition_copy"></use>\n </svg>\n <svg class="icon error" part="svg icon button-icon error style">\n <use href="#icon-definition_cancel-cross"></use>\n </svg>\n <svg class="icon success" part="svg icon button-icon success style">\n <use href="#icon-definition_confirm-check"></use>\n </svg>\n </button>\n </header>\n <div class="line-numbers"></div>\n <code id="style-source" class="source"></code>\n </div>\n</div>\n<slot name="preview">\n <iframe id="preview"></iframe>\n</slot>\n<div id="spinner"></div>\n<template id="preview-template">\n {style}\n {slot}\n {script}\n</template>\n<div id="icon-templates">\n <svg id="icon-definition_copy" class="icon copy" viewBox="0 0 22.812714 26.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n <rect style="fill:var(--icon-primary-color,CanvasText);stroke:var(--icon-secondary-color,canvas);fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" width="13.417392" height="18.483608" x="3.3747442" y="5.2238607" rx="0.35822684" ry="0.41754472"></rect>\n <rect style="fill:var(--icon-primary-color,CanvasText);stroke:var(--icon-secondary-color,canvas);fill-opacity:1;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" width="13.417392" height="18.483608" x="8.0205779" y="1.1071939" rx="0.35822684" ry="0.41754472"></rect>\n </svg>\n <svg id="icon-definition_cancel-cross" class="icon cancel-cross" viewBox="0 0 22.812714 22.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n <path\n style="color:#000000;fill:var(--icon-primary-color,InfoText);stroke:var(--icon-secondary-color,InfoBackground);stroke-linecap:square;stroke-miterlimit:6.3;stroke-dashoffset:29.2913;stroke-opacity:1;-inkscape-stroke:none"\n d="m 1237.4389,207.63366 -1.8991,1.8987 a 0.65841136,0.65841136 90.003442 0 0 0,0.93116 l 0.4831,0.48317 a 14628.329,14628.329 44.999244 0 0 0.9312,0.93118 l 3.7936,3.79311 a 0.65840885,0.65840885 89.998393 0 1 0,0.93116 l -3.7936,3.7936 a 8783.6896,8783.6896 135.00442 0 1 -0.9313,0.93111 l -0.4829,0.48283 a 0.65811,0.65811 89.993977 0 0 10e-5,0.93094 l 1.8987,1.89741 a 0.65867085,0.65867085 179.98891 0 0 0.9314,-1.8e-4 l 0.4826,-0.48267 a 45427.77,45427.77 134.99941 0 1 0.9312,-0.93119 l 3.7931,-3.79308 a 0.65848899,0.65848899 179.99848 0 1 0.9312,-2e-5 l 3.7936,3.79312 a 10110.91,10110.91 44.992994 0 0 0.9313,0.93108 l 0.483,0.48285 a 0.65856615,0.65856615 179.99438 0 0 0.9313,-9e-5 l 1.897,-1.89705 a 0.65833101,0.65833101 89.994378 0 0 -10e-5,-0.93111 l -0.483,-0.48285 a 5293.5057,5293.5057 44.99639 0 1 -0.9313,-0.93113 l -3.793,-3.79354 a 0.65849247,0.65849247 90.001607 0 1 0,-0.93122 l 3.793,-3.79305 a 149190.44,149190.44 134.99995 0 1 0.9312,-0.93119 l 0.4832,-0.48321 a 0.65863247,0.65863247 90.008202 0 0 10e-5,-0.93132 l -1.8972,-1.89834 a 0.65838576,0.65838576 0.01346964 0 0 -0.9312,-2.2e-4 l -0.483,0.48285 a 7148.543,7148.543 135.00546 0 0 -0.9313,0.9311 l -3.7936,3.79359 a 0.65841791,0.65841791 0.00151591 0 1 -0.9312,-3e-5 l -3.7931,-3.79353 a 52707.551,52707.551 45.002134 0 0 -0.9312,-0.93122 l -0.4826,-0.48267 a 0.65849044,0.65849044 0.00323988 0 0 -0.9312,-5e-5 z"\n transform="translate(-1232.6358,-204.72848)" />\n </svg>\n <svg id="icon-definition_confirm-check" class="icon confirm-check" viewBox="0 0 22.812714 22.814663" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n <path\n style="color:#000000;fill:var(--icon-primary-color,InfoText);stroke:var(--icon-secondary-color,InfoBackground);stroke-linecap:square;stroke-miterlimit:6.3;stroke-dashoffset:29.2913;stroke-opacity:1;-inkscape-stroke:none"\n d="m 1217.8244,205.78897 -0.2601,0.45136 a 1678.5796,1678.5796 119.92232 0 0 -0.7375,1.28138 l -5.9817,10.40385 a 0.56505518,0.56505518 172.50336 0 1 -0.8902,0.11714 l -2.5269,-2.53657 a 11807.915,11807.915 45.113224 0 1 -1.0433,-1.04749 l -0.369,-0.37041 a 0.73898684,0.73898684 0.10741692 0 0 -1.0452,-0.002 l -1.7867,1.78058 a 0.73898921,0.73898921 90.088719 0 0 -0,1.04526 l 0.3681,0.36914 a 1932.0309,1932.0309 45.101339 0 1 1.0436,1.04728 l 6.2204,6.24724 a 0.56490867,0.56490867 172.50982 0 0 0.8901,-0.11702 l 8.5912,-14.94289 a 3197.1389,3197.1389 119.88313 0 0 0.7367,-1.28189 l 0.2597,-0.45232 a 0.7394065,0.7394065 74.876753 0 0 -0.2727,-1.00934 l -2.185,-1.25556 a 0.74005456,0.74005456 164.91559 0 0 -1.0099,0.27222 z"\n transform="translate(-1200.7725,-203.67043)" />\n </svg>\n</div>';
// node_modules/.pnpm/prism-esm@1.29.0-fix.6/node_modules/prism-esm/prism-core.js
var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {};
var environment = _self;
var Prism = class {
/**
* @param {PrismOptions} options
*/
constructor(options = {}) {
let plainTextGrammar = {};
const {
disableWorkerMessageHandler,
manual
} = options;
this.manual = manual;
if (this.manual == null) {
this.manual = true;
}
this.plugins = {};
const _ = this;
this.disableWorkerMessageHandler = Boolean(disableWorkerMessageHandler);
this.Token = Token;
this.util = new Util(this);
const util = this.util;
this.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: (id, redef) => {
let lang2 = this.util.clone(this.languages[id]);
for (var key in redef) {
lang2[key] = redef[key];
}
return lang2;
},
/**
* 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: (inside, before, insert, root) => {
if (!root) {
root = /** @type {Record<string, unknown>} */
this.languages;
}
let grammar = root[inside];
let ret = {};
for (let token in grammar) {
if (grammar.hasOwnProperty(token)) {
if (token == before) {
for (var newToken in insert) {
if (insert.hasOwnProperty(newToken)) {
ret[newToken] = insert[newToken];
}
}
}
if (!insert.hasOwnProperty(token)) {
ret[token] = grammar[token];
}
}
}
var old = root[inside];
root[inside] = ret;
this.languages.DFS(this.languages, function(key, value) {
if (value === old && key != inside) {
this[key] = ret;
}
});
return ret;
},
// Traverse a language definition with Depth First Search
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;
this.DFS(property, callback, null, visited);
} else if (propertyType === "Array" && !visited[objId(property)]) {
visited[objId(property)] = true;
this.DFS(property, callback, i, visited);
}
}
}
}
};
this.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);
}
}
};
if (!environment.document) {
if (!environment.addEventListener) {
return _;
}
if (!_.disableWorkerMessageHandler) {
environment.addEventListener("message", function(evt) {
var message = JSON.parse(evt.data);
var lang2 = message.language;
var code = message.code;
var immediateClose = message.immediateClose;
environment.postMessage(_.highlight(code, _.languages[lang2], lang2));
if (immediateClose) {
_self.close();
}
}, false);
}
return _;
}
function highlightAutomaticallyCallback() {
if (!_.manual) {
_.highlightAll();
}
}
const script = this.util.currentScript();
if (script) {
this.filename = script.src;
if (script.hasAttribute("data-manual")) {
_.manual = true;
}
}
if (!_.manual) {
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);
}
}
}
}
/**
* 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(async, callback) {
this.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(container, async, callback) {
var env = {
callback,
container,
selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'
};
this.hooks.run("before-highlightall", env);
env.elements = Array.prototype.slice.apply(env.container.querySelectorAll(env.selector));
this.hooks.run("before-all-elements-highlight", env);
for (var i = 0, element; element = env.elements[i++]; ) {
this.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.
* @public
*/
highlightElement(element, async, callback) {
var language = this.util.getLanguage(element);
var grammar = this.languages[language];
this.util.setLanguage(element, language);
var parent = element.parentElement;
if (parent && parent.nodeName.toLowerCase() === "pre") {
this.util.setLanguage(parent, language);
}
var code = element.textContent;
var env = {
element,
language,
grammar,
code
};
const insertHighlightedCode = (highlightedCode) => {
env.highlightedCode = highlightedCode;
this.hooks.run("before-insert", env);
env.element.innerHTML = env.highlightedCode;
this.hooks.run("after-highlight", env);
this.hooks.run("complete", env);
callback && callback.call(env.element);
};
this.hooks.run("before-sanity-check", env);
parent = env.element.parentElement;
if (parent && parent.nodeName.toLowerCase() === "pre" && !parent.hasAttribute("tabindex")) {
parent.setAttribute("tabindex", "0");
}
if (!env.code) {
this.hooks.run("complete", env);
callback && callback.call(env.element);
return;
}
this.hooks.run("before-highlight", env);
if (!env.grammar) {
insertHighlightedCode(this.util.encode(env.code));
return;
}
if (async && _self.Worker) {
var worker = new Worker(this.filename);
worker.onmessage = function(evt) {
insertHighlightedCode(evt.data);
};
worker.postMessage(JSON.stringify({
language: env.language,
code: env.code,
immediateClose: true
}));
} else {
insertHighlightedCode(this.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(text, grammar, language) {
var env = {
code: text,
grammar,
language
};
this.hooks.run("before-tokenize", env);
if (!env.grammar) {
throw new Error('The language "' + env.language + '" has no grammar.');
}
env.tokens = this.tokenize(env.code, env.grammar);
this.hooks.run("after-tokenize", env);
return Token.stringify(this.util.encode(env.tokens), env.language, this);
}
/**
* 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(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, this);
return toArray(tokenList);
}
};
var Token = class {
/**
* @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.
*/
constructor(type, content, alias, matchedStr) {
this.type = type;
this.content = content;
this.alias = alias;
this.length = (matchedStr || "").length | 0;
}
/**
* 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.
* @param {Prism} prism - The instance of prism to use for "wrap" hooks
* @returns {string} The HTML representation of the token or token stream.
* @memberof Token
* @static
*/
static stringify(o, language, prism) {
const _ = this;
if (typeof o == "string") {
return o;
}
if (Array.isArray(o)) {
var s = "";
o.forEach(function(e) {
s += _.stringify(
/** @type {string} */
e,
language,
prism
);
});
return s;
}
var env = {
type: o.type,
content: _.stringify(o.content, language, prism),
tag: "span",
classes: ["token", o.type],
attributes: {},
language
};
var aliases = o.alias;
if (aliases) {
if (Array.isArray(aliases)) {
Array.prototype.push.apply(env.classes, aliases);
} else {
env.classes.push(aliases);
}
}
prism.hooks.run("wrap", env);
var attributes = "";
for (var name in env.attributes) {
attributes += " " + name + '="' + (env.attributes[name] || "").replace(/"/g, """) + '"';
}
return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
}
};
var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i;
var uniqueId = 0;
var Util = class {
/**
* @param {Prism} prism
*/
constructor(prism) {
this.prism = prism;
}
/**
* @param {Token | Token[] | string} tokens
* @return {Token | Token[] | string}
*/
encode = (tokens) => {
if (tokens instanceof Token) {
const content = (
/** @type {string} */
tokens.content
);
return new Token(
tokens.type,
/** @type {string} */
this.encode(content),
tokens.alias
);
} else if (Array.isArray(tokens)) {
return tokens.map((token) => (
/** @type {Token} */
this.encode(token)
));
} else {
return tokens.replace(/&/g, "&").replace(/</g, "<").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(o) {
return Object.prototype.toString.call(o).slice(8, -1);
}
/**
* 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(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(element, language) {
element.className = element.className.replace(RegExp(lang, "gi"), "");
element.classList.add("language-" + language);
}
/**
* Returns a unique number for the given object. Later calls will still return the same number.
*
* @param {Object} obj
* @returns {number}
*/
objId(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.
*
* @template T
* @param {T} o
* @returns {T}
*/
clone(o) {
return structuredClone(o);
}
/**
* 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(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;
}
/**
* Returns the script element that is currently executing.
*
* This does __not__ work for line script element.
*
* @returns {HTMLScriptElement | null}
*/
currentScript() {
if (typeof document === "undefined") {
return null;
}
if ("currentScript" in document && 1 < 2) {
return (
/** @type {any} */
document.currentScript
);
}
try {
throw new Error();
} catch (err) {
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;
}
}
};
function matchPattern(pattern, pos, text, lookbehind) {
pattern.lastIndex = pos;
var match = pattern.exec(text);
if (match && lookbehind && match[1]) {
var lookbehindLength = match[1].length;
match.index += lookbehindLength;
match[0] = match[0].slice(lookbehindLength);
}
return match;
}
function matchGrammar(text, tokenList, grammar, startNode, startPos, prismInstance, 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) {
var flags = patternObj.pattern.toString().match(/[imsuy]*$/)[0];
patternObj.pattern = RegExp(patternObj.pattern.source, flags + "g");
}
var pattern = patternObj.pattern || patternObj;
for (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) {
return;
}
if (str instanceof Token) {
continue;
}
var removeCount = 1;
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;
p += currentNode.value.length;
while (from >= p) {
currentNode = currentNode.next;
p += currentNode.value.length;
}
p -= currentNode.value.length;
pos = p;
if (currentNode.value instanceof Token) {
continue;
}
for (var k = currentNode; k !== tokenList.tail && (p < to || typeof k.value === "string"); k = k.next) {
removeCount++;
p += k.value.length;
}
removeCount--;
str = text.slice(pos, p);
match.index -= pos;
} else {
match = matchPattern(pattern, 0, str, lookbehind);
if (!match) {
continue;
}
}
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 ? prismInstance.tokenize(matchStr, inside) : matchStr, alias, matchStr);
currentNode = addAfter(tokenList, removeFrom, wrapped);
if (after) {
addAfter(tokenList, currentNode, after);
}
if (removeCount > 1) {
var nestedRematch = {
cause: token + "," + j,
reach
};
matchGrammar(text, tokenList, grammar, currentNode.prev, pos, prismInstance, nestedRematch);
if (rematch && nestedRematch.reach > rematch.reach) {
rematch.reach = nestedRematch.reach;
}
}
}
}
}
}
function LinkedList() {
var head = { value: null, prev: null, next: null };
var tail = { value: null, prev: head, next: null };
head.next = tail;
this.head = head;
this.tail = tail;
this.length = 0;
}
function addAfter(list, node, value) {
var next = node.next;
var newNode = { value, prev: node, next };
node.next = newNode;
next.prev = newNode;
list.length++;
return newNode;
}
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;
}
function toArray(list) {
var array = [];
var node = list.head.next;
while (node !== list.tail) {
array.push(node.value);
node = node.next;
}
return array;
}
// node_modules/.pnpm/prism-esm@1.29.0-fix.6/node_modules/prism-esm/components/prism-markup.js
function loader(Prism3, options) {
if (typeof Prism3 === "undefined") return;
if (options?.force !== true && Prism3.languages["markup"]) {
return;
}
Prism3.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
]
};
Prism3.languages.markup["tag"].inside["attr-value"].inside["entity"] = Prism3.languages.markup["entity"];
Prism3.languages.markup["doctype"].inside["internal-subset"].inside = Prism3.languages.markup;
Prism3.hooks.add("wrap", function(env) {
if (env.type === "entity") {
env.attributes["title"] = env.content.replace(/&/, "&");
}
});
Object.defineProperty(Prism3.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, lang2) {
var includedCdataInside = {};
includedCdataInside["language-" + lang2] = {
pattern: /(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,