WordPressにSyntaxHighlighterを導入しよう


投稿日:2011年11月16日
  • 0
  • 1



タグを見やすくカラフルに彩り、
専用エディターのように自動で色を付けたい

そんな要望にバッチリ答えてくれるプラグイン「SyntaxHighlighter」ちゃんとWordPressように用意されています。


導入方法

1.WordPressにログインして管理画面で「プラグインタブ」を選択
2.プラグイン検索窓で「SyntaxHighlighter」と入力し、検索。


3.「SyntaxHighlighter Evolved」の「いますぐインストール」をクリックしてインストール。

インストールが完了しました。と表示されたら「有効化」をクリックしてプラグインを使用できる状態にする。


4.「プラグインタブ」を開き、「SyntaxHighlighter Evolved」の設定をクリック


5.下にある「プレビュー」を参照しながら表示をカスタマイズする。

以上で導入は完了だ。


カスタマイズ

デフォルトの表示がビビットすぎるので調節する。
デフォルトで幾つかパターンが用意されているが、雰囲気と合わないためサイトに合わせて多少カスタマイズする。
CSSファイルは「ルートディレクトリ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」こちらにある。

(修正したファイルをバックアップしておかないと、「SyntaxHighlighter」がバージョンアップすると修正したCSSがなくなってしまうので注意。)

具体的な修正点は
shCore.css」58行目「.syntaxhighlighter」の「width: 100% !important;」をコメントアウトして「padding: 20px 10px;」「border: solid 1px #ccc;
を追加。

.syntaxhighlighter {
/*width: 100% !important; */
padding: 20px 10px;
border: solid 1px #ccc;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
overflow-y: hidden !important;
font-size: 1em !important;
}

とする。

さらに108行目「.syntaxhighlighter table td.gutter .line」でマージンを調整

.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 0.3em 0.5em 0.3em 1em !important;
}

とする。

さらに112行目「.syntaxhighlighter table td.code .line」も同じようにマージンを調整。

.syntaxhighlighter table td.code .line {
padding: 0.3em 1em !important;
}

とする。

更に色味が微妙だったので全体的に落ち着いたトーンに変更。

例えば「shThemeDefault.css」38行目色を緑からグレーに変更。

.syntaxhighlighter .gutter {
color: #ccc !important;
}

とする。


記述方法

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

これらはショートコードで渡すことができるパラメータと説明です。 bool値(有効・無効など)の指定には true/1 または false/0 を渡してください。

  • lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]

    のように言語をタグとして記述できます。有効なタグのリストはこちらをクリック (“aliases”の下を参照)

  • autolinks — 自動リンクの有効・無効
  • classname — コードボックスに追加するCSSのclass
  • collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
  • firstline — 行番号の出力の際に、最初の行の番号を表す数値
  • gutter — 左側に行番号を配置するかどうか
  • highlight — ハイライトさせる行番号のリスト(カンマ区切り)、範囲でも指定可能。例: 2,5-10,12
  • htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
  • light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
  • padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
  • title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
  • toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
  • wraplines (v2のみ) — 折り返しの有効・無効

と、たくさんの機能が用意されているが、

[php]ここにコードを入れます[/php]

と書けばちゃんと変換される。

「CSS」の場合は

[css]ここにコードを入れます[/css]

といった具合に言語によってタグを変えるだけで問題なく動作する。

詳しい記述法の解説も書きました。



現在のページを共有する



現在のページに関連する記事

WordPressにSyntaxHighlighterを導入しよう SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法
SyntaxHighlighterの記述方法 SyntaxHighlighterの記述方法
WordPressで表(テーブル)を簡単に追加したい WordPressで表(テーブル)を簡単に追加したい
WordPressの整形済みテキストがはみ出す WordPressの整形済みテキストがはみ出す
HTMLやPHPのタグをWordPressで表示する方法 HTMLやPHPのタグをWordPressで表示する方法
ロリポップで404.htmlを変える ロリポップで404.htmlを変える
WordPressにSyntaxHighlighterを導入しよう これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

おすすめの記事

初めてでも理解できるようになる「Firefox機能拡張の開発」

初めてでも理解できるようになる「Firefox機能拡張の開発」

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

標準のアンインストーラーで消えないソフトを徹底的に削除する方法

標準のアンインストーラーで消えないソフトを徹底的に削除する…

Norikraの使い方をサンプルのクエリとイベントを交えて解説

Norikraの使い方をサンプルのクエリとイベントを交えて解説

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック


いただいたコメントなど

  1. ピンバック: HTMLタグをWordPressに表示させる方法 | WEB初心者の為のHTML+CSS+WordPress

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。