IT実践

コードをハイライト表示するhighlight.jsの機能拡張「任意の範囲を強調表示」

  • このエントリーをはてなブックマークに追加
  • LINEで送る

コード表示をする際にhighlight.jsを使う人が非常に多いですね。
私も以前はWordPress用のハイライト表示プラグインを使っていましたが、重いだけでなく訪問者がコピペする際に不自由なことも多く、最近はhighlight.jsに落ち着いています。

非常に優れているhighlight.jsですが、コード表示に特化されているため拡張機能はありません。
以前から「コードの修正した部分を強調表示にしたい」と思いネット上の情報を探してみたのですが見つからずに棚上げ状態だったのですが、非常に簡単で実用的な方法を思いつきましたので記事にしておきます。

対象

  • WordPressでhighlight.jsを使っている方
  • ソースコードの中でイタリック体を使わない方

カスタマイズ方法

使っているテーマのスタイルシート(style.css)に以下を追加して完了です。

明るい背景用

pre > code em {
  font-weight: normal;
  margin: 0;
  background: #feff8c;
  border-radius: 3px;
}

表示結果(Hello Worldを強調)

<html>
  <head>
    <title>PHP Test</title>
  </head>
  <body>
  <?php echo '<p>Hello World</p>'; ?> 
  </body>
</html>

暗い背景用

pre > code em {
  font-weight: normal;
  margin: 0;
  background: #1e4f1e;
  border-radius: 3px;
}

表示結果(Hello Worldを強調)

<html>
  <head>
    <title>PHP Test</title>
  </head>
  <body>
  <?php echo '<p>Hello World</p>'; ?> 
  </body>
</html>

応用例

pre > code em {
  position: relative;
  font-weight:normal;
  margin:0;
  background: #1e4f1e;
  border-radius: 3px;
  border-bottom: solid 1px #318431;
}
pre > code em:before {
  content:"※";
  font-size: 0.5em;
  margin-top: -1em;
  position: absolute;
  top: 0;
  left: 0;
}

表示結果(Hello Worldを強調)

<html>
  <head>
    <title>PHP Test</title>
  </head>
  <body>
  <?php echo '<p>Hello World</p>'; ?> 
  </body>
</html>

使い方

CSSを見てお分かりの通り、emタグを利用しています。
強調表示したい部分を選択してイタリックアイコン(Ctrl + I)をクリックするだけです。

日本人はあまり利用することの少ないイタリック体ですが、WordPressのビジュアルエディタは最近のGutenbergでさえも、emタグが挿入される「イタリック体」のアイコンボタンがあります。
WordPressを使って記事を書く際に、私は今まで一度もこのアイコンを使った記憶がありませんが、これからは有効活用できそうです。

HTMLの文法的にもemタグは「強調」という意味合いですのでピッタリです。
コードをコピペする際にも、余計なタグ等は入らずに従来通りコピーすることができます。

 

関連記事