ホーム > WordPress, コンピュータ > WordPressのプラグイン SyntaxHighlighterでソースコードを見やすく整形表示

WordPressのプラグイン SyntaxHighlighterでソースコードを見やすく整形表示

2009 年 3 月 8 日

Syntax Highlighter
WordPressへの投稿でプログラムソースコードを表示するときに便利です。
ソースコード部分を認識して整形表示してくれるプラグイン。

Syntax Highlighterというのは元々、Google Codeにも登録されているJava Script。
これを、WordPressから使用できるようプラグイン化したものを使用します。
記事の投稿時のSyntax HighlighterのVersionは2.0

Syntax Highlighterをプラグイン化したものは何種類かありまして
今回、使用するものはWordPress Plugins/JSeries
このサイトではWordPress 用のプラグインの作成、海外のプラグイン用の言語ファイルやそのパッチの配布などを行っているプロジェクトのページ。
ここで配布されている、Syntax Highlighter for WordPress (ソース整形表示)を使用させて頂きます。

ダウンロード

Syntax Highlighter for WordPress ダウンロード先

Syntax Highlighter for WordPress ダウンロード先


WordPressプラグイン Syntax Highlighter for WordPressから
syntax-highlighter-2.0.0.zip Ver.2.0.0をダウンロード。

インストール

インストールは通常のWordPress プラグインと同様で簡単です。

ダウンロードしたsyntax-highlighter-2.0.0.zipを展開

Syntax Highlighter

展開して生成されたフォルダをWordPress プラグインディレクトリにアップロード

syntax highlighter

WordPress管理画面>プラグインからSyntax Highlighter for WordPressを使用するをクリックして有効化

Syntax Highlighter

使用方法

ソースコードの適用の仕方

php のソースコードに適用したいときは、

  • [PHP]~[/PHP]
  • [code='php']~[/code]
~

htmlのソースコードに適用したいときは、

  • [html]~[/html]
  • [code='html']~[/code]
~

どちらでも、この間にソースコードを書いておけば、エントリ表示時に整形して表示されます。

使用できるプログラミング言語

  • bash
  • c
  • cpp
  • csharp
  • diff
  • groovy
  • java
  • javascript
  • delphi
  • pascal
  • php
  • python
  • ruby
  • shell
  • text
  • vb
  • vbnet
  • sql
  • css
  • xml
  • html
  • xhtml
  • xslt

Syntax Highlighter for WordPress のオプション設定

ショートコードオプション

  • num
    行番号の開始番号指定
    例:[code='text' num=10]~[/code]

    行番号の開始番号を10に指定
  • highlight_lines
    ハイライト表示したい行を指定
    例:[code='text' highlight_lines="1,2,3"]~[/code]

    ハイライト表示したい行を指定
  • gutter
    false を指定すると行番号を表示しない
    例:[code='text' gutter=false]~[/code]

     false を指定すると行番号を表示しない
  • ruler
    true を指定するとルーラーを表示する
    例:[code='text' ruler=true]~[/code]

    true を指定するとルーラーを表示する
  • toolbar
    false を指定するとツールバー表示しない
    例:[code='text' toolbar=false]~[/code]

    false を指定するとツールバー表示しない
  • light
    true を指定すると簡易表示になる
    例:[code='text' light=true]~[/code]

     true を指定すると簡易表示になる
  • font_size
    フォントのサイズを指定する
    例:[code='text' font_size="90%"]~[/code]

    フォントのサイズを指定する

関連するエントリー

    None Found

WordPress, コンピュータ , , , , ,