【WordPress】記事にソースコードを表示するプラグイン「Syntax Highlighter」

2019.02.07 Wordpress

まだ出来立てのブログなので実例はありませんが、今後ブログ内にソースコードを書く機会が増えてくるだろうと思い、WordPressのプラグイン「Syntax Highlighter for WordPress」を入れてみました。

WordPress（ワードプレス）ロゴ

初めて使ってみたのですが、なかなかいい感じです！

Syntax Highlighter for WordPress

実際の表示はこんな風になります。

※現在は「Crayon Syntax Highlighter」というプラグインを利用しているため、下記の表示は「Syntax Highlighter for WordPress」とは若干異なります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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="http://wordpress.org/">WordPress</a></p>
</body>
</html>

記述する言語によってclassを変更します。

XMLの場合
<pre class=”brush:xml;”></pre>
CSSの場合
<pre class=”brush:css;”></pre>
JavaScriptの場合
<pre class=”brush:js;”></pre>
PHPの場合
<pre class=”brush:php;”></pre>

LINK：Syntax Highlighter for WordPress
Related Posts