<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <h1>Fun <span id="someday">Someday</span> Ideas</h1> <ul> <li>Bike the <span id="trail">McKenzie Trail</span></li> <li>Eat at that rooftop bar in Redmond</li> <li>Lake of the Woods in Klamath Falls</li> <li>Stay in <span id="yahats">Yahats</span></li> <li>Weekend at Suttle Lodge</li> <li>Go visit the <span id="hills">Painted Hills</span> </ul> </div>

body { font: 100% system-ui; margin: 0; height: 100vh; display: grid; /*place-items: center;*/ } h1 { font-weight: 900; margin: 0 0 0.5rem 0; } div { padding: 3rem 5rem; border: 1px solid #ddd; /*box-shadow: 0 0.25rem 0.5rem rgba(#333, 0.1);*/ border-radius: 1rem; } ul { padding: 0 0 0 1.3rem; } li { margin: 0 0 0.5rem 0; }

import { anotate } from "https://unpkg.com/rough-notation?module"; const n1 = document.querySelector("#someday"); const n2 = document.querySelector("#trail"); const n3 = document.querySelector("#hills"); const n4 = document.querySelector("#yahats"); const a1 = anotate(n1, { type: "highlight", color: "yellow", padding: 15 }); const a2 = anotate(n2, { type: "underline", color: "red" }); const a3 = anotate(n3, { type: "underline", color: "red" }); const a4 = anotate(n4, { type: "box", color: "orange" }); a1.show(); a2.show(); a3.show(); a4.show();