こんにちは、今日はWordPressでソースコードのシンタックスハイライトが行えるSyntaxHighlighter Evolvedの使い方についてまとめていきます。
Table of Contents
インストール方法
プラグイン > 新規追加 からSyntaxHighlighter Evolvedで検索
または公式サイトからダウンロードします。
https://ja.wordpress.org/plugins/syntaxhighlighter/
使用方法
プラグインを有効化すると、ショートコードやブロックエディタのブロックが使用できるようになります。
ショートコードの場合
以下のように[[code]と[/code]]の間に修飾したいソースコードを記述します。
languageにはコードのフォーマットを指定します。
1 2 3 4 5 6 7 8 | [[code language="html"]<html> <head> </head> <body> </body></html>[/code]] |
ブロックエディタの場合
フォーマット > SyntaxHighlighter コード からSyntaxHighlighterのブロックを追加、そのブロックにコードを記述することで表示できます。
設定できる項目は以下の通りです。
| コード言語 | シンタックスハイライトのフォーマットを指定します。 |
| 行番号を表示 | 行番号を表示します。 |
| 最初の行番号 | 行番号が指定番号から始まります。 |
| ハイライト行 | 指定行をハイライトします。 |
| URL をクリック可能にする | コード内にURLがあった場合にクリック可能にします。 |
| Enable edit mode on double click | ダブルクリックで編集モードに移行するか |
対応フォーマット一覧
対応言語等は以下の通りです。
| ActionScript |
| BASH / Shell |
| C# |
| C / C++ |
| Clojure |
| ColdFusion |
| CSS |
| Delphi |
| diff / patch |
| Erlang |
| F# |
| Groovy |
| HTML / XHTML / XML / XSLT |
| Java |
| JavaFX |
| JavaScript |
| LaTeX |
| MATLAB |
| Objective-C |
| Perl |
| PHP |
| PowerShell |
| Python |
| R |
| Ruby / Ruby on Rails |
| Scala |
| SQL |
| Visual Basic |
| YAML |
| プレーンテキスト |
以下のページにも一覧が記載されています。
https://wordpress.com/support/wordpress-editor/blocks/syntax-highlighter-code-block/2/
表示例
以下に一部コードの表示例を記載します。
HTML
1 2 3 4 5 6 | <html> <head> </head> <body> </body></html> |
C / C++
1 2 3 4 5 | #include <stdio.h>int main() { printf("Hello World!");} |
