賢威でブログ記事にソースコードを記載する方法

※当サイトにはプロモーションが含まれています。

エンジニアさんのブログなど、技術メモを残したいとき、ソースコードが掲載されている事があります。

自分は、エンジニアとは程遠い職種でしたが、なんか格好いいので、やってみることにしました。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※現在、WP：6.2.x、PHP：8.2.xでも動作しています

色々なプラグインや機能がありましたが、クラシックエディターかつ、賢威で動くのが自分の中の条件でした（グーテンベルク（Gutenberg）は苦手で･･･）。

そして、手軽に出来るものだと、プラグインの「Highlighting Code Block」が最適でした。

この記事の目次
  1. プラグイン Highlighting Code Blockの使い方

プラグイン Highlighting Code Blockの使い方

プラグイン Highlighting Code Blockの使い方について説明します。

プラグインをインストール

プラグイン画面で、Highlighting Code Blockで検索します。

Highlighting Code Block

プラグインをインストールしたら有効化します。

Highlighting Code Blockの設定

「[HCB]設定」というのが、Highlighting Code Blockの設定ページです。
[HCB]設定

基本的に、デフォルト設定でいけますが、好みに応じて、コードカラーを変更しましょう。

lightモード

light

darkモード

dark

Highlighting Code Blockの使い方

投稿画面にきたけど、「プラグインが表示されていない！」と思ったあなた！

実は、自分も「えっ！」ってなりました。

Highlighting Code Blockが見当たらない

これは、「ツールバー切り替え」を押したら出てきました。

Highlighting Code Block表示

あとは、記述したい言語を選択して、ブロックができた場所にコードを記載しましょう。

各種言語の表示例

CSS
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
SCSS
$body-color: lightblue;
$title-color: navy;

body {
background-color: $body-color;
}

h1 {
color: $title-color;
margin-left: 20px;
}
JavaScript
let message = "Hello World!";
console.log(message);
TypeScript
let message: string = "Hello World!";
console.log(message);
PHP
<?php echo "Hello World!"; ?>
Ruby
puts "Hello World!"
Python
print("Hello World!")
Swift
let message = "Hello World!"
print(message)
C
#include <stdio.h>

int main() {
printf("Hello World!\n");
return 0;
}
C#
using System;

class Program {
static void Main() {
Console.WriteLine("Hello World!");
 }
}
C++
#include <iostream>

int main() {
std::cout << "Hello World!" << std::endl;
return 0;
}
Objective-C
#import <Foundation/Foundation.h>

int main() {
NSLog(@"Hello World!");
return 0;
}
SQL
SELECT name, age FROM users WHERE age >= 18;
JSON
{
"message": "Hello World!"
}
Bash
echo "Hello World!"
Git
git init
git add .
git commit -m "First commit"

かなり多くの言語をカバーしてますね。

なお、ご自身でカスタマイズすれば、これ以外の言語を追加することも可能です。

ちなみに、こういったプログラムのソースコード内の文法（シンタックス）を色分けやスタイル（太字やイタリックなど）を使って視覚的に区別する機能を「シンタックスハイライト」というそうな･･･。