Rough Notationっていう、SVGで文字を丸囲みにしたり、下線を引いたりするJavaScriptライブラリ を使わせてもらっています。
MITライセンスです。
以下が基本的なサンプル
アンダーラインテキスト
右のテキストを丸で囲むアニメーションサークルです。
これはアニメーションボックスを指定しています。
重要な部分をハイライト表示ハイライト表示できます。
これはブラケット
カッコで囲みます。
HTML
<span class=”mxn_animation_underline”>アンダーライン</span>テキスト
右のテキストを<span class=”mxn_animation_circle”>丸で囲むアニメーションサークル</span>です。
これは<span class=”mxn_animation_box”>アニメーションボックス</span>を指定しています。
重要な部分を<span class=”mxn_animation_highlight”>ハイライト表示ハイライト表示</span>できます。
<span class=”mxn_animation_bracket”>これはブラケット<br>カッコで囲みます。</span>
そして、テキストモジュールの下に「コードモジュール」を追加して以下を記述
（プラグインは要らない）
コード
<script type=”module”>
import { annotate } from ‘https://unpkg.com/rough-notation?module’;
const n1 = document.querySelector(‘.mxn_animation_underline’);
const n2 = document.querySelector(‘.mxn_animation_circle’);
const n3 = document.querySelector(‘.mxn_animation_box’);
const n4 = document.querySelector(‘.mxn_animation_highlight’);
const n5 = document.querySelector(‘.mxn_animation_bracket’);
const a1 = annotate(n1, { type: ‘underline’, color: ‘blue’ });
const a2 = annotate(n2, { type: ‘circle’, color: ‘red’, padding: 3 });
const a3 = annotate(n3, { type: ‘box’, color: ‘orange’ });
const a4 = annotate(n4, { type: ‘highlight’, color: ‘yellow’, iterations: 1, multiline: true });
const a5 = annotate(n5, { type: ‘bracket’, color: ‘red’, padding: [2, 10], brackets: [‘left’, ‘right’], strokeWidth: 5 })
a1.show();
a2.show();
a3.show();
a4.show();
a5.show();
</script>
classを決めて（h1 とか strong とかでも良い）、それに対応するtype や color をセットして、show() する。
って感じです。
もう一つ、グループ化。順番にアニメーションします。
アニメーションここを丸で囲むサークル
これはグループボックスを指定している
右の文章をハイライト表示します。ハイライト表示します。
ブラケットのサンプル
ブラケットのサンプル
HTML
<span class=”mxn_animation_group_underline”>アンダーライン</span>テキスト
アニメーション<span class=”mxn_animation_group_circle”>ここを丸で囲む</span>サークル
これは<span class=”mxn_animation_group_box”>グループボックス</span>を指定している
右の文章を<span class=”mxn_animation_group_highlight”>ハイライト表示します。ハイライト表示します。</span>
<span class=”mxn_animation_group_bracket”>ブラケットのサンプル<br>ブラケットのサンプル</span>
同じように「コード」モジュールを使い以下を記述します。
コード
<script type=”module”>
import { annotate, annotationGroup } from ‘https://unpkg.com/rough-notation?module’;
const n11 = document.querySelector(‘.mxn_animation_group_underline’);
const n12 = document.querySelector(‘.mxn_animation_group_circle’);
const n13 = document.querySelector(‘.mxn_animation_group_box’);
const n14 = document.querySelector(‘.mxn_animation_group_highlight’);
const n15 = document.querySelector(‘.mxn_animation_group_bracket’);
const a11 = annotate(n11, { type: ‘underline’, color: ‘blue’ });
const a12 = annotate(n12, { type: ‘circle’, color: ‘red’, padding: 3 });
const a13 = annotate(n13, { type: ‘box’, color: ‘orange’ });
const a14 = annotate(n14, { type: ‘highlight’, color: ‘yellow’, iterations: 1, multiline: true });
const a15 = annotate(n15, { type: ‘bracket’, color: ‘red’, padding: [2, 10], brackets: [‘left’, ‘right’], strokeWidth: 5 })
const ag = annotationGroup([a11, a12, a13, a14, a15]);
ag.show();
</script>
コードを見ると大体分かると思います。
詳しい説明やその他のオプションはこちらのページから確認してください。