
SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。プラグインで動作するSyntax Highlighter(シンタックス・ハイライター)です。
クラシックエディタ・ブロックエディタの両方に対応しています。ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できます。
クラシックエディタを利用する場合は、専用のショートコードを利用してソースコードを記述します。
ブログの記事の中で、HTMLやプログラミングのソースコードを解説する機会が多い方は、このプラグインを活用すると役に立ちます。
はじめに
このプラグインが優れていること
- プラグインで動作する「Syntax Highlighter」です。
- 記事の中でアプリケーションのエディタのようにソースコードを綺麗に表示できる。
- クラシックエディタを利用する場合は、専用のショートコードの中にソースコードを記述して利用します。
- ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できる。New
- エディタの外観を変更できるデザインスキンが複数あり、好きなデザインを選べる。
- プラグインの管理画面が日本語化されているのでわかりやすい。
動作見本
下記は「SyntaxHighlighter Evolved Ver.3.x」が実際に動作する見本です。
記事にソースコードを綺麗に表示することができます。
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Code Example</title>
</head>
<body>
<h1>PHP コードサンプル</h1>
<p><?php echo 'Hello World!'; ?></p>
<p>この行をハイライトしています。</p>
<div class="foobar">フッター</div>
<p><a href="https://wordpress.org/">WordPress</a></p>
</body>
</html>
[/php]
SyntaxHighlighter Evolvedの導入
ダッシュボードから「プラグイン」→「新規追加」を選択します。
右上の検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。
インストールが完了したら「プラグインを有効化」をクリックしましょう。
これでSyntaxHighlighter Evolvedの導入が完了しました。