コードをハイライト表示する方法 [WordPress]

Highlighting Code Block

ハイライター

• 「Prism」 (prism.js)

対応言語

• HTML
• CSS
• SCSS
• JavaScript
• TypeScript
• PHP
• Ruby
• Python
• Swift
• C
• C#
• C++
• Objective-C
• SQL
• JSON
• Bash
• Git

特徴

• ブロックエディタ (Gutenberg) 対応
• クラシックエディタ内で使用可能
• ライトモード／ダークモード
• 行番号表示
• 行ハイライト
• ファイル名表示

入手：

Highlighting Code Block | WordPress プラグイン [公式]

リポジトリ：

highlighting-code-block | WordPress Plugin Repository [Official]

参考：

WordPress でソースコードの記述がめちゃくちゃ簡単に！新旧エディタに対応のシンタックスハイライター Highlighting Code Block の使い方 | WEMO

WordPress のシンタックスハイライトは Highlighting Code Block がおすすめ | しろくまフォルダ

かゆいところに手が届く／ワードプレスでシンタックスハイライトするなら Highlighting Code Block で決まり／見やすくて簡単でかっこいい | チラ裏の束

Highlighting Code Block – 記事内でソースコードを見やすく表示できる WordPress プラグイン | TCD

WordPress でソースコードを表示するプラグイン Highlighting Code Block の使い方や設定方法をご紹介 | wagtechblog

検索

参考：

「code highlight」の検索結果 | WordPress プラグイン [公式]

まとめ

参考：

WordPress にコードを綺麗に表示したい！ GitHubGist と Highlighting Code Block | WEB 屋のメモ帳

Code Syntax Block

ハイライター

• 「Prism」 (prism.js)

対応言語

• 200 言語以上 (→ Supported Languages)

入手：

Code Syntax Block | WordPress Plugin [Official]

リポジトリ：

mkaz/code-syntax-block: A WordPress plugin which extends Gutenberg adding color syntax highlighting to the code block – GitHub

Syntax Highlighting Code Block

ハイライター

• 「highlight.php 」 (highlight.js を PHP へ移植したもの／サーバーサイド処理)

対応言語

• 185 言語 (→ Supported Languages )

入手：

Syntax Highlighting Code Block (with Server-Side Rendering) | WordPress Plugin [Official]

リポジトリ：

westonruter/syntax-highlighting-code-block: Extending the WordPress Code block with syntax highlighting rendered on the server, thus having faster frontend performance and being AMP-compatible – GitHub

参考：

westonruter/syntax-highlighting-code-block Wiki – GitHub

Code Prettify

ハイライター

• 「Code Prettify Library 」

対応言語

• C
• Java
• Python
• Bash
• SQL
• HTML
• XML
• CSS
• JavaScript
• Makefile
• Rust
• Ruby
• PHP
• VB
• Awk

拡張

• Apollo
• BASIC
• Clojure
• CSS
• Dart
• Erlang
• Go
• Haskell
• Lasso
• Lisp
• Scheme
• LLVM
• Logtalk
• Lua
• MATLAB
• MLs
• F#
• Ocaml
• SML
• Mumps
• Nemerle
• Pascal
• Protocol Buffers
• R
• S
• RD
• Rust
• Scala
• SQL
• Swift
• TCL
• LaTeX
• Visual Basic
• VHDL
• Wiki
• XQ
• YAML

入手：

Code Prettify | WordPress Plugin [Official]

リポジトリ：

kasparsd/code-prettify: WordPress plugin for automatic code highlighting using the Prettify library. No shortcodes, no classnames, pure awesome – GitHub

kasparsd/code-prettify-lib: Fork of the Code Prettify upstream to enable local usage – GitHub

Prismatic

ハイライター

• 「Prism」 (prism.js)
• 「highlight.js 」

入手：

Prismatic | WordPress Plugin [Official]

参考：

Favorite Highlight.js Styles | Dev Tricks

highlight.php

「highlight.js 」の PHP への移植

リポジトリ：

scrivo/highlight.php: A port of highlight.js by Ivan Sagalaev to PHP – GitHub