Package Exports

annotative-code
annotative-code/bin/annotative-code.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (annotative-code) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

annotative

Annotative | Generated with Stable Diffusion XL

Icon generated with Stable Diffusion XL

Supercharge your highlight.js code demo with interactive input knobs

Quick links: Get Started | API Doc | Interactive Playground

Demos: React | Vue | Svelte | Angular | Astro

Quick React.js example

npm i annotative-code -S

Quick demo

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,
});

// ...

const content = `<Button variant="____variant____">
  Click me!
</Button>`;

const placeholder = {
  variant: {
    type: 'string',
    knob: 'select',
    options: ['text', 'contained', 'outlined'],
    value: variant,
  },
};

<Annotative
  content={content}
  placeholder={placeholder}
  handleChange={({ newValue }) => setVariant(newValue.variant)}
/>;

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
Customizable -
🧱 Web component - works with any frameworks e.g. React, Svelte, Vue and more

Development

(One time only) Install dependencies

npm install

The annotative package is built with lit and the local development environment is using vite.

(One time only) Generate lit CSS styles, theme and programming languages contants from highlight.js

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

Run the dev server

npm run dev

Build for publish

Compile the packages

npm run build

Bundle the code to esm format

npm run rollup

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