{"id":18782531,"url":"https://github.com/heppokofrontend/html-code-block-element","last_synced_at":"2025-07-16T12:08:40.984Z","repository":{"id":50562458,"uuid":"390821783","full_name":"heppokofrontend/html-code-block-element","owner":"heppokofrontend","description":"This is a code block generator with syntax highlighting and copy button.","archived":false,"fork":false,"pushed_at":"2023-05-21T12:59:34.000Z","size":2170,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-07T20:48:16.878Z","etag":null,"topics":["code-highlight","code-highlighter","custom-elements","syntax-highlighting","web-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/heppokofrontend.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2021-07-29T18:51:53.000Z","updated_at":"2024-08-20T00:29:49.000Z","dependencies_parsed_at":"2024-11-07T20:38:44.921Z","dependency_job_id":"e9867fa6-0b8d-4ca3-a0b7-b659208e1b1e","html_url":"https://github.com/heppokofrontend/html-code-block-element","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-code-block-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-code-block-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-code-block-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heppokofrontend%2Fhtml-code-block-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heppokofrontend","download_url":"https://codeload.github.com/heppokofrontend/html-code-block-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231731626,"owners_count":18418158,"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":["code-highlight","code-highlighter","custom-elements","syntax-highlighting","web-component"],"created_at":"2024-11-07T20:36:20.138Z","updated_at":"2024-12-29T11:29:05.041Z","avatar_url":"https://github.com/heppokofrontend.png","language":"TypeScript","readme":"# \u0026lt;code-block\u0026gt;\n\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) [![Published on NPM](https://img.shields.io/npm/v/@heppokofrontend/html-code-block-element.svg)](https://www.npmjs.com/package/@heppokofrontend/html-code-block-element) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/heppokofrontend/html-code-block-element) [![](https://data.jsdelivr.com/v1/package/npm/@heppokofrontend/html-code-block-element/badge)](https://www.jsdelivr.com/package/npm/@heppokofrontend/html-code-block-element) [![Maintainability](https://api.codeclimate.com/v1/badges/38a4e238adb7401844ba/maintainability)](https://codeclimate.com/github/heppokofrontend/html-code-block-element/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/38a4e238adb7401844ba/test_coverage)](https://codeclimate.com/github/heppokofrontend/html-code-block-element/test_coverage) [![Known Vulnerabilities](https://snyk.io/test/npm/@heppokofrontend/html-code-block-element/badge.svg)](https://snyk.io/test/npm/@heppokofrontend/html-code-block-element)\n[![@heppokofrontend/html-code-block-element](https://snyk.io/advisor/npm-package/@heppokofrontend/html-code-block-element/badge.svg)](https://snyk.io/advisor/npm-package/@heppokofrontend/html-code-block-element)\n\nCode block custom element with syntax highlighting and copy button.\n\nIt has [highlight.js](https://www.npmjs.com/package/highlight.js?activeTab=readme) for syntax highlighting.\n\n## Usage\n\nDEMO: \u003chttps://heppokofrontend.github.io/html-code-block-element/\u003e\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/vs.min.css\" /\u003e\n    \u003clink rel=\"import\" href=\"./demo/index.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n```html\n\u003ccode-block language=\"html\" label=\"example.html\" controls\u003e\n  \u0026lt;script\u0026gt;console.log(true);\u0026lt;/script\u0026gt;\n\u003c/code-block\u003e\n```\n\n### In browser\n\nIt can be used by loading html-code-block-element.common.min.js and one CSS theme.\n\nThe highlight.js style is available on CDN. You can also download the JS and CSS from the respective repositories and load them into your page.\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/vs.min.css\"\n/\u003e\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/@heppokofrontend/html-code-block-element/lib/html-code-block-element.common.min.js\"\n  defer\n\u003e\u003c/script\u003e\n```\n\nThere are three versions of this library available.\n\n- `html-code-block-element.common.min.js` - One that supports only the popular languages.\n- `html-code-block-element.all.min.js` - One that enables [all languages](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) supported by highligh.js.\n- `html-code-block-element.core.min.js` - For developers who want to do their own `hljs.registerLanguage()`.\n\n#### Example\n\n**Note:** The textarea element cannot be included in the content of the textarea element. If you want to include it, please use HTML Entity for the tag.\n\n```html\n\u003ccode-block language=\"html\" label=\"example.html\" controls\u003e\n  \u003ctextarea\u003e\u003cscript\u003econsole.log(true);\u003c/script\u003e\u003c/textarea\u003e\n\u003c/code-block\u003e\n```\n\nor\n\n```html\n\u003ccode-block language=\"html\" label=\"example.html\" controls\u003e\n  \u0026lt;script\u0026gt;console.log(true);\u0026lt;/script\u0026gt;\n\u003c/code-block\u003e\n```\n\n#### Assumption specifications\n\n- **Categories:**\n  - [Flow content](https://html.spec.whatwg.org/multipage/dom.html#flow-content-2).\n  - [Palpable content](https://html.spec.whatwg.org/multipage/dom.html#palpable-content-2).\n- **Contexts in which this element can be used:**\n  - Where flow content is expected.\n- **Content model:**\n  - [Text](https://html.spec.whatwg.org/multipage/dom.html#text-content) or one [textarea](https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element) element\n- **Tag omission in text/html:**\n  - Neither tag is omissible.\n- **Content attributes:**\n  - [Global attributes](https://html.spec.whatwg.org/multipage/dom.html#global-attributes)\n  - `controls` - Show controls\n  - `notrim` - Does't remove whitespace from both ends of a source\n  - `label` - Give the code block a unique name. If omitted, it will always have the accessible name \"Code Block\".\n  - `language` - Language name of the code. If omitted, it will be detected automatically.\n- **Accessibility considerations:**\n  - [No corresponding role](https://w3c.github.io/html-aria/#dfn-no-corresponding-role)\n  - `role` attribute is not allowed\n  - `aria-*` attribute is not allowed\n\n#### DOM interface\n\n```java\n[Exposed=Window]\ninterface HTMLCodeBlockElement : HTMLElement {\n  [HTMLConstructor] constructor();\n\n  [CEReactions] attribute boolean controls;\n  [CEReactions] attribute boolean notrim;\n  [CEReactions] attribute DOMString label;\n  [CEReactions] attribute DOMString language;\n  [CEReactions] attribute DOMString value;\n};\n```\n\n### In development\n\n#### Installation:\n\n```shell\nnpm install --save @heppokofrontend/html-code-block-element\n```\n\n#### Usage:\n\nThe `customElements.define()` will also be included.\n\n```javascript\n// For highlighting, `highlight.js/lib/common` will be used.\nimport '@heppokofrontend/html-code-block-element';\n// For highlighting, `highlight.js` will be used.\nimport '@heppokofrontend/html-code-block-element/dist/index.all';\n// For highlighting, `highlight.js/lib/code` will be used.\nimport '@heppokofrontend/html-code-block-element/dist/index.core';\n```\n\nIf you are using purely constructors:\n\n```javascript\nimport HTMLCodeBlockElement from '@heppokofrontend/html-code-block-element/dist/class/HTMLCodeBlockElement';\n```\n\n#### Use in React\n\nThis package contains the global type files for React.\n\n- `React.CodeBlockHTMLAttributes`\n- `code-block` in `JSX.IntrinsicElements`\n\n\\* CSS needs to be loaded separately.\n\n```tsx\n// CodeBlock.tsx\nimport {CodeBlockProps} from '@heppokofrontend/html-code-block-element/dist/manual';\nimport styleSheet from '@heppokofrontend/html-code-block-element/dist/styleSheet';\nimport hljs from 'highlight.js/lib/common';\nimport Head from 'next/head';\nimport {useEffect} from 'react';\n\ndeclare module 'react' {\n  // A type for the properties of a function component\n  interface CodeBlockHTMLAttributes\u003cT\u003e extends HTMLAttributes\u003cT\u003e {\n    /** The accessible name of code block */\n    label?: string | undefined;\n    /** The Language name */\n    language?: string | undefined;\n    /** The flag to display the UI */\n    controls?: boolean;\n  }\n}\n\ndeclare global {\n  // A type for JSX markup\n  namespace JSX {\n    interface IntrinsicElements {\n      'code-block': CodeBlockProps;\n    }\n  }\n}\n\ntype Props = Omit\u003cReact.CodeBlockHTMLAttributes\u003cHTMLElement\u003e, 'className'\u003e;\n\nlet isLoaded = false;\n\nexport const CodeBlock = ({children, ...props}: Props) =\u003e {\n  useEffect(() =\u003e {\n    const loadWebComponent = async () =\u003e {\n      const {HTMLCodeBlockElement, createHighlightCallback} = await import(\n        '@heppokofrontend/html-code-block-element/dist/manual'\n      );\n\n      HTMLCodeBlockElement.highlight = createHighlightCallback(hljs);\n      customElements.define('code-block', HTMLCodeBlockElement);\n    };\n\n    if (!isLoaded) {\n      isLoaded = true;\n      loadWebComponent();\n    }\n  }, []);\n\n  return (\n    \u003c\u003e\n      \u003cHead\u003e\n        \u003cstyle\u003e{styleSheet}\u003c/style\u003e\n      \u003c/Head\u003e\n      \u003ccode-block {...props}\u003e{children}\u003c/code-block\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n#### Use as constructor\n\nManual setup:\n\n```js\n// 1. Import\nimport hljs from 'highlight.js/lib/core';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport HTMLCodeBlockElement from '@heppokofrontend/html-code-block-element/dist/class/HTMLCodeBlockElement';\n//  or import { HTMLCodeBlockElement } from '@heppokofrontend/html-code-block-element';\n\n// Support JavaScript\nhljs.registerLanguage('javascript', javascript);\n\n// 2. Set endgine\n/**\n * Example: Callback to be called internally\n * @param {string} src - Source code string for highlight\n * @param {{ language: string }} options - Option for highlight\n * @returns {{ markup: string }} - Object of the highlight result\n */\nHTMLCodeBlockElement.highlight = function (src, options) {\n  if (\n    // Verifying the existence of a language\n    options?.language \u0026\u0026\n    hljs.getLanguage(options.language)\n  ) {\n    const {value} = hljs.highlight(src, options);\n\n    return {\n      markup: value,\n    };\n  }\n\n  return {\n    markup: hljs.highlightAuto(src).value,\n  };\n};\n\n// 3. Define\ncustomElements.define('code-block', HTMLCodeBlockElement);\n\n// 4. Make\nconst cbElm = new HTMLCodeBlockElement();\n\n// 5. Assign\ncbElm.language = 'javascript';\ncbElm.label = 'your label';\ncbElm.value = `const hoge = true;\n\nconsole.log(hoge);`;\n\n// 6. Append\ndocument.body.append(cbElm); // Render at the same time\n```\n\n##### Syntax\n\nNo params.\n\n```js\nnew HTMLCodeBlockElement();\n```\n\n## Support browser\n\n- Chrome\n- Safari\n- Firefox\n- Edge\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheppokofrontend%2Fhtml-code-block-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheppokofrontend%2Fhtml-code-block-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheppokofrontend%2Fhtml-code-block-element/lists"}