Assume you've installed Annotative Code already

1. Import annotative-code, languageFn and theme

Import annotative-code to make the web component available to the Vue app.

Import only the relevant languageFn and themeCss to minimize the bundle size. Here is the full list of programming languages (opens in a new tab) and themes (opens in a new tab) brought to you by highlight.js (opens in a new tab)

<script setup>
import 'annotative-code';
import languageFn from 'annotative-code/bin/highlight.js/languages/javascript';
import themeCss from 'annotative-code/bin/highlight.js/css/a11y-dark';
</script>

2. Define the content and annotation

• content is the code/content string we pass to highlight.js
  • Inside the content string, you can enclose certain text with ____ (4 underscore), it will become a placeholder
  • Annotative Code will insert an annotation popup to placeholders based on the annotation object
  • In the following example, we define a content string with a placeholder ____severity____ inside it. If we also specify severity inside annotation, it will be annotated

<script setup>
// ...those imports
const content = `<Button
  label="Button"
  severity="____severity____">
/>`;
</script>

• annotation is the config object that specifies what to be and how to annotated
  • the object key(s) is used to match for the placeholder enclosed with ____ (4 underscore)
  • the object value(s) contains detail of how to annotate
    • perhaps to provide further explaination (description)
    • or perhaps to let users play around with that field (built-in type and additional knob)
    • you can also specify predefined values to be selected (options) ...and more!
  • In the following example, we define an annotation that
    • match for ____severity____ inside content
    • replace it with annotation popup that let users play around with the available options "primary", "secondary", "success" ...etc

<script setup>
// ...those imports and content
const annotation = {
  severity: {
    type: 'string',
    knob: 'select',
    options: [
      'primary',
      'secondary',
      'success',
      'info',
      'warning',
      'help',
      'danger',
    ],
    value: 'secondary',
  },
};
</script>

3. Add interactivity by declaring the ref and the event handler

<script setup>
// ...those imports, content and annotation
import { ref } from 'vue';
const severity = ref('secondary');
const onValueChange = ({ detail }) => {
  const { valueObj } = detail;
  severity.value = valueObj.severity;
};
</script>

4. Pass languageFn, theme, content and annotation to <AnnotativeCode />

Combine the use of @valuechange event listener to add interactivity, you can capture the changes and reflect it to the button you demo. Here, we demo a <Button /> from primevue/button.

<script setup>
import Button from 'primevue/button';
// ...all of the above
</script>
 
<template>
  <div>
    <Button label="Button" :severity="severity" />
    <hr />
    <annotative-code
      :content="content"
      :annotation="annotation"
      :languageFn="languageFn"
      :themeCss="themeCss"
      @valuechange="onValueChange"
    />
  </div>
</template>

will become...