Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patrick-kw-chiu/annotative-code
Supercharge your highlight.js code demo with interactive input knobs
https://github.com/patrick-kw-chiu/annotative-code
annotative-code code-block code-demo highlightjs lit react reactjs svelte vue web-component web-components
Last synced: about 1 month ago
JSON representation
Supercharge your highlight.js code demo with interactive input knobs
- Host: GitHub
- URL: https://github.com/patrick-kw-chiu/annotative-code
- Owner: patrick-kw-chiu
- License: mit
- Created: 2023-10-21T19:04:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-10T04:07:50.000Z (3 months ago)
- Last Synced: 2024-10-01T02:42:42.767Z (about 2 months ago)
- Topics: annotative-code, code-block, code-demo, highlightjs, lit, react, reactjs, svelte, vue, web-component, web-components
- Language: TypeScript
- Homepage: https://patrick-kw-chiu.github.io/annotative-code
- Size: 1.78 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# annotative
Icon generated with Stable Diffusion XL
Supercharge your [highlight.js](https://github.com/highlightjs/highlight.js) code demo with interactive input knobs
**Quick links:** [Get Started](https://patrick-kw-chiu.github.io/annotative-code/getting-started/) | API Doc | Interactive Playground
**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)
## Quick React.js example
```
npm i annotative-code -S
```
```javascript
// 1. Because using web components in React is not mature yet
// we need to create a bridge React component with `@lit/react`
import React from 'react';
import { createComponent } from '@lit/react';
import { AnnotativeCode as AnnotativeCodeWC } from 'annotative-code';
export const AnnotativeCode = createComponent({
tagName: 'annotative-code',
elementClass: AnnotativeCodeWC,
react: React,
});
```
```javascript
import { AnnotativeCode } from './AnnotativeCode';
// 2. Only import the language function and theme css in need can reduce the bundle size
import languageFn from 'annotative-code/bin/highlight.js/languages/javascript';
import themeCss from 'annotative-code/bin/highlight.js/css/a11y-dark';
// 3. Code/content to be highlighted
const content = `
Click me!
`;
// 4. Add annotations to the highlighted code!
const annotation = {
variant: {
type: 'string',
knob: 'select',
options: ['text', 'contained', 'outlined'],
value: variant,
},
};
setVariant(detail.valueObj.variant)}
/>;
```
## Features
- 📝 **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
- 🎮 **Interactive knobs** - Let users play around with your code **safely** with various knobs e.g. `string`, `number`, `select` and `datetime-local`
- 👂🏻 **On change listener** - Captures user's input and reflect to the demo
- 🧙🏻♂️ **Customizable** - Code block styles (`styleMap`) and pop up (`renderPopup` and `renderDescription`) are customizable
- 🧱 **Web component** - Works with most of the frameworks e.g. React, Svelte, Vue and more
---
## Development
(WIP)
1. (One time only) Install dependencies
```
npm install
```
The `annotative` package is built with `lit` and the local development environment is using `vite`.
2. (One time only) Generate lit theme CSS and programming languages functions from [highlight.js](https://github.com/highlightjs/highlight.js)
```
node ./tools/generateThemes
node ./tools/generateProgLangs
```
3. Run the dev server
```
npm run dev
```