\n\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&terminal=dev) | [Vue](https://stackblitz.com/edit/vitejs-vite-xijn5h?file=src%2Fcomponents%2FHelloWorld.vue&terminal=dev) | [Svelte](https://stackblitz.com/edit/vitejs-vite-rqlzes?file=package.json,src%2FApp.svelte&terminal=dev) | [vanilla JS](https://stackblitz.com/edit/vitejs-vite-nzhtqa?file=index.html,main.js&terminal=dev)\n\n\n\n## Quick React.js example\n\n```\nnpm i annotative-code -S\n```\n\n
\n \n
\n\n```javascript\n// 1. Because using web components in React is not mature yet\n// we need to create a bridge React component 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 = ``;\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 setVariant(detail.valueObj.variant)}\n/>;\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\n","readmeFilename":"README.md"}
![\"Annotative](\"https://github.com/patrick-kw-chiu/annotative/blob/main/assets/annotative-2.png?raw=true\")
\n ![\"Quick](\"https://github.com/patrick-kw-chiu/annotative/blob/main/assets/quick-demo.gif?raw=true\")
\n