WordPressでソースコードをそのまま表示・埋め込むプラグイン【Highlighting Code Block】

2024年8月10日2024年8月13日

当ページのリンクには広告が含まれています。

ねこ

今回は、「Highlighting Code Block」というプラグインを使って、ソースコードをそのまま表示・埋め込む方法についてご紹介していきます。

「Highlighting Code Block」とは？

「Highlighting Code Block」は、SWELLの開発者が制作した、カラーリングが施されたコードブロックを手軽に導入できる無料プラグインです。
シンタックスハイライトプラグインで、ブロックエディターとクラシックエディターの両方に対応しています。

STEP

「プラグイン」→「新規プラグインを追加」を押す

STEP

プラグインの検索フォームに「Highlighting Code Block」と入力する

STEP

検索結果が表示されたらHighlighting Code Blockの「今すぐインストール」ボタンを押す

STEP

Highlighting Code Blockの「有効化」ボタンを押す

STEP

Highlighting Code Blockのインストールと有効化が完了

これで「Highlighting Code Block」のインストールと有効化が完了です。

「Highlighting Code Block」の詳しい使い方は、以下の公式ページをご覧ください。

以下、実際に「Highlighting Code Block」を使用した表示例です。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>

<body>
</body>

</html>

HTMLのソースコードをきれいに見やすく表示することができました。

コードカラーリングは「Light」と「Dark」の2種類から選択でき、私は「Dark」を使用しています。

今回は、「Highlighting Code Block」というプラグインを使って、ソースコードをそのまま表示・埋め込む方法についてご紹介しました。

「Highlighting Code Block」を使うことで、WordPressの記事内にプログラムのソースコードをきれいに見やすく表示・埋め込むことができます。

ぜひ、このプラグインを活用して、読者にとって見やすく、理解しやすい記事作成に役立ててください。

最後までご覧いただきありがとうございました。

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