めんでぃなんか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】のインストール
上記URLからファイルのダウンロードも可能です。
管理画面左メニュー「プラグイン」から「新規追加」で「Highlighing Code Block」をインストールしてください。
インストールしたら「有効化」しましょう。有効化が完了すれば「ブロックエディタ」「クラシックエディタ」の両方でシンタックスハイライト機能付きコードブロックが簡単に挿入できるようになります。
78(なっぱ)ハイ終了！
めんでぃいや、使い方とかさ、ほら、設定とかあんじゃん、ちゃんとやれよ～
78(なっぱ)うわぁ、マジめんどくせ～
シンタックスハイライト機能付きコードブロックの挿入方法
有効化するだけで使えるシンタックスハイライトは使い方も簡単です。
エディタ内の「ブロック追加ボタン」から「フォーマット」を選択してください。
「Highlighting Code Block」をクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ファイル名」「ラインハイライト指定エリア」がセットのブロックが表示されます。
左下の「言語選択ボックス」から好きな言語を選択しましょう。
「HTML」を選択して簡単なコートを書いてみましょう。
h1タグに大好き！と入れてみました。
プレビューで見るとこのようになります。
めんでぃおいおい、解説に不備があるぞ！
ラインハイライトの使用方法
ブロックエディタでは、ラインハイライト機能も簡単に使用できます。
先ほどのHTMLコードの２行目をハイライト表示させたい場合は右下の「data-line属性値」に「2」と入力しましょう。
2行目のコードがハイライト表示されます！
ちなみに設定を変えるとこうなります。
ハイライト表示は複数行でも可能です。
めんでぃこの黒いの超かっけー！
- 5「5行目」
- 1-5「1行目から5行目」
- 1,4「ライン1とライン4」
- 1-2、5、9-20「1行目から2行目、5行目、9行目から20行目」
78(なっぱ)パソコンもってないのに関係ねぇだろ
個別のコードブロックごとに「行数表示」の設定できます。
コードブロックごとに行数の表示をするかどうかを設定できます。
「１行のコードのときは行数を表示したくない」などの設定が可能になります。
コードブロックに「ファイル名の表示」ができる
コードブロックに「ファイル名」を設定するテキストエリアがあります。
実際は以下のような表示になります。
シンタックスハイライト各種設定
シンタックスハイライトの各種設定について解説します。
管理場面左メニューから「設定」⇒「CODE BLOCK」をクリックしてください。
次のページが開きます！
基本設定から順番に解説します。
Highlighting Code Block 基本設定
上から順番です。
- コードブロックに言語名を表示するかどうか（デフォルト：表示する）
- コードの行数を表示するかどうか（デフォルト：表示する）
- フォントスムージングのオン・オフ（デフォルト：オフ）
- サイト表示側のコードカラーリング（デフォルト：Light）
- エディタでのコードカラーリング（デフォルト：Light）
- コードのフォントサイズ（PC）（デフォルト：14px）
- コードのフォントサイズ（SP）（デフォルト：13px）
- コードの “font-family”（Menlo, Consolas, “メイリオ”, sans-serif;）
- ブロックエディタの最大幅の指定（デフォルト：指定なし）
コードのフォントファミリーは自由に設定できます。
Highlighting Code Block 高度な設定
次に、「基本設定」の下にある「高度な設定」について解説します。
使用する言語を減らしたい場合
使用する言語を減らしたい場合は不要な言語を減らしてください。
画像の言語ボックスから消した言語がなくなります。
使用する言語を増やしたい場合
78(なっぱ)あっ！限界だ！
めんでぃえっ！限界ってなんだよ！
78(なっぱ)いやいや。こんなにある言語をさらに増やしたいって、もう変態やん
めんでぃわかんないってことっすよね！
78(なっぱ)はぁ？お前この先いうても意味わからんやろ！
めんでぃまぁいいっすわ、この先は了さんのWEMO.techで勉強しますわ
78(なっぱ)いや、ネタ元知っとんなら最初っからいけやっ！
ということで、この先のちょっと説明書くのがめんどい部分を知りたい方はSWELL開発者”了”さんのWEMO.techでご覧ください。
このプラグインは初心者がデキル感を出すには最高にかっこいいプラグインです（笑）
僕はHTMLもCSSも使いたくないのでこの方のテーマを使っています。
78(なっぱ)あっ、行くんやったらパソコン買えよ