Highlighting Code Blockの行指定ハイライトをテキストエディタでする方法

ウェブ

WordPressの記事でCSSなどのコードを綺麗に紹介したい。
 
特にカスタマイズ系の記事を書く人にとってはこのニーズあると思いますし、最近ではプラグインなしで実装できるprism.jsなどを使っている方も多いのではないでしょうか。
 
プラグインだと、以前はCrayon Syntax Highlighterを使っている方が多かったと思います。
 
が、最終更新から4年以上経っていますし、使えなくなったという事例も散見されますね。
 
私が現在コードをシンタックスハイライト表示するために使っているプラグインはHighlighting Code Blockです。
 
このプラグインは操作性が便利ですし、ハイライト機能にはprism.jsが使用されています。
 
この記事ではこのプラグイン自体の細かい紹介はしませんが、既に紹介記事がたくさんネット上にありますので、気になる人は『Highlighting Code Block』でググって調べてみてください。
 
 

行指定ハイライトをテキストエディタでする方法

さて、この記事では掲題の通り、行指定ハイライトをWordPressのテキストエディタでする方法を紹介します。
 
私は未だにブロックエディタ使ってないんですよ。元々ビジュアルエディタも使わないテキストエディタ派なので…。
 
この行指定ハイライトはブロックエディタならボタン操作だけで簡単にできることなんですが、テキストエディタ派の人は戸惑う可能性があるかもしれないので記事にしておこうかなと思いました。
 

行指定ハイライトとは

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/*スマホ・タブレット表示の際のアイキャッチ余白調整*/
.eye-catch {
    margin-right: -16px;
    margin-left: -16px;
}
}

 
サンプルとして実際にコードを貼ってみましたが、このコードの場合は4~8行目を追記してほしいので、その部分だけ行ごとハイライト表示させています。
 
これをテキストエディタで指定する方法をこの記事ではご紹介します。
 
 

やり方

そっくりそのままコピペで使えるHTMLを貼っておきますので、これをエディタに貼り付けるだけでOKです。

<div class="hcb_wrap">
<pre class="prism line-numbers lang-css" data-lang="CSS" data-line="4,5,6,7,8"><code>
/*表示したいコードを記述する*/
 
</code></pre>
</div>

 
ポイントの解説だけしておきます。
 
行指定しているのは以下の部分
 
data-line=”4,5,6,7,8″
 
上の記述では4~8行目までをハイライト表示するように指定しています。
 
ハイライト表示したい行を変更したい場合にはこの数字を変更してください。
 
あと、行指定ハイライトが不要な場合には以下のように

<div class="hcb_wrap">
<pre class="prism line-numbers lang-css" data-lang="CSS" ><code>
/*表示したいコードを記述する*/
 
</code></pre>
</div>

 
data-line=”4,5,6,7,8″
 
この部分をコードから消せばOKです。
 

0

この記事へのコメント

トップへ戻る