「SyntaxHighlighter Evolved」の使い方 – 覚書き

記事中にPHPやHTMLのコードを表示したい時に使えるWordPressプラグイン『SyntaxHighlighter Evolved』の使い方について。ほぼ自分用メモ。

基本的な使い方

基本的な使い方は、表示したいコードを [ 言語名 ] のタグで挟めばいいだけ。

たとえばCSSを表示したい時は

と書くと次のように表示される。

.panel-grid-cell .so-panel:before {
  content: '';
  display: block;
}

プレーンテキスト(plain text)の場合は言語名の部分は text でOK。

表示デザイン

記事中での表示デザインには種類が用意されているので、プラグインの設定画面から設定可能。
デザイン例は以下の通り。


画像出典 http://wordpresscollege.org

v2とv3の違いについて

v2 だとコードの折り返し設定が可能。v3では不可。

v3 だとショートコードにパラメータで「title」が使え、コード前に表題タイトルを表示可能。v2では不可。

(表示が軽い)行番号なし表示のパラメータ

light="true"

▼記述例

▼表示例

.panel-grid-cell .so-panel:before {
  content: '';
  display: block;
}

初心者向けの記事では行番号がない表示の方がそのまま選択してコピーできるからこの方が良いかも。

その他のショートコードで渡せるパラメータ

リンク 【WordPress】綺麗にソースコードを表示する SyntaxHighlighter Evolvedの使い方 | WordPress College


おわり

シェアする

RSS/Feed

この記事と同じカテゴリーの記事一覧はこちら→ ブログの話


トップへ戻る