学生による学生のためのデータサイエンス勉強会

【WordPress】シンタックスハイライトを利用してコードを美しく表示させよう。

今回は、文字に色を付けたりハイライトを加える方法をまとめます。

なお本サイトでは、Code Syntax Blockというプラグインを使用しています。

WordPressのデフォルトを確認

まずは何も設定していない状態のソースコード表示を見てみましょう。

いつものブロックメニューから「コード」を選べばOKです。もしくはスクロールして「フォーマット」→「コード」でも構いません。

# 例としてPythonのコードを打ってみます。
import pandas as pd

こんなふうに見えます。良くも悪くもシンプルですね。

シンタックスハイライトを使う

シンタックスハイライトとは、ソースコードを見やすくするための機能です。

本サイトでは、Code Syntax Blockというプラグインを使用しています。これでGutenbergエディタでも簡単にシンタックスハイライティングできます。

ソースコードを文法的に色分けすることで視認性を向上させます。

# シンタックスハイライトを使うとこんなふうに見えます。
import pandas as pd

どうでしょう。見やすくなっていますよね。

シンタックスハイライトの設定方法

では編集画面でシンタックスハイライトを設定する方法を説明します。

いつもどおり、ブロックメニューから「コード」を選択します。

コードブロックの中にコードを書いてください。

右側のサイドメニューにシンタックスハイライトに関する項目が出るように設定しました。

ここから「Language」からプログラミング言語を選択します。ある程度使いそうなものをピックアップしてあります。もっと欲しい方は管理者まで連絡してください。

選択可能な言語の一覧

「Show line numbers」からはコードの行数を表示させます。これは基本的にONにしましょう。

「Title for Code Block」では、そのコードブロックに見出しをつけます。これは説明しやすくするための配慮です。つけてもつけなくてもOKです。

プレビューを押して確認しましょう。これであなたの書いたコードに色がついているはずです。


さて今回はシンタックスハイライトの紹介でした。これを使ってソースコードを見やすく書いていきましょう!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です