Blogger + JetTheme ②

ブログの引っ越し

当ブログはtakemi.blogに移行しました。

作成日時

2023/03/02

概要

前回の続きです。やり残しの改造を終えたので簡単にメモを残します。

コードに行番号を表示

highlight.jsに関する部分を変更します。

以下を検索して関連箇所を書き換えましょう。

hljs.highlightAll();

付近をこんな感じに修正します。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/stackoverflow-dark.min.css' rel='stylesheet' />
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js' />
<script src='//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js' />
<script>hljs.highlightAll();</script>
<script>hljs.initLineNumbersOnLoad();</script>

ちなみに上記だと1行だけのコードは行番号が表示されません。

もし、1行でも行番号が欲しければ次の記述を試してください。

<script>hljs.initLineNumbersOnLoad({singleLine: true});</script>

CSS部分はYour custom CSS is hereと書かれている辺りに書きます。

内容は以下です。デザインに関する部分なので好みで変更すると良いと思います。

.hljs-ln-numbers {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #CCCCCC;
  border-right: 1px solid #CCCCCC;
  vertical-align: top;
  padding-right: 0.25rem !important;
}
 
.hljs-ln-code {
  padding-left: 0.25rem !important;
}

コード部分にコピペ用ボタンを追加

よくコードの右上に付いてるあれです。

まずは以下のスクリプトを<!-- Your Style and Script before </body> is here -->の下に書きます。

<script type='text/javascript'>
  (function() {
    const btn = document.createElement('button');
    btn.id = 'selectPre';
    btn.textContent = 'Copy';
    btn.addEventListener('click', () => {
      const sel = window.getSelection();
      const pre = btn.parentNode;
      sel.selectAllChildren(pre);
      sel.extend(pre, pre.childNodes.length-1);
      if (navigator.clipboard) {
        navigator.clipboard
        .writeText(sel)
        .then(() => {
          codeWasCopied(btn);
        })
        .catch(() => {
        });
      } else {
        document.execCommand('copy');
        codeWasCopied(btn);
      }
      sel.empty();
    });
    const pres = document.querySelectorAll('pre');
    pres.forEach((pre) => {
      pre.addEventListener('mouseover', () => {
        pre.appendChild(btn);
      });
      pre.addEventListener('mouseleave', () => {
        btn.remove();
      });
    });
  }());
</script>

次はボタンのデザインを指定するCSSをYour custom CSS is hereの下に記述します。これも必要なら変えてください。

pre{
  position: relative;
  margin-top: 0.25rem;
}
 
#selectPre{
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  border-radius: 4px;
  background-color: #CCCCCC;
  opacity: 0.3;
  transition: 0.3s;
  cursor: pointer;
}
 
#selectPre:hover {
  opacity: 1.0;
}
 
function codeWasCopied(button) {
  button.blur();
  button.innerText = "Copied!";
  setTimeout(function() {
    button.innerText = "Copy";
  }, 500);
}

hタグの装飾

Markdownで書いた記事を変換すると境界が分かりづらいです。

なのでh1とh2に下線を付けて装飾します。h1は全体に。h2は文字列のみ。

h1 {
  border-bottom: 2px solid #F67938;
}
 
h2 {
  text-decoration: underline;
}

おわりに

最初のテンプレに比べれば格段に良くなったはず！