プラグイン名 SyntaxHighlighter Evolved
記事にソースコードを表示できるようにする、技術系のサイトを作る人向けのプラグインです。
インストール手順
プラグイン > 新規追加 > SyntaxHighlighter Evolved > プラグインを検索 > いますぐインストール > プラグインを有効化
設定
設定 > SyntaxHighlighter
- SyntaxHighlighterのバージョン
version 2と3がありますが、2のほうがいいような気がします。 - テーマ
見た目が変わります。 - 一般
ここは触ってみて違いを確かめてください。 - 追加のCSSのclass名(複数可能)
classを追加できます。
ここの設定はすべて好みの問題なので、そしてこのプラグインを使おうと思っている人にはおそらく説明はいらないですね。
ショートコードの使い方
[表記したい言語] ソースコード [/表記したい言語]、これを記事の中に記入します。特定の行だけをハイライト表示するには、(例)2行目、10~12行目、15行目をハイライトするには 、 [表記したい言語 highlight=”2,10-12,15″ ]のように記述します。
phpの場合↓(phpを大文字にしています。)
[PHP highlight="2,10-12,15"]
ソースコード
[/PHP]
cssの場合↓(cssを大文字にしています。)
[CSS]
ソースコード
[/CSS]
よく使うのは↓の4つ
- css
- xhtml
- php
- js
境目が分かるように大枠(border)を(テーマ:Default)
- plugins/syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.cssを編集します。
12345678.syntaxhighlighter{background-color: #FFF !important;padding: 5px !important;margin-top: 15px !important;margin-bottom: 15px !important;border: 5px solid #999 !important;}
編集するのはshCore.cssでもOKです。あと必ず!important;を付けてください。
このプラグインと同じ機能を持つ、Crayon Syntax Highlighterと比較してみてはいかがでしょうか。
コメントを残す