guram journal

Icon

Just another WordPress weblog

4月 13, 2009

[WordPress]SyntaxHighlighter

ブログ記事にコードを記載するため「SyntaxHighlighter」の改造版(?)の「SyntaxHighlighter Evolved(ver.2.0.0)」というプラグインをインストールした．ActionScriptに対応していないなかったので，SyntaxHighlighterのインストールから対応させるまでのメモ．



おおまかな手順

  • 「SyntaxHighlighter Evolved」プラグインのインストール
  • ActionScriptへの対応
    • AS3用の拡張ファイルのダウンロード
    • ファイルのアップロード
    • 拡張ファイルのための設定

「SyntaxHighlighter Evolved」プラグインのインストール

まず，ブログにコードを表示させるため，「SyntaxHighlighter Evolved」プラグインをインストール．インストール方法は，Wordpressでは，管理画面の左側メニュー「プラグイン」の「新規追加」で「SyntaxHighlighter 」で検索．得られたリストから選択して「いますぐインストール」というボタンを押すとインストールされる．

ActionScriptへの対応

拡張ファイルのダウンロード
SyntaxHighlighterは，ActionScriptには標準では対応していない．ある言語のコードの中のキーワード（syntax）をハイライト表示させるためには，簡単に言うと，どの語句がキーワードなのかを定義してある辞書のようなものが必要となる．つまり，対応していないというのは，標準でインストールした場合には，ActionScript用の辞書がないということ．SyntaxHighlighterでは，この辞書は分けて作られているので，誰でも追加できるようになっている．必要そうなのは大抵誰かがすぐに作る．as3用のハイライト用の拡張ファイルを公開してくれている人もやはりいて，以下のURLからダウンロードできる．

AS3 Syntax Highlighting (with SyntaxHighlighter)

上記の記事の中の「2.Download my AS3 extension.」というところをクリックするとダウンロードできる．圧縮されたファイルを解凍すると，「shBrushAS3」というフォルダの中に，「scripts」と「styles」という2つのフォルダがあり，それぞれのフォルダに各1つファイルが入っている．ちなみに，SyntaxHighlighterでは，このsyntax ファイルのことをbrushsと呼んでいるとのこと．

必要な作業は，大まかに以下の2つ．
  1. ダウンロードしたファイルのアップロード
  2. アップロードしたファイルを使えるようにするための設定

ファイルのアップロード

まず，ダウンロードしたファイルのアップロード．
アップロードする先は，wordpressをインストールしたフォルダの「wp-content」に「plugins」というフォルダがあり，その中に「syntaxhighlighter」というフォルダがあるはずなので，ダウンロードした２つのファイル(shBrushAS3.jsと shThemeFlexBuilder.css)を，以下の通りそれぞれ該当するフォルダに転送する．

・shBrushAS3.js

→　 syntaxhighlighter/syntaxhighlighter/scripts

・shThemeFlexBuilder.css

→　 syntaxhighlighter/syntaxhighlighter/styles

拡張ファイルのための設定

syntaxhighlighter.phpの編集

次に，追加したファイルを使えるようにするためには「syntaxhighlighter.php」を編集する必要がある．サーバーにアップロードしたファイルを編集しても良いけど，wordpressの管理画面からも編集できる．wordpress上で編集するには，管理画面の 左のメニューから「プラグイン」の中の「インストール済み」をクリックして表示されたリストから，「SyntaxHighlighter Evolved」の右側に「編集」という文字があるのでクリックする．すると編集画面が表示される．もし，直接編集しにくかったら，DreamWeaverなどの普段使っているエディタにコピペして編集するとよいかもいれない．この時に念のため編集前のオリジナル版が保存しておいた方が良いと思う．
  1. brush scriptsの登録
  2. スタイルシートの登録
  3. テーマリスト
  4. エイリアス名と実際のブラッシュへの対応付けのためのリスト

brush scripts(shBrushAS3.js)の登録

以下の1行を追加する．
wp_register_script( 'syntaxhighlighter-brush-as',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushAS3.js'),        array('syntaxhighlighter-core'), $this->agshver );

追加後は以下の通り


// Register brush scripts
<pre> wp_register_script( 'syntaxhighlighter-core',             plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shCore.js'),            array(),                         $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-bash',       plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushBash.js'),       array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-csharp',     plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushCSharp.js'),     array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-cpp',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushCpp.js'),        array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-css',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushCss.js'),        array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-delphi',     plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushDelphi.js'),     array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-diff',       plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushDiff.js'),       array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-groovy',     plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushGroovy.js'),     array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-jscript',    plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushJScript.js'),    array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-java',       plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushJava.js'),       array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-perl',       plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushPerl.js'),       array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-php',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushPhp.js'),        array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-plain',      plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushPlain.js'),      array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-python',     plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushPython.js'),     array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-ruby',       plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushRuby.js'),       array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-scala',      plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushScala.js'),      array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-sql',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushSql.js'),        array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-vb',         plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushVb.js'),         array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-xml',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushXml.js'),        array('syntaxhighlighter-core'), $this->agshver );
 wp_register_script( 'syntaxhighlighter-brush-as',        plugins_url('/syntaxhighlighter/syntaxhighlighter/scripts/shBrushAS3.js'),        array('syntaxhighlighter-core'), $this->agshver );


テーマスタイルシートの登録

以下の1行を追加．

wp_register_style(  'syntaxhighlighter-theme-flexbuilder',      plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeFlexBuilder.css'),      array('syntaxhighlighter-core'), $this->agshver );


追加後は以下の通り．cssファイルとの対応付け．

// Register theme stylesheets
 wp_register_style(  'syntaxhighlighter-core',             plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shCore.css'),            array(),                         $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-default',    plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeDefault.css'),    array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-django',     plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeDjango.css'),     array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-emacs',      plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeEmacs.css'),      array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-fadetogrey', plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeFadeToGrey.css'), array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-midnight',   plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeMidnight.css'),   array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-rdark',      plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeRDark.css'),      array('syntaxhighlighter-core'), $this->agshver );
 wp_register_style(  'syntaxhighlighter-theme-flexbuilder',      plugins_url('/syntaxhighlighter/syntaxhighlighter/styles/shThemeFlexBuilder.css'),      array('syntaxhighlighter-core'), $this->agshver );


ブラッシュへのエイリアス名の登録

// Create list of brush aliases and map them to their real brushes
$this->brushes = apply_filters( 'syntaxhighlighter_brushes', array(
'bash'       => 'bash',
'shell'      => 'bash',
'c-sharp'    => 'csharp',
'csharp'     => 'csharp',
'cpp'        => 'cpp',
'c'          => 'cpp',
'css'        => 'css',
'delphi'     => 'delphi',
'pas'        => 'delphi',
'pascal'     => 'delphi',
'diff'       => 'diff',
'patch'      => 'diff',
'groovy'     => 'groovy',
'js'         => 'jscript',
'jscript'    => 'jscript',
'javascript' => 'jscript',
'java'       => 'java',
'perl'       => 'perl',
'pl'         => 'perl',
'php'        => 'php',
'plain'      => 'plain',
'text'       => 'plain',
'py'         => 'python',
'python'     => 'python',
'rails'      => 'ruby',
'ror'        => 'ruby',
'ruby'       => 'ruby',
'scala'      => 'scala',
'sql'        => 'sql',
'vb'         => 'vb',
'vbnet'      => 'vb',
'xml'        => 'xml',
'xhtml'      => 'xml',
'xslt'       => 'xml',
'html'       => 'xml',
'xhtml'      => 'xml',
'as'      => 'as', // ←この1行を追加．
) );


テーマリストの登録

次に，テーマリストに関する設定にもflexbuilderを登録するため以下のように変更．（130行目あたり）
// Create list of themes and their human readable names
// Plugins can add to this list as long as they also register a style with the handle "syntaxhighlighter-theme-THEMENAMEHERE"
$this->themes = apply_filters( 'syntaxhighlighter_themes', array(
'default'    => __( 'Default',      'syntaxhighlighter' ),
'django'     => __( 'Django',       'syntaxhighlighter' ),
'emacs'      => __( 'Emacs',        'syntaxhighlighter' ),
'fadetogrey' => __( 'Fade to Grey', 'syntaxhighlighter' ),
'midnight'   => __( 'Midnight',     'syntaxhighlighter' ),
'rdark'      => __( 'RDark',        'syntaxhighlighter' ),
'flexbuilder'      => __( 'FlexBuilder',        'syntaxhighlighter' ),
'none'       => __( '[None]',       'syntaxhighlighter' ),
) );


編集が終わったら，エディタからコピペで戻して，画面の下にある「ファイルの更新」を押して終わり．

使い方は，タグで囲むだけ．きちんと適用された
[as]〜[/as]



以下は，SyntaxHighlighterが対応する言語の一覧と，利用する際のエイリアス名およびファイル名．


Brush name Brush aliases File name
Bash/shell bash, shell shBrushBash.js
C# c-sharp,?csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

Category: MEMO

Tagged: ,

2 Responses

  1. Wordpres より:
    2009/04/26 10:29 PM

    [...]

  2. wp-popular.com » Blog Archive » [WordPress]SyntaxHighlighter – guram journal より:
    2010/05/28 7:13 PM

    [...] Follow this link: [WordPress]SyntaxHighlighter – guram journal [...]

Leave a Reply

カテゴリー

 

2010年9月
日 月 火 水 木 金 土
« 5月    
 1234
567891011
12131415161718
19202122232425
2627282930