Bootstrap Snippet Text Notation using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text Notation"
Bootstrap 4.1.1 Snippet by trinhquan

Related: See More

Questions / Comments:

"Text Notation" Bootstrap 4.1.1 Snippet by trinhquan

Related: See More

Questions / Comments:

"Text Notation"
Bootstrap 4.1.1 Snippet by trinhquan