WordPressでGoのSyntax Highlightを表示させる。

こんにちは。りょう( @r0y4260 )です。

WordPressで技術ブログを書く際にユーザーに見えやすくするためにSyntax Highlightを設定しようとしたのですが、プラグイン周りでなかなか苦労したので書くことにしました。

↓ こういうやつです

package main

import "fmt"

func main() {
    fmt.Println("hoge")
}

↓ syntax highlightがないバージョン

package main

import "fmt"

func main() {
    fmt.Println("hoge")
}

 

どちらが見やすいか一目瞭然ですよね。

結論

結論、現在私が最終的に落ち着いたものが、

Enlighter – Customizable Syntax Highlighter というプラグインを利用しています。

以下の4点でしぼっていきました。

Markdownの対応には、一部設定が必要です。
インストールして、有効化にしたあとに、設定画面に入り、Editorをクリックします。

すると上にMarkdownという記載があるので、有効化します。

有効化したあとに投稿画面に戻り、

有効化したあとに、上の画像のように`というコードブロック用のMarkdown記法を用いれば、
以下のようなに生成されます。

package main

import "fmt"

func main() {
    fmt.Println("fuga")
}

 

Markdown記法についてはこちらをご参照ください。

その他検討したプラグイン

『SyntaxHighlighter Evolved』
・Go拡張

こちらは最新のWordPressでのテストがされていなかったので、断念。。。
特にGo言語拡張版は最終更新履歴が10年前以上..さすがに入れるの怖いですね。

『Crayon SyntaxHighlighter』

このプラグインも検索するとよく出てきますが、こちらも最終更新が5年前なので断念。

『Highlighting Code Block』

こちらは最終更新が2ヶ月前で有力でした。
prism.jsとかをここのサイトからコピーしてカスタマイズできる点も良かったです。

使い方とかこちらのブログで詳しく載せてくれていますが、
WordPressのテーマ（JINを利用しています）とClassic Editorで相性が悪く、出てこなかったので、テキストエディタで無理やり使っていました。
わざわざ<pre>とか使うのちょっとしんどかったです。。。

<div class="hcb_wrap">
<pre class="prism undefined-numbers lang-go" data-file="main.go" data-lang="Go" data-line="3"><code>package main

import "fmt"

func main() {
fmt.Println("hoge")
}</code></pre>
</div>

終わりに

というわけで、最終的に Enlighter – Customizable Syntax Highlighter というプラグインで落ち着きました。