はてなブログでマーカー（蛍光ペン）のアニメーション

スクロールすると下線が引かれます。

吾輩わがはいは猫である。名前はまだ無い。
吾輩は猫である - 夏目漱石

片手に梅の枝をかざした儘、片手に紫匂むらさきにほひの袿うちぎの袖を軽さうにはらりと開きますと、 やさしくその猿を抱き上げて、若殿様の御前に小腰をかゞめながら 「恐れながら畜生でございます。どうか御勘弁遊ばしまし。」と、涼しい声で申し上げました。
地獄変 - 芥川龍之介

私はそのさまを見ると，大層不憫に思いました． 「銀の滴降る降るまわりに， 金の滴降る降るまわりに．」という歌を 歌いながらゆっくりと大空に 私は輪をえがいていました．貧乏な子は 片足を遠く立て片足を近くたてて， 下唇をグッと噛みしめて，ねらっていて ひょうと射放しました．小さい矢は美しく飛んで 私の方へ来ました，それで私は手を 差しのべてその小さい矢を取りました． クルクルまわりながら私は 風をきって舞い下りました． すると，彼かの子供たちは走って 砂吹雪をたてながら競争しました．
アイヌ神謡集 - 知里幸惠編訳

使い方

hl タグを書きます。２文字目は、イチではなくて エル です。

吾輩わがはいは猫である。<hl color="#CECEF6">名前はまだ無い。</hl>

設定の仕方

Step 1.

「設定」 -> 「詳細設定」 を開く

Step 2.

「headに要素を追加」に以下のコードを コピペ すれば hl タグが使えるようになります。

解説

概要

Vue.js で作りました。 自分で定義したタグが使えるようになって、すげーみたいな気持ちになっています。

詳細

以下の記事で解説しました。ただし殴り書きです。

また上記 GitHubGist のコードとは、前半のこの部分が違います。 これは上のコードが、はてなブログ用に書かれているためです。

// DOM が描画されるまで待つ
setTimeout(vue, 1000);


function vue() {
    new Vue({
        el: '#container',  // id="container" 配下の DOM で
        components: {
            hl: highlight(),  // hl タグを使えるようにしますよ
        }  // という意味
    });
}

おわりに

Vue.js の雰囲気だけ伝わればと思いました。以上になります。ありがとうございました。