{"id":20514140,"url":"https://github.com/webreflection/highlighted-code","last_synced_at":"2025-03-05T23:15:26.445Z","repository":{"id":41543284,"uuid":"474377324","full_name":"WebReflection/highlighted-code","owner":"WebReflection","description":"A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js","archived":false,"fork":false,"pushed_at":"2022-05-25T10:00:24.000Z","size":1581,"stargazers_count":189,"open_issues_count":1,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-16T09:42:51.003Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.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}},"created_at":"2022-03-26T14:49:37.000Z","updated_at":"2024-12-09T17:07:11.000Z","dependencies_parsed_at":"2022-09-06T09:21:39.400Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/highlighted-code","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhighlighted-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhighlighted-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhighlighted-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fhighlighted-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/highlighted-code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242117718,"owners_count":20074438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-15T21:14:57.916Z","updated_at":"2025-03-05T23:15:26.401Z","avatar_url":"https://github.com/WebReflection.png","language":"HTML","readme":"# highlighted-code\n\nA textarea builtin extend to automatically provide code highlights based on one of the languages available via [highlight.js](https://highlightjs.org/).\n\n**[Live demo](https://webreflection.github.io/highlighted-code/test/demo.html)**\n\n```html\n\u003c!doctype html\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n\u003cstyle\u003e\ntextarea[is=\"highlighted-code\"] { padding: 8px; }\n\u003c/style\u003e\n\u003cscript type=\"module\"\u003e\n(async ({chrome, netscape}) =\u003e {\n\n  // add Safari polyfill if needed\n  if (!chrome \u0026\u0026 !netscape)\n    await import('https://unpkg.com/@ungap/custom-elements');\n\n  const {default: HighlightedCode} =\n    await import('https://unpkg.com/highlighted-code');\n\n  // bootstrap a theme through one of these names\n  // https://github.com/highlightjs/highlight.js/tree/main/src/styles\n  HighlightedCode.useTheme('github-dark');\n})(self);\n\u003c/script\u003e\n\u003ctextarea is=\"highlighted-code\"\n          cols=\"80\" rows=\"12\"\n          language=\"javascript\" tab-size=\"2\" auto-height\u003e\n(async ({chrome, netscape}) =\u003e {\n\n  // add Safari polyfill if needed\n  if (!chrome \u0026\u0026 !netscape)\n    await import('https://unpkg.com/@ungap/custom-elements');\n\n  const {default: HighlightedCode} = await import('https://unpkg.com/highlighted-code');\n\n  // bootstrap a theme through one of these names\n  // https://github.com/highlightjs/highlight.js/tree/main/src/styles\n  HighlightedCode.useTheme('github-dark');\n})(self);\n\u003c/textarea\u003e\n```\n\n## API\n\nThe component is literally a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) so everything that works or applies for this kind of element works and applies for this custom element too.\n\nThe only extras attributes this component offer are:\n\n  * **language**, reflected as `area.language` to define which kind of language should be highlighted. See the [list of supported languages here](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) (see those that don't require extra packages).\n  * **tab-size**, reflected as `area.tabSize`, to determine the amount of virtual spaces covered by tabs. Because we live in a Mobile world, the default is `2`.\n  * **auto-height**, reflected as `area.autoHeight`, to render the textarea as if it was a regular element. See the [test page](https://webreflection.github.io/highlighted-code/test/) as example, or set `autoHeight = true` in the live demo and see the area growing while typing.\n\nThe exported `HighlightedCode` default class exposes these public methods/accessors:\n\n  * `HighlightedCode.useTheme(name:string)` to bootstrap [any valid CSS theme](https://github.com/highlightjs/highlight.js/tree/main/src/styles) by name. This can also be a fully qualified URL to avoid CDN when desired.\n  * `HighlightedCode.insertText(text:string)` to programmatically insert some text where the selection is.\n  * `HighlightedCode.library:hljs` a getter to retrieve the imported [hljs library](https://highlightjs.org/), usable to register missing PLs or do something else.\n\n\n## Exports\n\nThe main export uses all default languages included in *highlight.js*, but there are other variants:\n\n  * `highlighted-code/web`, which includes only Markdown, JS, TS, JSON, CSS, and HTML or XML\n  * `highlighted-code/sql`, which includes only SQL\n\nThese variants are much lighter than default module.\n\n## F.A.Q.\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eHow to disable editing?\u003c/strong\u003e\u003c/summary\u003e\n  \u003cdiv\u003e\n\nYou can either `textarea.disabled = true` or:\n\n```html\n\u003ctextarea is=\"highlighted-code\" language=\"css\" disabled\u003e\ntextarea[is=\"highlighted-code\"]::before {\n  content: \"it's that simple!\";\n}\n\u003c/textarea\u003e\n```\n\n  \u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eHow to disable spellcheck?\u003c/strong\u003e\u003c/summary\u003e\n  \u003cdiv\u003e\n\nYou can either `textarea.spellcheck = false` or:\n\n```html\n\u003ctextarea is=\"highlighted-code\" language=\"css\" spellcheck=\"false\"\u003e\ntextarea[is=\"highlighted-code\"]::before {\n  content: \"it's that simple!\";\n}\n\u003c/textarea\u003e\n```\n\n  \u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eHow to set cols or rows?\u003c/strong\u003e\u003c/summary\u003e\n  \u003cdiv\u003e\n\n```html\n\u003ctextarea is=\"highlighted-code\" language=\"css\" cols=\"40\" rows=\"12\"\u003e\ntextarea[is=\"highlighted-code\"]::before {\n  content: \"it's that simple!\";\n}\n\u003c/textarea\u003e\n```\n\n  \u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eHow to set a placeholder?\u003c/strong\u003e\u003c/summary\u003e\n  \u003cdiv\u003e\n\n```html\n\u003ctextarea is=\"highlighted-code\" language=\"css\"\n          placeholder=\"write css...\"\u003e\u003c/textarea\u003e\n```\n\n  \u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eHow to ...?\u003c/strong\u003e\u003c/summary\u003e\n  \u003cdiv\u003e\n\nLook, this is [a custom element builtin extend](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example).\n\nIf you know how and when to use a textarea, you're 90% done with this module.\n\nNow you need just the `is` attribute with value `highlighted-code`, a `language` attribute with a supported language from *highlight.js* library,\noptionally a `tab-size` attribute to have tabs wider than 2, and a theme, where `default` would work too, as long as `HighlightedCode.useTheme('default')` is invoked.\n\n  \u003c/div\u003e\n\u003c/details\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fhighlighted-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fhighlighted-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fhighlighted-code/lists"}