annotative v0.0.11

annotative

Supercharge your highlight.js code demo with interactive input knobs, with the <annotative-* /> web component 📝

Quick links: Get Started | API Doc | Interactive Playground

Demos: React | Vue | Svelte | Angular | Astro

Quick example

npm i annotative -S

import 'annotative/bin/annotative-javascript-a11y-light';
import reactifyWc from 'reactify-wc';
const Annotative = reactifyWc('annotative-javascript-a11y-light');

const CodeDemo = () => {
  const content = `<FruitPicker
  options={____options____}
/>`;

  const placeholder = {
    options: {
      type: 'string',
      knob: 'select',
      options: ['apple 🍎', 'orange 🍊', 'banana 🍌'],
      value: 'apple 🍎',
    },
  };

  return <Annotative content={content} placeholder={placeholder} />;
};

Features

• 📝 Goodies of highlight.js - syntax highlighting and themes
• 🎮 Interactive knobs - let users play around with your code safely with various knobs e.g. string, number, select and datetime-local
• 👂🏻 On change listener - capture user's input and reflect to the demo
• 🧱 Web component - works with any frameworks e.g. React, Svelte, Vue and more

Development

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 CSS styles, theme and programming languages contants from highlight.js

node ./tools/generateThemes
node ./tools/generateProgLangsConstants

Web components of annotative package are named/grouped as <annotative-{{progammingLanguage}}-{{themeName}} /> e.g. <annotative-javascript-a11y-dark />. This is because the entire highlight.js library (with all languages support and themes) is quite large. Only importing the programming language in need can highly minimize the bundle size.

3. Run the dev server

npm run dev

Build for publish

1. Compile the packages

# npm run build-for-publish
node ./tools/generateEndFiles.js

This will generate all the <annotative-{{progammingLanguage}}-{{themeName}} /> for every combinations. Then running tsc against them.

2. (Optional) Bundle the code to esm format

WIP

So it can be directly used in modern browser by e.g. <script type="module" src="{{cdn}}/annotative-python-a11y-dark.js" />