WordPressデフォルトのコードフォーマット表示
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
</head>
<body>
<div>
hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
</div>
</body>
</html>WordPressデフォルトで使用できるコードフォーマットでは上記のように表示されます。
横スクロールバーが表示され背景色もグレーになりますがそれだけです。
これでは流石に読みにくいのでプラグインを入れてキレイに表示されるようにしました。
Highlighting Code Blockのソースコード表示
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
</head>
<body>
<div>
hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
</div>
</body>
</html>Highlighting Code Blockを使うと上記のように表示されます。
行番号が表示されるのがとても助かります。
文字サイズも小さくなり、色もついていて読みやすくなっています。
記述をするときもデフォルトのコードフォーマットでは横に長くなると自動的に改行されてしまっていたのですが、このプラグインで記述をするとそのようなことはなくスクロールバーが表示されます。
これがとてもありがたいです。
インストール
管理画面のダッシュボードからプラグイン→新規追加をクリックします。
キーワードに「Highlighting Code Block」を入力します。
自動的に検索が実行されHighlighting Code Blockが検索結果に表示されます。
今すぐインストールをクリックしてその後、有効化ボタンをクリックします。
使用方法
非常に簡単に使うことができます。
インストール後は投稿画面のブロックエディタ「フォーマット」内に追加されています。
■Your Code…
「Your Code…」にソースコードを記述していけば自動で行番号が振られスクロールバーも表示されます。
■-Lang Select-
左下の「-Lang Select-」プルダウンで記述したコードの言語を選択できます。
選択をしなかった場合は文字に色が付きません。
■ファイル名
ファイル名を記述すると右上にファイル名が表示されるようになります。
ファイル名を記述しなかった場合は選択した言語が表示され、言語も選択しなかった場合は何も表示されません。
■data-line属性値
クリックすると画面右側に上記が表示されます。
行番号の表示などの設定ができます。
コメント