<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(black, 0.1);
  border-radius: 1rem;
}
ul {
  padding: 0 0 0 1.3rem;
}
li {
  margin: 0 0 0.5rem 0;
}

import { annotate } 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 = annotate(n1, { type: "highlight", color: "yellow", padding: 15 });
const a2 = annotate(n2, { type: "underline", color: "red" });
const a3 = annotate(n3, { type: "underline", color: "red" });
const a4 = annotate(n4, { type: "box", color: "orange" });

a1.show();
a2.show();
a3.show();
a4.show();