【SyntaxHighlighter】WordPressでソースコードを綺麗に見せる

どうも、TOMOZO(@TOMOZO)です。

どうも、最近は技術系の記事に専念していますが、技術系の記事をライティングするにあたって欠かせないのが「SyntaxHighlighter Evolved」というプラグインです。
「SyntaxHighlighter Evolved」はソースコードを装飾してくれてかっこ良く表示してくれます。

似たようなプラグインに「Crayon Syntax Highlighter」ってのがありますが、3年前から更新が止まっているため僕は使わないです。

「SyntaxHighlighter Evolved」はショートコードの機能も備えているため、いちいちビジュアルモードに切り替えなくても簡単に書けるようになってます。
ただ、ショートコードにどんなものがあるのか?とその効果についてはいまいち把握できていないため備忘録も兼ねて残します。

スポンサーリンク

SyntaxHighlighter Evolved の導入

WordPressの[プラグイン]の新規追加から「SyntaxHighlighter Evolved」を検索してインストール後、有効化するだけです。

SyntaxHighlighter Evolved の設定

ここでは割愛させて頂きます。
日本語表示対応であること、プレビュー機能があること、設定数が少ないのでそんなに難しいことはないと思います。

デフォルトのCSSがちょっとあれなので、カスタマイズしました。

  • https://www.saka-en.com/wordpress/syntaxhighlighter-wordpress-plugin/
  • https://oxynotes.com/?p=395

を参考にさせていただきました。

SyntaxHighlighter Evolved のショートコード一覧

ショートコードの基本的な使い方から、パラメータ設定とその表示例についてです。

基本的な使い方

コードを”[ハイライトしたい言語のエイリアス]~[/ハイライトしたい言語のエイリアス]”で囲むだけでOK。

例えば、PHPのコードを表示させたい場合は、

[php]
ここにコードを書く
[/php]

とするだけでPHPの構文をハイライトしてくれます。

ブロックエディタ「Gutenberg」を使用している場合は、ショートコードブロック([/])内に書きましょう。
なお、ショートコード内の文字が化ける現象が発生したため、こちらのサイト(http://open-net.info/?p=3941)を参考に改善しました。ありがとうございます。

対応言語とエイリアス

言語エイリアス
ActionScript3actionscript3
Bash/shellbash,shell
Clojureclojure
ColdFusioncoldfusion
C/C++c,cpp
C#csharp
CSScss
Delphidelphi
Erlangerlang
F#fsharp
Diffdiff
Groovygroovy
HTMLhtml
JavaScriptjs,javascript
Javajava
JavaFXjavafx
MATLABmatlab(keywordsonly)
Objective-Cobjc
Perlperl
PHPphp
Texttext
PowerShellpowershell
Pythonpython
Rr
Rubyruby
Scalascala
SQLsql
Visual Basicvb
XMLxml

ショートコードパラメータ

autolinks

URLをリンクに変換する。
設定値:true/false

書き方)

[html autolinks="true"]
<a href="https://fun-mylife.com/">autolinks パラメータの動作例です。</a>
[/html]

表示)

<a href="https://fun-mylife.com/">autolinks パラメータの動作例です。</a>

書き方)

[html autolinks="false"]
<a href="https://fun-mylife.com/">autolinks パラメータの動作例です。</a>
[/html]

表示)

<a href="https://fun-mylife.com/">autolinks パラメータの動作例です。</a>

collapse

ページ表示時にソースコードを折り畳む。
設定値:true/false

書き方)

[cpp collapse="true"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

firstline

開始行の数字を変更する。

書き方)

[cpp firstline="100"]
bool hoge(int huga) 
{
     if (huga > 0) {
         hugahuga(huga);
         return true;
     } else {
         return false;
     }
} 
[/cpp] 

表示)

bool hoge(int huga) 
{
     if (huga > 0) {
         hugahuga(huga);
         return true;
     } else {
         return false;
     }
} 

gutter

行番号を表示する。
設定値:true/false

書き方)

[cpp gutter="true"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

書き方)

[cpp gutter="false"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

highlight

指定行をハイライト表示する。

書き方)

[cpp highlight="4"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

light

行番号とツールバーを非表示にする。
設定値:true/false

書き方)

[cpp light="true"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

padlinenumbers

行番号のゼロパディングを設定する。

書き方)

[cpp padlinenumbers="10"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

title

指定した文字列をタイトル表示する。

書き方)

[cpp title="C++実装例"]
bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}
[/cpp]

表示)

bool hoge(int huga)
{
    if (huga > 0) {
        hugahuga(huga);
        return true;
    } else {
        return false;
    }
}

スポンサーリンク