KH-WEBLOG TOP > WEBメモ > WordPress > ソースの整形表示 SyntaxHighlighter Evolved

ソースの整形表示 SyntaxHighlighter Evolved

最終更新日:

使い方

プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
インストール後プラグインを有効化してとりあえず完了。
※細かい設定はプラグインの「設定」からいろいろ変更可能。
※ちなみにこのブログではv2を使用(v3ではツールバーが出なくなってるから)

ソースコードに対して、[言語]~[/言語]とマークアップ。
※[ ]←これは半角

たとえば、
[html] ~ [/html]の場合

<br />
<br />

が↓こんな感じに整形表示

<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
	&lt;title&gt;テスト&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
	&lt;p&gt;本文&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

パラメータ一覧

lang または language ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとしても記述可能。
autolinks 自動リンクの有効・無効
例: [html autolinks=”false”] 
※falseを指定すると自動リンクの解除
classname コードボックスに追加するCSSのclass
例: [html classname=”test”]
collapse コードボックスをデフォルトの状態で閉じるかどうか。
例: [html collapse=”true”] 
※trueを指定すると折り畳んで表示
firstline 行番号の出力の際に、開始する行番号の指定
例: [html firstline=”10″] ← 10から行番号開始
gutter 左側に行番号を配置するかどうか
例: [html gutter=”false”] 
※falseを指定すると行番号を非表示
highlight 行を強調させる(カンマ区切りで複数選択)。
例: [html highlight=”1,10″] 
※範囲でも指定可能→[html highlight=”1-10″]
htmlscript HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効。 
※特定の言語でしか動作しません。
light 行番号やツールバーを無効にする軽い表示モードのオン・オフ
例: [html light=”true”] 
※trueでシンプル表示
padlinenumbers 行番号の余白。false(余白なし), true (自動)、数値(余白)
title (v3のみ) コードの前に表示される表題テキスト。
toolbar ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
例: [html toolbar=”false”] 
※falseでツールバー非表示
wraplines (v2のみ) 折り返しの有効・無効
例: [html wraplines =”false”] 
※falseで折り返し無効

指定できる言語一覧

  • 言語 ——- 指定名
  • ActionScript3 ——- as3, actionscript3
  • Bash/shell ——- bash, shell
  • C# ——- c-sharp, csharp
  • C++ ——- cpp, c
  • CSS ——- css
  • Delphi ——- delphi, pas, pascal
  • Diff ——- diff, patch
  • Groovy ——- groovy
  • JavaScript ——- js, jscript, javascript
  • Java ——- java
  • JavaFX ——- jfx, javafx
  • Perl ——- perl, pl
  • PHP ——- php
  • Plain Text ——- plain, text
  • PowerShell ——- ps, powershell
  • Python ——- py, python
  • Ruby ——- rails, ror, ruby
  • Scala ——- scala
  • SQL ——- sql
  • Visual Basic ——- vb, vbnet
  • XML ——- xml, xhtml, xslt, html, xhtml

デザインカスタマイズ

デザインを変えたいときはCSSである程度変更可能。

CSSの場所は
「wp-content」→「plugins」→「syntaxhighlighter」→「syntaxhighlighter2(※v2を使っているから)」→「styles」フォルダ
の中にあるCSSファイルの中から
使用しているテーマのCSSファイルを編集。
※使用しているテーマが「Default」なら「shThemeDefault.css」というファイルを編集。
(念のため元データのバックアップは忘れずに!)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事