ハイライト

Web

Barba JSでHighlighting Code Blockを再度読み込む

しばらく前にサイトをリニューアルし、Barba JSを使っています。最初の読み込みで、全てのファイルを実行するので、普通のサイトを作っている感覚とは違い、遷移した後のjsは実行されないことに戸惑ってしまうことも。とは言え、そのおかげで最初のページ以外は読み込みが早く、快適ではあります。しかし、快適さを追求しつつも、動いて欲しいところは動いて欲しいという方向けに、ちゃんと用意されているんです、Hookが。wordpressで構築すると画面をリッチにするプラグインが多く、それを活かそうとするとHookが便利です。Highlighting Code Blockを使っていても、次ページ以降はハイライトが適用されなくて困っていたんですが、そこに記述すればいけるんじゃねと思い、実行。やはりできました。これはprism JSを使っているものであれば、適用できそうな感じですね。下記のjsを探り当てるために1週間くらいかかったことは秘密です。

Prism generated API documentation
Prism
afterEnter (data) {
 Prism.highlightAll();
}

クリップボタンも遷移後には消えてしまうので、どこかに起動スイッチがあるんだろうなと思いながらもピンポイントではわかりませんでした。そこで、hcb_script.jsにあるソースをごっそりコピペして、再起動。まあ、動いたからよしということで。下記は2つに分かれていますが、二つで一つです。一連の流れになります。

afterEnter (data) {
 (function () {
  const keyToken = document.querySelectorAll('.token.keyword');
  for (let i = 0; i < keyToken.length; i++) {
   const elem = keyToken[i];
   const defArr = ['function', 'def', 'class'];
   if (-1 !== defArr.indexOf(elem.textContent)) {
    elem.classList.add('def');
   } else if ('this' === elem.textContent) {
    elem.classList.add('this');
   }
  }

  // Line highlighter position.
  const lineHighlighter = document.querySelectorAll('.line-highlight');
  for (let i = 0; i < lineHighlighter.length; i++) {
   const elem = lineHighlighter[i];
   if (!elem.parentNode.classList.contains('line-numbers')) {
    const dataStart = elem.getAttribute('data-start');
    const topPosEm = (dataStart - 1) * 1.5; //line-heightの値
    elem.style.top = topPosEm + 'em';
   }
  }
  // clipboard
  (function () {
   if (!window.ClipboardJS) return;
   let clipCt = 1;

   // hcb_wrap
   const hcbWraps = document.querySelectorAll('.hcb_wrap');
   // const hcbClips = document.querySelectorAll('.hcb-clipboard');
   for (let i = 0; i < hcbWraps.length; i++) {
    const elem = hcbWraps[i];
    const code = elem.querySelector('code');
    if (null === code) continue;

    // ボタン生成
    const button = document.createElement('button');
    button.classList.add('hcb-clipboard');
    button.setAttribute('data-clipboard-target', '[data-hcb-clip="' + clipCt + '"]');
    button.setAttribute('data-clipboard-action', 'copy');
    // button.innerHTML = `コピー`;
    elem.prepend(button);

    // codeタグにターゲット属性追加
    code.setAttribute('data-hcb-clip', clipCt);
    clipCt++;
   }
   const clipboard = new ClipboardJS('.hcb-clipboard');
   clipboard.on('success', function (e) {
    const btn = e.trigger;
    btn.classList.add('-done');
    setTimeout(() => {
    btn.classList.remove('-done');
   }, 5000);
  });
 })();
 })()
}

コメント