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 Code | 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 | Astro and vanilla JS/TS (limited)

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';
import languageFn from 'annotative-code/bin/highlight.js/languages/javascript';
import themeCss from 'annotative-code/bin/highlight.js/css/a11y-dark';

export const AnnotativeCode = createComponent({
  tagName: 'annotative-code',
  elementClass: AnnotativeCodeWC,
  react: React,
});

// ...

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

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

<Annotative
  themeCss={themeCss}
  languageFn={languageFn}
  content={content}
  annotation={annotation}
  onChange={(event) => {
    setVariant(event.detail.valueObj.variant);
  }}
/>;

Features

📝 Goodies of highlight.js - Syntax highlighting of 190+ programming languages and 240+ themes 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)

(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 theme CSS and programming languages functions from highlight.js

node ./tools/generateThemes
node ./tools/generateProgLangs

Run the dev server

npm run dev

Build for publish

(WIP)

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" />