ZUTTO



WordPressプラグインで枠にソースコードを表示する!SyntaxHighlighter Evolved

WordPressplugin

 

WordPressで窓のようにソースコードを表示するプラグインは?シンタックスハイライト

初心者の私でも、こんなカスタマイズでどうでしょう?…と紹介する時、Webサイト上でHTML、CSSやプログラミングのコードを解説する機会が増えていたのですが、そのまま表示すると、どうにも見た目が悪いと思っていました。
見た目というより、見に来て下さった方が見にくいのでは?…と思いプラグインを探してみました。

その小窓でソースコードを表示するものをどのように検索したらいいのか分からなかったのですが「シンタックスハイライト」と言うようです。

WordPressをはじめて日が浅くHTMLもよく分からないので、とにかく手軽に設置できて手軽に運用したいという私のような方が対象だと思います。

シンタックスハイライト【 SyntaxHighlighter Evolved 】をインストール

プラグインインストースはどんなプラグインでも同じ方法です。

管理画面>ダッシュボード>外観>プラグイン>新規追加> SyntaxHighlighter Evolved検索してインストール>プラグインを有効化

管理画面の設定と使い方

とってもありがたいことに、このプラグインの管理画面は日本語化されて初期設定のままでも利用できます。

管理画面>ダッシュボード>設定> SyntaxHighlighter Evolved

SyntaxHighlighter Evolvedのバージョン3.X
訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピーできます。Flashベースボタンを含むツールバーが不要

テーマ
ソースコードを表示する際のスタイルを7種類のCSSから選択でき、最下部のプレビューで確認がきます。

すべてのブラシを読み込む
ビジュアルエディターで「SyntaxHighlighter」を利用するためのプラグイン「SyntaxHighlighterTinyMCE Button」等を利用する場合はチェック

一般WordPressプラグイン-シンタックスハイライト

  • 行番号を表示する…コードボックス左端に行番号を表示する場合にチェック
  • ツールバーを表示する…ソースコード右上にクレジットマークが表示
  • 自動リンクを有効にする…ソースコード中の「URL」に自動的にリンクを貼る設定
  • コードボックスの表示を閉じておく…コードボックスを収納表示しておき、クリックしてから開く
  • 軽い表示モードを使う…行番号やツールバーが表示されない
  • インデントタブを許容するスマートタブを使う…ソースコード内でタブを使用するか?
  • 長い行を折り返す…長い行は折り返して表示

追加のCSSのclass名(複数可能)
コードボックス内のDivタグに、classを指定したCSSを記入

行番号の開始
ソースコードの行数のはじめる番号

行番号の余白
行番号の余白の設定

タブのサイズ
タブの長さを指定

タイトル
コードボックス上部に表示されるテキスト名を指定

 

Syntax Highlighter Evolvedの使い方

[表記したい言語] [/表記したい言語]のタグで、前後で囲むだけです。

〈 例 〉
#top{
position: absolute;
top: 0;
background-color: #fff;
font-size: 1.3em;
}
テキストでのソースコード
WordPressプラグイン

下記のように表示されるようになります。

 

#top{
position: absolute;
top: 0;
background-color: #fff;
font-size: 1.3em;

 

デザインは設定時に選んでくださいね。

 

表記したい言語ソースコードの種別

多くのソースコードが使用できるので、最適なもの選んでください。

[使用言語]~[/使用言語]

[PHP]~[/PHP]

ソースコードの種別 Brushes
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

ショートコードパラメータ

これらはショートコードで渡すことができるパラメータと説明です。 bool値(有効・無効など)の指定には true/1 または false/0 を渡してください。

lang または language — ハイライトするコードの言語。パラメータ指定だけでなく〔php]code[/php]のように言語をタグとして記述できます。有効なタグのリストは こちらをクリック (“aliases”の下を参照)
autolinks — 自動リンクの有効・無効
classname — コードボックスに追加するCSSのclass
collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline — 行番号の出力の際に、最初の行の番号を表す数値
gutter — 左側に行番号を配置するかどうか
highlight — A comma-separated list of line numbers to highlight. You can also specify a range. Example: 2,5-10,12
htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) — 折り返しの有効・無効 

<SyntaxHighlighter Evolved 設定説明参考> 

もし表示されなかった場合の確認はコレ!

私ははじめ表示されなくてこまったのですが、まずは3つの確認をしてください。

  1. [表記したい言語] [/表記したい言語]の [ ]の中に半角が入り込んでいるとか、ちゃんと入力ができているかどうか?
  2. header.php の </head> の上に <php wp_header();> を記述
  3. footer.php の </body> の上に <php wp_footer();> を記述

これがないと css や javascript ファイルが読み込まれません。

コレ以外は他のプラグインの兼ね合いなどの原因が考えられます。

さて!今までの記事を「SyntaxHighlighter Evolved」を使用して修正します♪

 







サブコンテンツ