31:[] 2f:{"title":"Rough Notation example","cells":[{"id":0,"value":"md`# Rough Notation example\n\n- https://roughnotation.com/\n- https://github.com/pshihn/rough-notation\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`### Using an XPATH selector to find a tag to annotate by its contents`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n visibility().then(() => (roughNotation.annotate(document.evaluate(\"//a[contains(., 'roughnotation.com')]\", document ).iterateNext(), { type: 'circle', color: \"red\" }).show()));\n return html``; //hide \"undefined\"\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"underlineSection = html`\n

Underline

Create a sketchy underline below an element.

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"visibility().then(() => (roughNotation.annotate(underlineSection.querySelector(\"span\"), { type: 'underline', color: \"#B71C1C\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n

Box

This style draws a box around the element.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"visibility().then(() => (roughNotation.annotate(document.querySelector(\"#boxSection span\"), { type: 'box', color: \"#4A148C\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"html`\n

Circle

Draw a circle around the element.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"visibility().then(() => (roughNotation.annotate(document.querySelector(\"#circleSection span\"), { type: 'circle', color: \"#0D47A1\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"html`

Highlight

Creates a highlight effect as if marked by a highlighter.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"visibility().then(() => (roughNotation.annotate(document.querySelector(\"#highlightSection span\"), { type: 'highlight', color: \"#FFD54F\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"html`

Strike-Through

Draw a hand-drawn line through an element creating a stroke-through effect.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"visibility().then(() => (roughNotation.annotate(document.querySelector(\"#strikeSection span\"), { type: 'strike-through', color: \"#1B5E20\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"crossedOff = html`

Crossed-Off

To symbolize rejection, use a crossed-off effect on an element.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"visibility().then(() => (roughNotation.annotate(crossedOff.querySelector(\"span\"), { type: 'crossed-off', color: \"#F57F17\" }).show()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"groupSection = html`

Annotation Group

Rough Notation provides a way to order the animation of annotations by creating an\n annotation-group. Pass the list of annotations to create a group.\n When show is called on the group, the annotations are animated in order.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"visibility().then(() => {\n const a1 = roughNotation.annotate(groupSection.querySelector(\"h3\"), { type: 'box', color: \"#BF360C\" })\n const a2 = roughNotation.annotate(groupSection.querySelector(\"span\"), { type: 'highlight', color: \"#FFFF00\" })\n const a3 = roughNotation.annotate(groupSection.querySelector(\"i\"), { type: 'underline', color: \"#BF360C\" })\n const ag = roughNotation.annotationGroup([a2, a3, a1]).show()\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"configSection = html`

Annotation Styling

Various properties of the annotation can be configured, like color, strokeWidth, animation\n duration.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"visibility().then(() => {\n const a1 = roughNotation.annotate(configSection.querySelector(\"h3\"), { type: 'box', color: \"#D50000\", strokeWidth: 10}).show();\n const a3 = roughNotation.annotate(configSection.querySelector(\"span\"), { type: 'box', color: \"#33691E\", animationDuration: 3000}).show();\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"noanimSection = html`

No Animation

Of course you don't have to animate the annotation, it just shows up when show is called.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"visibility().then(() => {\n const a1 = roughNotation.annotate(noanimSection.querySelector(\"h3\"), { type: 'box', color: \"#263238\", animate: false }).show()\n const a3 = roughNotation.annotate(noanimSection.querySelector(\"i\"), { type: 'underline', color: \"#263238\", animate: false }).show()\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"roughNotation = import('https://unpkg.com/rough-notation@0.2.0/lib/rough-notation.esm.js?module')","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`All credit for example styling goes to the [original author's website](https://roughnotation.com/).`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}