の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】ソースコードを表示するプラグイン「SyntaxHighlighter Evolved」の使い方

      2015/01/15

WordPressでソースコードなどを表示するのに適したプラグイン「SyntaxHighlighter Evolved」をご紹介します。

導入方法

WordPressのプラグイン管理画面から「SyntaxHighlighter Evolved」と入力して検索。インストール後、有効化します。

使い方

投稿の編集画面の「テキスト」の入力画面を用います。※「ビジュアル」ではなく「テキスト」です。

ソースに合わせた「ショートコード」で括り、その中にソースを記入します。例えばHTMLのソースの場合、次のようなイメージになります。

入力画面

source

表示結果

source-view

オプション

オプションには

  • バージョン
  • テーマ
  • 一般

などがあります

特に「バージョン」は2と3で機能が異なるので注意が必要です。

ソースのコピーは、ver2だとコピーボタンなどが表示されますが、ver3だとダブルクリックでクリップボードでコピーされます。

また長い行を折り返して表示できるのはver2のみの機能です。

ソースを使って貰うことを考えている場合は、そのあたりの使い勝手を考慮したほうがいいかもしれません。

個人的には明確にソースをコピーできるほうが、便利かと思いあえてversion2を使っています。

まとめ

WordPressでソースコードを公開することが多い人は導入してみてはいかがでしょうか。

参考:【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

 - WordPress , ,

336-280

  関連記事

【WordPress】テーマ「stinger3」をスマホで表示したときに画面上部に広告を表示する方法

WordPressのテーマ「stinger3」をスマホなどのモバイル端末で表示し …

【WordPress】テーマ「stinger3」の関連記事表示件数を変更する方法

WordPressのテーマ「stinger3」では、記事の最後に関連記事を10件 …

【WordPress】テーマをStinger5にしました

右メニューの2カラム構成が好きなので、Stinger3を使ってきました。 その進 …

ベスト20
【WP】プラグイン「WordPress Popular Posts」で、カテゴリーの人気記事を表示する方法

WordPressの定番プラグイン「WordPress Popular Post …

【WordPress】テーマ「Stinger5」のファビコンを設定する方法

WordPressテーマ「Stinger5」におけるファビコンの設定方法を紹介し …