{"id":14990279,"url":"https://github.com/patrick-kw-chiu/annotative-code","last_synced_at":"2025-07-19T12:33:32.187Z","repository":{"id":237843057,"uuid":"708180396","full_name":"patrick-kw-chiu/annotative-code","owner":"patrick-kw-chiu","description":"Supercharge your highlight.js code demo with interactive input knobs","archived":false,"fork":false,"pushed_at":"2024-08-10T04:07:50.000Z","size":1871,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-15T20:46:41.834Z","etag":null,"topics":["annotative-code","code-block","code-demo","highlightjs","lit","react","reactjs","svelte","vue","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://patrick-kw-chiu.github.io/annotative-code","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/patrick-kw-chiu.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":"2023-10-21T19:04:58.000Z","updated_at":"2024-08-10T04:07:53.000Z","dependencies_parsed_at":"2024-06-20T09:10:51.148Z","dependency_job_id":"ed9a2369-f811-455d-8290-f532f3fda984","html_url":"https://github.com/patrick-kw-chiu/annotative-code","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"613499f864161592eb4acca00980bad4628d7f72"},"previous_names":["patrick-kw-chiu/annotative-code"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/patrick-kw-chiu/annotative-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-kw-chiu%2Fannotative-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-kw-chiu%2Fannotative-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-kw-chiu%2Fannotative-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-kw-chiu%2Fannotative-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrick-kw-chiu","download_url":"https://codeload.github.com/patrick-kw-chiu/annotative-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrick-kw-chiu%2Fannotative-code/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265603713,"owners_count":23796431,"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":["annotative-code","code-block","code-demo","highlightjs","lit","react","reactjs","svelte","vue","web-component","web-components"],"created_at":"2024-09-24T14:19:49.036Z","updated_at":"2025-07-19T12:33:32.170Z","avatar_url":"https://github.com/patrick-kw-chiu.png","language":"TypeScript","readme":"# annotative\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/patrick-kw-chiu/annotative/blob/main/assets/annotative-2.png?raw=true\" alt=\"Annotative Code | Generated with Stable Diffusion XL\" width=\"160\" /\u003e\n  \u003ch6 align=\"center\"\u003e\n    Icon generated with \u003ca href=\"https://stability.ai/\"\u003eStable Diffusion XL\u003c/a\u003e\n  \u003c/h6\u003e\n\u003c/p\u003e\n\nSupercharge your [highlight.js](https://github.com/highlightjs/highlight.js) code demo with interactive input knobs\n\n**Quick links:** [Get Started](https://patrick-kw-chiu.github.io/annotative-code/getting-started/) | API Doc | Interactive Playground\n\n**Demos:** [React](https://stackblitz.com/edit/vitejs-vite-qczupp?file=src%2FAnnotativeCode.tsx,src%2FCodeDemo.tsx\u0026terminal=dev) | [Vue](https://stackblitz.com/edit/vitejs-vite-xijn5h?file=src%2Fcomponents%2FHelloWorld.vue\u0026terminal=dev) | [Svelte](https://stackblitz.com/edit/vitejs-vite-rqlzes?file=package.json,src%2FApp.svelte\u0026terminal=dev) | [vanilla JS](https://stackblitz.com/edit/vitejs-vite-nzhtqa?file=index.html,main.js\u0026terminal=dev)\n\n\u003c!-- [Astro](https://stackblitz.com/edit/withastro-astro-podyte?file=src%2Fpages%2Findex.astro\u0026title=Astro%20Starter%20Kit:%20Minimal) |  --\u003e\n\n## Quick React.js example\n\n```\nnpm i annotative-code -S\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/patrick-kw-chiu/annotative/blob/main/assets/quick-demo.gif?raw=true\" alt=\"Quick demo\" /\u003e\n\u003c/p\u003e\n\n```javascript\n// 1. Because using web components in React is not mature yet\n// we need to create a bridge React component \u003cAnnotativeCode /\u003e with `@lit/react`\nimport React from 'react';\nimport { createComponent } from '@lit/react';\nimport { AnnotativeCode as AnnotativeCodeWC } from 'annotative-code';\n\nexport const AnnotativeCode = createComponent({\n  tagName: 'annotative-code',\n  elementClass: AnnotativeCodeWC,\n  react: React,\n});\n```\n\n```javascript\nimport { AnnotativeCode } from './AnnotativeCode';\n\n// 2. Only import the language function and theme css in need can reduce the bundle size\nimport languageFn from 'annotative-code/bin/highlight.js/languages/javascript';\nimport themeCss from 'annotative-code/bin/highlight.js/css/a11y-dark';\n\n// 3. Code/content to be highlighted\nconst content = `\u003cButton variant=\"____variant____\"\u003e\n  Click me!\n\u003c/Button\u003e`;\n\n// 4. Add annotations to the highlighted code!\nconst annotation = {\n  variant: {\n    type: 'string',\n    knob: 'select',\n    options: ['text', 'contained', 'outlined'],\n    value: variant,\n  },\n};\n\n\u003cAnnotativeCode\n  themeCss={themeCss}\n  languageFn={languageFn}\n  content={content}\n  annotation={annotation}\n  onValueChange={({ detail }) =\u003e setVariant(detail.valueObj.variant)}\n/\u003e;\n```\n\n## Features\n\n- 📝 **Goodies of [highlight.js](https://github.com/highlightjs/highlight.js)** - Syntax highlighting of [190+ programming languages](https://github.com/highlightjs/highlight.js/tree/main/src/languages) and [240+ themes](https://github.com/highlightjs/highlight.js/tree/main/src/styles) support\n- 🎮 **Interactive knobs** - Let users play around with your code **safely** with various knobs e.g. `string`, `number`, `select` and `datetime-local`\n- 👂🏻 **On change listener** - Captures user's input and reflect to the demo\n- 🧙🏻‍♂️ **Customizable** - Code block styles (`styleMap`) and pop up (`renderPopup` and `renderDescription`) are customizable\n- 🧱 **Web component** - Works with most of the frameworks e.g. React, Svelte, Vue and more\n\n---\n\n## Development\n\n(WIP)\n\n1. (One time only) Install dependencies\n\n```\nnpm install\n```\n\nThe `annotative` package is built with `lit` and the local development environment is using `vite`.\n\n2. (One time only) Generate lit theme CSS and programming languages functions from [highlight.js](https://github.com/highlightjs/highlight.js)\n\n```\nnode ./tools/generateThemes\nnode ./tools/generateProgLangs\n```\n\n3. Run the dev server\n\n```\nnpm run dev\n```\n\n\u003c!--\n\n---\n\n## Build for publish\n\n1. Compile the packages\n\n```\nnpm run build\n```\n\n2. Bundle the code to `esm` format\n\n```\nnpm run rollup\n```\n\nSo it can be directly used in modern browser by e.g. `\u003cscript type=\"module\" src=\"{{cdn}}/annotative-python-a11y-dark.js\" /\u003e`\n--\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick-kw-chiu%2Fannotative-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrick-kw-chiu%2Fannotative-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrick-kw-chiu%2Fannotative-code/lists"}