※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

Enlighter

2023年8月30日

概要

Enlighter は、ソースコードを見やすく表示するためのプラグインです。
Kotlin にも対応しています。

公式サイト

インストールと有効化

WordPress 管理画面 -> プラグイン -> 新規追加 から、Enlighter で検索します。

プラグイン - Enlighter 検索

表示された Enlighter – Customizable Syntax Highlighter の [今すぐインストール] をクリックしインストールします。

プラグイン - Enlighter インストール中

インストール後は有効化します。

プラグイン - Enlighter 有効化

使用方法

ブロックエディタの + をクリックし、[Enlighter Source Code] を選択します。

ブロックエディタから Enlighter を追加

表示された Enlighter Source Code のエディタ内で、対象のプログラミング言語を選択しコードを記載します。

Enlighter でのコード記述領域


Kotlin にも対応しています。

Kotlin を選択

コードを記載します。

Enlighter で Kotlin のコードを記述

公開後、ページを表示した結果です。

Enlighter - 実際の表示

設定

設定は、WordPress 管理画面 -> Enlighter から可能です。

Enlighter 設定

デフォルトでも問題はありません。

Enlighter のテーマ

Enlighter の設定として利用しやすいのはテーマの変更だと思います。

WordPress 管理画面 -> Enlighter -> Appearance -> Theme

デフォルトで 13 のテーマがあり、14個目に 自分でカスタマイズしたテーマで表示する Theme Customizer があります。 (Enlighter 4.6.1 の場合)

  • Enlighter
  • Godzilla
  • Beyond
  • Classic
  • Mow Tow
  • Eclipse
  • Droide
  • Minimal
  • Atomic
  • Rowhammer
  • Bootstrap4
  • Dracula
  • Monokai
  • Theme Customizer
Enlighter のテーマ

以下、それぞれのテーマでのサンプルです。(後述の追加CSSの方法でフォントサイズ変更済です、その点はご了承ください。)

Enlighter

fun main() {
    println("Hello, World!")
}

Godzilla

fun main() {
    println("Hello, World!")
}

Beyond

fun main() {
    println("Hello, World!")
}

Classic

fun main() {
    println("Hello, World!")
}

Mow Tow

fun main() {
    println("Hello, World!")
}

Eclipse

fun main() {
    println("Hello, World!")
}

Droide

fun main() {
    println("Hello, World!")
}

Minimal

fun main() {
    println("Hello, World!")
}

Atomic

fun main() {
    println("Hello, World!")
}

Rowhammer

fun main() {
    println("Hello, World!")
}

Bootstrap4

fun main() {
    println("Hello, World!")
}

Dracula

fun main() {
    println("Hello, World!")
}

Monokai

fun main() {
    println("Hello, World!")
}

Enlighter のテーマをカスタマイズするときの注意

カスタマイズ自体は、WordPress 管理画面 -> Enlighter -> Theme Customizer から行います。

右側の [Base theme] タブで、ベースとなるテーマを選んで [Load] として、その後 ほかのタブでカスタマイズしていきます。

Enlighter - Theme Customizer

Theme Customizer のページに赤文字で書いてありますが、カスタマイズしたテーマを利用するには、WordPress 管理画面 -> Enlighter -> Appearance -> Theme で Theme Customizer を選択する必要があります。カスタマイズした設定が反映されない…と思ったら、ベースとしたテーマを選択したままでだったということもありえますのでご確認ください。

Enlighter で カスタマイズしたテーマを使うには Theme Customizer を選択する。

フォントサイズの変更 (追加CSSを利用した方法)

Enlighter のフォントサイズは、上記の Enlighter の Theme Customizer から可能ですが、単にフォントサイズだけ変更したい場合は、追加CSSを利用する方法も有効です。

方法

  1. WordPress の管理画面 -> [外観] -> [カスタマイズ] を選択
  2. 左側下のほうの [追加 CSS] を 選択 (位置は WordPress で使っているテーマによって異なるかもしれません。)
外観 - カスタマイズ - 追加CSS
  1. 追加 CSS として以下を記載
    2em の部分は、好みに応じて 1.2em や 1.8em など調節してください。
.enlighter-code {
	font-size: 2em;
}
  1. 右側に Enlighter のコードが表示されるページを出しておくと、プレビューしながら調節できるのでやりやすいです。
    以下は 2em の例です。上記に比べてフォントサイズが大きくなっているのがわかると思います。
.enlighter-code  の追加CSSを設定