ソースコードの記述が簡単にできる【Highlighting Code Block】の使い方

めんでぃ

なんかHTMLのコードをカッコよく見せるのあるじゃないっすか!こうゆうの!

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>この記事は</title>
  </head>
  <body>
    <h1>全部</h1>
    <p>真似タイズ記事です。</p>
  </body>
</html>
78(なっぱ)

あ~、あるね

めんでぃ

あれってどうやって使うんすか?

78(なっぱ)

さ~、知らない。

めんでぃ

いや、マジで教えてくださいよ!ウェルの推奨プラグインなんでしょ

78(なっぱ)

そうだけど、使わね~もん。てか使わないためにこのテーマ買ってんだよ

78(なっぱ)

それとスウェルな!

めんでぃ

まぁ、そおいわずにチャチャッと教えちゃってください!お願い!

78(なっぱ)

筋肉バカが、クソッ!

と、いつものプラグイン寸劇にお付き合いいただきありがとうございます。

正直、「Highlighting Code Block」はインストールしたら使えますが、解説しておきます。

【Highlighting Code Block】のインストール

Highlighing Code Blockhttps://wordpress.org/plugins/highlighting-code-block/

上記URLからファイルのダウンロードも可能です。

管理画面左メニュー「プラグイン」から「新規追加」で「Highlighing Code Block」をインストールしてください。

Highlighing Code Block

インストールしたら「有効化」しましょう。有効化が完了すれば「ブロックエディタ」「クラシックエディタ」の両方でシンタックスハイライト機能付きコードブロックが簡単に挿入できるようになります。

78(なっぱ)

ハイ終了!

めんでぃ

いや、使い方とかさ、ほら、設定とかあんじゃん、ちゃんとやれよ~

78(なっぱ)

うわぁ、マジめんどくせ~

シンタックスハイライト機能付きコードブロックの挿入方法

有効化するだけで使えるシンタックスハイライトは使い方も簡単です。

エディタ内の「ブロック追加ボタン」から「フォーマット」を選択してください。

ブロックエディタ フォーマット

Highlighting Code Blockをクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ファイル名」「ラインハイライト指定エリア」がセットのブロックが表示されます。

コード入力エリア・言語選択・ファイル名・ラインハイライト指定エリア

左下の「言語選択ボックス」から好きな言語を選択しましょう。

言語選択

「HTML」を選択して簡単なコートを書いてみましょう。

HTML記入例

h1タグに大好き!と入れてみました。

プレビューで見るとこのようになります。

大好き!
めんでぃ

おいおい、解説に不備があるぞ!

ラインハイライトの使用方法

ブロックエディタでは、ラインハイライト機能も簡単に使用できます。

先ほどのHTMLコードの2行目をハイライト表示させたい場合は右下の「data-line属性値」に「2」と入力しましょう。

data-line属性値

2行目のコードがハイライト表示されます!

ラインハイライト表示(ライトカラー)

ちなみに設定を変えるとこうなります。

ラインハイライト表示(ダークカラー)

ハイライト表示は複数行でも可能です。

めんでぃ

この黒いの超かっけー!

  • 5「5行目」
  • 1-5「1行目から5行目」
  • 1,4「ライン1とライン4」
  • 1-2、5、9-20「1行目から2行目、5行目、9行目から20行目」
78(なっぱ)

パソコンもってないのに関係ねぇだろ

個別のコードブロックごとに「行数表示」の設定できます。

コードブロックごとに行数の表示をするかどうかを設定できます。

コードブロック個別設定

「1行のコードのときは行数を表示したくない」などの設定が可能になります。

コードブロックに「ファイル名の表示」ができる

コードブロックに「ファイル名」を設定するテキストエリアがあります。

ファイル名入力

実際は以下のような表示になります。

コードブロックにファイル名が表示される

シンタックスハイライト各種設定

シンタックスハイライトの各種設定について解説します。

管理場面左メニューから「設定」⇒「CODE BLOCK」をクリックしてください。

次のページが開きます!

「設定」⇒「CODE BLOCK」

基本設定から順番に解説します。

Highlighting Code Block 基本設定

上から順番です。

  • コードブロックに言語名を表示するかどうか(デフォルト:表示する
  • コードの行数を表示するかどうか(デフォルト:表示する
  • フォントスムージングのオン・オフ(デフォルト:オフ
  • サイト表示側のコードカラーリング(デフォルト:Light
  • エディタでのコードカラーリング(デフォルト:Light
  • コードのフォントサイズ(PC)(デフォルト:14px
  • コードのフォントサイズ(SP)(デフォルト:13px
  • コードの “font-family”(Menlo, Consolas, “メイリオ”, sans-serif;)
  • ブロックエディタの最大幅の指定(デフォルト:指定なし

コードのフォントファミリーは自由に設定できます。

Code Block 基本設定

Highlighting Code Block 高度な設定

次に、「基本設定」の下にある「高度な設定」について解説します。

Code Block設定 高度な設定

使用する言語を減らしたい場合

使用する言語を減らしたい場合は不要な言語を減らしてください。

画像の言語ボックスから消した言語がなくなります。

使用する言語を増やしたい場合

78(なっぱ)

あっ!限界だ!

めんでぃ

えっ!限界ってなんだよ!

78(なっぱ)

いやいや。こんなにある言語をさらに増やしたいって、もう変態やん

めんでぃ

わかんないってことっすよね!

78(なっぱ)

はぁ?お前この先いうても意味わからんやろ!

めんでぃ

まぁいいっすわ、この先は了さんのWEMO.techで勉強しますわ

78(なっぱ)

いや、ネタ元知っとんなら最初っからいけやっ!

ということで、この先のちょっと説明書くのがめんどい部分を知りたい方はSWELL開発者”了”さんのWEMO.techでご覧ください。

このプラグインは初心者がデキル感を出すには最高にかっこいいプラグインです(笑)

僕はHTMLもCSSも使いたくないのでこの方のテーマを使っています。

78(なっぱ)

あっ、行くんやったらパソコン買えよ

よかったらシェアしてね!