1. TOP
  2. Wordpress
  3. SyntaxHighlighter Evolved の使い方

SyntaxHighlighter Evolved の使い方

おはこんばんちわハクロンです。 Syntax HighlighterとはWebサイト上にそのままソースコードを表示できるようにするプログラムです。
HTMLやCSSはもちろん、PHPやJavaScriptなど、多くの言語の構文強調表示にも対応しています。
このプラグインを利用すると、ソースコードがエディタがのように綺麗に表示できます。
Webサイト上でHTML、CSSやプログラミングのコードを解説する場合にとても便利です。
普通のSyntaxHighlighterの説明もしたいところですが今回はwordpress用に作られたSyntaxHighlighter Evolvedの説明をしたいと思います。

まずは導入方法から

公式サイトは下記になります。 SyntaxHighlighter公式サイトはこちら

左のメニューから「プラグイン」を選び 画像の位置にある「新規追加」をクリックします。


プラグインを追加の画面で右上のキーワード検索で「SyntaxHighlighter Evolved」と入力します。 入力すると画像のように紹介画面になりますので「今すぐインストール」をクリックします。


インストール後「SyntaxHighlighter Evolved」プラグインを「有効化」します。 これで導入は完了です。

次に設定です。



左メニューの「設定」>「SyntaxHighlighter」を選びクリックします。


この画面で細かい使用設定をします。

SyntaxHighlighter Evolvedのバージョン

バージョン2 か バージョン3 を選択します。 バージョン3は、訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピーできます。Flashベースボタンを含むツールバーが不要です。 バージョン2は行 の折り返しが許可されています、この機能は現時点でバージョン3はサポートされません。

テーマ

ソースコードの表示の見た目が変わります。サイトの雰囲気にあわせて変更するといいと思います。

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

ビジュアルエディターで他プラグインを利用する場合などはチェックを入れます。 私はチェック入れてません。

一般

だいたい説明のままですが、わかりにくものだけ補足を書いておきます。

行番号を表示する:
ツールバーを表示する:右上にツールバーがでます。
自動リンクを有効にする:ソースないのURLリンクのことです。
コードボックスの表示を閉じておく:クリックしたら開きます。
軽い表示モードを使う:行番号やツールバーが表示されません。
インデントタブを許容するスマートタブを使う:ソースコード内のタブのことです。
長い行を折り返す(v2.xのみ、横スクロールバーを無効にする):
追加のCSSのclass名(複数可能) :コードボックス内のdivタグにclassを指定しCSSを記入することができます。
行番号の開始
行番号の余白
タブのサイズ
タイトル:コードボックス内の上部タイトル



最後に「変更を保存」をクリックすると変更した設定が反映されます。

スポンサードリンク


使い方

使い方はとても簡単です。 ソースコードの種類ごとにブラシショートコードで囲むだけです。

[言語名] ソース [/言語名] HTMLなら と打ち込むと。
<div class="sub-header">
	<div class="bread">
	<ol>
	    <li><a href="https://kg-update.net"><i class="home"></i><span>TOP</span></a></li>
            <li><a href="https://kg-update.net/category/wordpress/">Wordpress</a>
        <a>SyntaxHighlighter Evolved の使い方</a>
            </li>
	</ol>
	</div>
</div>
となります。

種別 ブラシ
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 ハイライトするコードの言語。
autolinks 自動リンクの有効・無効
classname コードボックスに追加するCSSのclass
collapse コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
firstline 行番号の出力の際に、最初の行の番号を表す数値
gutter 左側に行番号を配置するかどうか
highlight ハイライトする行番号のカンマ区切りのリスト。範囲を指定することもできます。例: 2,5-10,12
htmlscript HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。
light 行番号やツールバーを無効にする軽い表示モードのオン・オフ
padlinenumbers 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
title(v3のみ) (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
toolbar ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
wraplines (v2のみ) 折り返しの有効・無効


数年間愛用してます。絵を見るとき2通りの方法があり、1つは老眼にも効果があるとか・・なので、数年前からは2通りとも試してます。
「Wordpressに関する書籍」を
アマゾンで探す      
    
「webデザインに関する書籍」

スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。