The usage of <annotative-code-common /> is nearly identical to <annotative-code />,
except you only need to pass 3 props themeCss, content and annotation. (Doesn't need languageFn)
languageFn isn't needed because highlight.js detects the programming language for you -
Here's a quick vanilla JavaScript example. See more detailed examples of usage in different frameworks in annotative-code.
/index.html
<body>
<!-- 1. Add a 'annotative-code-common' web component in the html and import main.js -->
<annotative-code-common id="code-block"></annotative-code-common>
<script type="module" src="./main.js"></script>
</body>// 2. Inside main.js,
// Import 'annotative-code-common' to make the web component available
// Import the theme css in need
import 'annotative-code/bin/annotative-code-common';
import a11yDarkCss from 'annotative-code/bin/highlight.js/css/a11y-dark.js';
// Also import the `applyProperties` utility
import { applyProperties } from 'annotative-code/bin/utilities/utilities.js';
// 3. Code/content to be highlighted
// If you enclose certain text with ____ (4 underscore), it becomes a placeholder.
// The object key(s) of `annotation` will try to insert an annotation popup to it
const content = `<button type="button" class="btn ____variant____">
Button
</button>`;
// 4. Add annotations to the highlighted code!
// Object key(s) of `annotation` is used to search for placeholder(s) that is enclosed with ____ (4 underscore)
// Then insert an annotation popup to the placeholder
const annotation = {
variant: {
type: 'string',
knob: 'select',
options: [
'btn-primary',
'btn-secondary',
'btn-success',
'btn-danger',
'btn-warning',
'btn-info',
'btn-light',
'btn-dark',
'btn-link',
],
value: 'btn-primary',
},
};
const onValueChange = ({ detail }) => {
const { updatedKey, valueObj } = detail;
document.getElementById('button').className = `btn ${valueObj[updatedKey]}`;
};
// 5. Apply the props to the HTML element (with id = 'code-block')
applyProperties(document.getElementById('code-block'), {
themeCss: a11yDarkCss,
content,
annotation,
onValueChange,
});will become...