{"id":20653473,"url":"https://github.com/t-ski/html-sourcecode-element","last_synced_at":"2026-03-04T05:01:42.055Z","repository":{"id":212304968,"uuid":"519624593","full_name":"t-ski/html-sourcecode-element","owner":"t-ski","description":"Rich HTML source code element with a native API. Try yourself: https://jsfiddle.net/uy17badq","archived":false,"fork":false,"pushed_at":"2024-07-03T20:58:40.000Z","size":27010,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-04T07:49:18.112Z","etag":null,"topics":["code-editor","code-element","code-snippets","html","native-api"],"latest_commit_sha":null,"homepage":"https://gist.github.com/t-ski/13ffeede61ee5a9229cececf9f36c138","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/t-ski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-30T21:31:54.000Z","updated_at":"2024-08-11T21:06:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"bad74450-9606-4b98-976b-153327000359","html_url":"https://github.com/t-ski/html-sourcecode-element","commit_stats":null,"previous_names":["t-ski/html-code-component","t-ski/html-code-element","t-ski/html-sourcecode-element"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/t-ski/html-sourcecode-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t-ski%2Fhtml-sourcecode-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t-ski%2Fhtml-sourcecode-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t-ski%2Fhtml-sourcecode-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t-ski%2Fhtml-sourcecode-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/t-ski","download_url":"https://codeload.github.com/t-ski/html-sourcecode-element/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/t-ski%2Fhtml-sourcecode-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30071895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T03:25:38.285Z","status":"ssl_error","status_checked_at":"2026-03-04T03:25:05.086Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-editor","code-element","code-snippets","html","native-api"],"created_at":"2024-11-16T17:44:27.226Z","updated_at":"2026-03-04T05:01:42.035Z","avatar_url":"https://github.com/t-ski.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTMLSourceCodeElement\n\n\u003ca href=\"https://www.npmjs.com/package/@t-ski/html-sourcecode-element\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/%40t-ski%2Fhtml-sourcecode-element?logo=npm\" alt=\"NPM\"\u003e\u003c/a\u003e\n\u0026hairsp;\n\u003ca href=\"https://github.com/t-ski/html-sourcecode-element/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/t-ski/html-sourcecode-element\" alt=\"License\"\u003e\u003c/a\u003e\n\u0026hairsp;\n\u003ca href=\"https://gist.github.com/t-ski/13ffeede61ee5a9229cececf9f36c138\"\u003e\u003cimg src=\"https://img.shields.io/badge/HTMLElement-%3Csource%E2%80%93code%3E-orchid?logo=html\" alt=\"Example\"\u003e\u003c/a\u003e\n\nRich HTML code element with a native API.\n\n\u003ca href=\"#integration\"\u003e\u003cimg src=\"./readme/hero.gif\" width=\"500\"\u003e\u003c/a\u003e\n\n[1. Integration](#%EF%B8%8F-integration)  \n[2. Attributes](#%EF%B8%8F-attributes)  \n\u0026emsp; [2.1 `copy`](#copy)  \n\u0026emsp; [2.2 `edit`](#edit)  \n\u0026emsp; [2.3 `type`](#type)  \n\u0026emsp; [2.4 `language`](#language)  \n\u0026emsp; [2.5 `scroll`](#scroll)  \n[3. Themes](#%EF%B8%8F-themes)  \n\u0026emsp; [3.1 `min`](#min)  \n\u0026emsp; [3.2 `common`](#common)  \n\u0026emsp; [3.3 `outline`](#outline)  \n[4. Syntax Highlighting](#-syntax-highlighting)  \n\u0026emsp; [4.1 `glitch`](#glitch)  \n\u0026emsp; [4.2 `matrix`](#matrix)  \n\u0026emsp; [4.3 `reef`](#reef)  \n\n## ⬇️ Integration\n\n#### via CDN\n\n\u003csup\u003e`recommended`\u003c/sup\u003e\n\n``` html\n\u003cscript src=\"https://unpkg.com/@t-ski/html-sourcecode-element/dist/HTMLSourceCodeElement.\u003ctheme\u003e[.\u003chighlighting\u003e].js\"\u003e\u003c/script\u003e\n```\n\n- `\u003ctheme\u003e` is a placeholder for an element theme identifier ([browse Themes](#%EF%B8%8F-themes)).\n- `\u003chighlighting\u003e` specifies an optional syntax highlighting scheme ([browse Highlighting](#-syntax-highlighting)).\n\n#### via NPM\n\n``` console\nnpm i @t-ski/html-sourcecode-element\n```\n\n``` ts\ndefault function(theme: string = \"min\", highlighting?: string);\n```\n\n``` js\nimport HTMLSourceCodeElement from \"@t-ski/html-sourcecode-element\";\n\nHTMLSourceCodeElement(\"common\", \"glitch\");\n```\n\n\u003e ⚠️ Integration via NPM serves ECMAScript module type bundlers.\n\n#### Usage\n\n``` html\n\u003csource-code edit type language=\"py\"\u003e\n  print('Hello, world!')\n\u003c/source-code\u003e`\n```\n\n\u003e ℹ️ Anything slotted within the `\u003csource-code\u003e` is interpreted as code contents. HTML code does in particular not have to be escaped – except for script tags.\n\n## ☑️ Attributes\n\n#### `copy`\n\n``` html\n\u003csource-code copy\u003e\n```\n\nMake element copyable by hover activated button.\n\n#### `edit`\n\n``` html\n\u003csource-code edit\u003e\n```\n\nMake element editable like a script editor.\n\n#### `scroll`\n\n``` html\n\u003csource-code type\u003e\n```\n\nMake element scrollable at horizontal overflow, instead of wrap.\n\n#### `type`\n\n``` html\n\u003csource-code type\u003e\n```\n\nMake element as if a human would type the code.\n\n#### `language`\n\n``` html\n\u003csource-code language=\"php\"\u003e\n```\n\nSpecify language to help with highlighting (if necessary).\n\n#### `maxheight`\n\n``` html\n\u003csource-code maxheight=\"5\"\u003e\n```\n\nSpecify maximum amount of lines after which to enable vertical scroll.\n\n\u003e ℹ️ A minimum of `5` lines are shown when used with `type`.\n\n---\n\n### 💻 Attributes API\n\nThe DOM class `HTMLSourceCodeElement` is associated with the `\u003csource-code\u003e` tag. The DOM class provides a static configuration function to override certain attributes globally.\n\n``` ts\nHTMLSourceCodeElement\n.globalAttrs(attrs: { [name: string]: boolean; });\n```\n\n``` js\nHTMLSourceCodeElement\n.globalAttrs({\n  copy: true,\n  edit: false\n});\n```\n\n\u003e ℹ️ A global attributes configuration does not invert, but override individual attributes.\n\n## 🖼️ Themes\n\n#### `min`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.min[.\u003csyntax\u003e].js\"\u003e\n```\n\nMinimal editor theme.\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.min.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.min.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n#### `common`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.common[.\u003csyntax\u003e].js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.common.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.common.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n#### `outline`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.outline[.\u003csyntax\u003e].js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.outline.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.outline.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n#### `opaque`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.opaque[.\u003csyntax\u003e].js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.opaque.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.opaque.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n---\n\n### 💻 Theme API\n\nUsing the `addStylesheet()` method, custom styles can be injected into the `\u003csource-code\u003e` shadow DOM. The method exists both statically on `HTMLSourceCodeElement`, as well as on each individual instance. The method must be passed a URL to a stylesheet. Alternatively, an existing `\u003clink\u003e` or `\u003cstyle\u003e` element can be reused through a reference.\n\n``` ts\n(HTMLSourceCodeElement|instanceof HTMLSourceCodeElement)\n.addStylesheet(stylesheet: HTMLStyleElement|HTMLLinkElement|string);\n```\n\nIn a stylesheet, the `:host` selector refers to the encompassing `\u003csource-code\u003e`. The internals of the shadow DOM base on the following markup:\n\n``` html\n\u003cdiv class=\"edit\"\u003e\u003c/div\u003e\n\u003ccode class=\"display\"\u003e\n  \u003ctable\u003e\n    \u003ctr class=\"line\" *\u003e\n        \u003ctd class=\"line-number\"\u003e\n            \u003cspan\u003e\n              \u003c!-- Individual line number --\u003e\n            \u003c/span\u003e\n        \u003c/td\u003e\n        \u003ctd class=\"line-code\"\u003e\n            \u003cpre mirror\u003e\n              \u003c!-- Individual line code --\u003e\n            \u003c/pre\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/code\u003e\n\u003cbutton type=\"button\" class=\"copy\"\u003eCopy\u003c/span\u003e\n```\n\n#### Color Scheme\n\nThemes adopt the colour scheme preferred by the user. Manually adjustable color schemes, however, can use the static `setColorScheme()` method. This way, a specific color scheme can be enforced globally.\n\n``` ts\nHTMLSourceCodeElement.setColorScheme(\"light\" | \"dark\" | \"auto\");\n```\n\n## 🎨 Syntax Highlighting\n\nSyntax highlighting is an optional addition to the basic API. In fact, it requires [highlight.js](https://highlightjs.org/) to work:\n\n``` html\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/@highlightjs/cdn-assets/highlight.min.js\"\u003e\u003c/script\u003e \u003c!-- dependency --\u003e\n  \u003cscript src=\"https://unpkg.com/@t-ski/html-sourcecode-element/dist/HTMLSourceCodeElement.common.glitch.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    document.addEventListener(\"DOMContentLoaded\", () =\u003e {\n      HTMLSourceCodeElement.on(\"highlight\", (code, language) =\u003e {\n        return language\n             ? hljs.highlight(code, { language }).value\n             : hljs.highlightAuto(code).value);\n      });\n    });\n  \u003c/script\u003e\n\u003c/head\u003e\n```\n\n#### `glitch`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.\u003ctheme\u003e.glitch.js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.glitch.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.glitch.png\" width=\"400\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n#### `matrix`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.\u003ctheme\u003e.matrix.js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.matrix.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.matrix.png\" width=\"400\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n#### `reef`\n\n``` html\n\u003cscript src=\"…/HTMLSourceCodeElement.\u003ctheme\u003e.reef.js\"\u003e\n```\n\n\u003cdiv\u003e\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/light.reef.png\" width=\"400\"\u003e\u003c/a\u003e\n  \u0026emsp;\n  \u003ca href=\"#themes\"\u003e\u003cimg src=\"./readme/dark.reef.png\" width=\"400\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n### 💻 Config API\n\nThe `HTMLSourceCodeElement` provides reasonable commons for abstract visual or behavioural aspects. For instance, the tab width is two spaces by common. However, such aspects can be manipulated in a fashion similar to defining global attributes.\n\n``` ts\nHTMLSourceCodeElement\n.config(overrides: { [name: string]: unknown; });\n```\n\n``` js\nHTMLSourceCodeElement\n.config({\n  tabWidth: 4\n});\n```\n\n### 💻 Events API\n\nThe `HTMLSourceCodeElement` DOM class provides a static API to handle events in a custom fashion.\n\n``` ts\nHTMLSourceCodeElement\n.on(event: string, cb: (...args: unknown[]) =\u003e unknown)\n```\n\n#### on `copy`\n\n``` ts\nHTMLSourceCodeElement.on(\"copy\", (dom: {\n  host: HTMLSourceCodeElement;\n  edit: HTMLDivElement;\n  display: HTMLSourceCodeElement;\n  table: HTMLTableElement;\n  copy: HTMLButtonElement;\n}) =\u003e void)\n```\n\nCallback fires whenever code is copied. The callback is passed the respective element's shadow DOM key elements. The DOM might be used to to reflect that the code was in fact copied.\n\n#### on `highlight`\n\n``` ts\nHTMLSourceCodeElement.on(\"highlight\", cb: (code: string, language?: string) =\u003e string)\n```\n\nCallback fires whenever code is rendered. The callback is passed the respective raw code to highlight. If the respective element has an assigned `language` attribute that value is also passed.\n\n## \n\n\u003csub\u003e\u0026copy; Thassilo Martin Schiepanski\u003c/sub\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft-ski%2Fhtml-sourcecode-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft-ski%2Fhtml-sourcecode-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft-ski%2Fhtml-sourcecode-element/lists"}