もじれつとがめん

プログラムの忘備録とゲームとかその他色々。

wordpressにソースコードを表示するのに適したプラグインを入れる

前からやりたかった...

良くブログで見かけるソースコードを表示する時に使ってるアレをインストールする

 

当然何を使っているのか分からなかったので調べてwordpressに導入してみた。

どうやらSyntax Highlighterという系統のプラグインの事で今回はその一つをインストールする。

この系統に関する詳しい説明は他サイトで詳しい説明があるため割愛。

 

SyntaxHighlighter Evolved

今回はこのプラグインをインストールして使用する。

 

インストールする手順

  • wordpressの管理画面を開く
  • サイドにあるメニューの "プラグイン"  を選択 => "新規追加" を選択
  • "プラグインを追加"という画面に遷移するので、画面上部の検索窓に "SyntaxHighlighter Evolved" と入力して検索
  • 検索結果画面にある SyntaxHighlighter Evolved の項目の右側の "いますぐインストール" をクリック

自動でインストールが始まるので完了するまで待つ

  • 完了したら下部にある "プラグインを有効化" をクリック

 

 

使い方

記事の編集中にソースとして扱いたい部分を[ソースの言語] [/ソースの言語] で囲むだけ

 

[text]

記事の文章です〜

[[perl]

$test = "この[perl][/perl]]で囲った部分がエディタ風になります";

print $test;

[/perl] [/text]

 

使えるソースの言語は結構ある様子。

ソースコードの種別 []の中に入れる文字
XML xml, xhtml, xslt, html, xhtml
Plain Text plain, text
CSS css
PHP php
JavaScript js, jscript, javascript
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
C++ cpp, c
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
Java java
JavaFX jfx, javafx
Perl perl, pl
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet

設定

初期状態でも直ぐに使えるので必要であれば。

 

  • 設定画面への行き方

サイドのメニューから "設定" => "SyntaxHighlighter Evolved" をクリック

 

  • SyntaxHighlighter Evolvedのバージョン設定

"バージョン2", "バージョン3"どちらかを選択。どうやら使用する際に細部が違うみたい

 

  • テーマの変更

ソースを表示する際のデザインを7種類の中から変更できる

 

  • すべてのブラシを読み込む

基本的にはチェックを外したままで問題ない。

どうやら特殊な条件の時に使うらしい

 

  • 規定の設定の変更

"一般 : 行番号を表示する" => ソースを表示する際に左側に行番号を表示するかどうかの設定

"一般 : ツールバーを表示する" => ソースを表示する際にツールバーを表示するかどうかの設定。バージョン2か3でツールバーの表示が違うので注意

"一般 : 自動リンクを有効にする" => ソースの中のURLにリンクを貼るかどうかの設定

"一般 : コードボックスの表示を閉じておく" => 表示するソースを最初は閉じて置いて、クリックで開け閉めできるようする設定

"一般 : 軽い表示モードをつかう" => 一部の一般設定が表示されないモードにするかどうかの設定

"一般 長い行を折り返す (v2.xのみ、横スクロールバーを無効にする)" => 長い行は折り返し表示にしてスクロールバーを表示しないようにする設定

 

 

他にも"追加のcssのclass名"とかいくつか設定箇所があるみたいだけど現時点ではココまで。

 

 

参考になった記事

http://wordpresscollege.org/plug-in/syntaxhighlighter-evolved/

終わりに

さすがwordpressさん。

プラグインだからすぐに使えるようになったw

このての記事は良く見かけるから改めて記事にする必要ないのかもしれないけどねw