WordPressでページ上にコードをそのまま表示するプラグイン【SyntaxHighlighter Evolved】の使い方

スポンサーリンク

さて、まず何から書こうかと考えてみたのですが、多分これから更新していく記事の至る所で活躍するであろうプラグインの紹介からしようと思います。

それが【SyntaxHighlighter Evolved】。

このプラグインは何かというと、WEBサイトのページ上でHTMLやCSSのコードをコードとしてそのまま表示してくれるプラグインです。

下記のようなコード表示、よく見かけませんか?


<h1>これがコード表示というものか</h1>

<span style="color:#ff000;">これで文字を赤字にできるな</span>

とまぁこんな感じにコードをコードとして表示できるので、こういったWEB制作系のブログでは不可欠なプラグインですね。
では、実際の使い方を紹介したいと思います。

まずはプラグインをインストール

WordPressの「プラグイン」→「新規追加」で「SyntaxHighlighter Evolved」と検索します。
すると一番最初に表示されるので、それをインストールして有効化。

設定します

有効化したら、「設定」→「SyntaxHighlighter」が表示されるようになるので、クリック。
下記の通り設定していきます。

SyntaxHighlighter設定1_20170829

基本的には上記の設定がデフォルトなので、触る必要なし。そのままで使えます。

実際に使ってみる

  • htmlの場合

コード書き方html_20170829

  • 実際の表示
<p style="font-weight:bold;>ここにコードを書きます</p>
  • cssの場合

コード書き方css_20170829

  • 実際の表示
.test{color:#ff0000;}

こんな感じで使います。

他にも細かいパラメータがありますが、あまり使うことは無いと思うので割愛します。
下記のものは覚えていても良いかも。

コードを折りたたみ式にするパラメータ

「collapse」を使います。

コード書き方collapse_20170829

  • 実際の表示

下記の「ソースを表示」をクリックしてみてください。

<h1>折りたたみテスト</h1>
<p>開始タグの後ろに半角スペースを空けて「collapse="true"」をつけます。</p>
<h2>Q:何行から折りたたみが出来るの?</h2>
<p>A:1行からでもできます。折りたたみというよりクリックで表示するイメージです。</p>

以上、【SyntaxHighlighter Evolved】の紹介でした。