(仮)Rocket-Field

いろいろ書けばその内に方向性が見えてくるよね

WordPressプラグイン「SyntaxHighlighter Evolved」で記事の中にソースコードを表示させる

      2014/02/18

PPC_NCsenbannopaneru500

web系のブログを読んでいるとよく使われている下みたいな感じのやつ

<title>こんな感じの</title>

単なる憧れ的なもの(かっこよくないですか?)があったので今回これを導入してみました。

いろいろなやり方があるかとは思いますが、今回はWordPressのプラグイン「SyntaxHighlighter Evolved」を利用した方法でやっていきます。

SyntaxHighlighter Evolvedを使う

インストール方法

WordPressの管理画面から
1.プラグイン>2.新規追加>3.「SyntaxHighlighter Evolved」を検索>4.ダウンロード>5.有効化
これでOKです。

使用方法

SyntaxHighlighter Evolvedの使い方は非常に簡単です。

使用するときはビジュアルモードではなく必ずテキストモードを使います。

[使用する言語]
ソースコード
[/使用する言語]

このように記載します。

例)
[css]
p {
margin: 0 0 1em 0;
padding: 0;
}
[/css]
※[]は半角にします

このように記述した場合以下のようになります。

p {
   margin: 0 0 1em 0;
   padding: 0;
}

こんな感じで簡単にかっこよくなります。

ショートコードパラメータを使う

ショートコードパラメータを使うことでいろいろできます。

設定>SyntaxHighlighterで下の方に説明があるのでチェックして試してみるといいですよ。

いくつか例をあげます。

  1. 行に色を付けて強調する
    [使用する言語 highlight="2,3"]※2,3行を強調

    p {
       margin: 0 0 1em 0;
       padding: 0;
    }
    
  2. 開始する行番号の変更
    [使用する言語 firstline="5"]※5行目から始める
  3. p {
       margin: 0 0 1em 0;
       padding: 0;
    }
    

感想

今さら感が半端ないですが一応やってみました。

使い方は非常に簡単ですし、見栄えもとてもいいと思います。
設定から多少のデザインも変更できますし使い勝手がいいです。
ただ、私がこれを使う機会がそんなにあるのかどうかが問題なだけですね。

もっとWordPressを勉強していきたいと思います。



おすすめ

1
スマホで暇つぶしするならdTVがおすすめ。移動時間も有意義に

暇つぶしといえばスマホ。 最近は、電車での移動時もスマホをいじっている人を多く見 ...

 - WordPress