こんにちは、今日はWordPressでソースコードのシンタックスハイライトが行えるSyntaxHighlighter Evolvedの使い方についてまとめていきます。
目次
インストール方法
プラグイン > 新規追加 からSyntaxHighlighter Evolvedで検索
または公式サイトからダウンロードします。
https://ja.wordpress.org/plugins/syntaxhighlighter/
使用方法
プラグインを有効化すると、ショートコードやブロックエディタのブロックが使用できるようになります。
ショートコードの場合
以下のように[[code]と[/code]]の間に修飾したいソースコードを記述します。
languageにはコードのフォーマットを指定します。
[[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
<html>
<head>
</head>
<body>
</body>
</html>
C / C++
#include <stdio.h>
int main() {
printf("Hello World!");
}