今回は、ちょっとマニアックなプラグインのご紹介です。

 

カスタムの記事を書くときに、ソースコードを記事に書きますが

そのままだと伝わりにくいですよね。

 

よく解説サイトにあるこんなやつ…。

 

SyntaxHighlighter Evolved02

 

これ、そのままコピペできるので、記事を読む側としてとても重宝するんですよね!

今日は、その重宝するソースコード記述に役立つプラグインをご紹介します!

 

このプラグインを使うメリット

このプラグインを使うとこんなメリットがあります。

  • ソースコードをきれいに表示させることが出来る。
  • 読者はコピー&ペーストでソースコードを活用しやすくなる。
  • 何行目なのか詳細を伝えやすい。
  • キレイにまとまり、分かり易くなる。

 

表示方法を変えたり、様々なコードに対応しているので

プログラムとか、Webの作成やカスタム解説サイトだと特に重宝しますね!

 

 

スポンサーリンク

【導入方法】早速インストールをしましょう

今回使うプラグインは【SyntaxHighlighter Evolved】というものです。

このプラグインをインストールにするには

【ダッシュボード】【プラグイン】⇒新規追加で表示される画面の検索ボックスで

SyntaxHighlighter Evolvedと検索すると出てきます。

 

尚、プラグインのインストール方法についてはこちらで解説しています。

機能拡張!簡単なプラグインのインストール方法

 

【SyntaxHighlighter Evolved】プラグインが表示されたら、

【いますぐインストール】と書かれた箇所をクリックしてインストールして下さい。

これだけで、インストールが完了します。

***

尚、ダウンロードしてインストールをする場合は、下記のアドレスからダウンロードできます。

https://wordpress.org/plugins/syntaxhighlighter/

SyntaxHighlighter Evolved01

 

この場合も有効化を忘れずに行って下さい。

利用するための準備はこれで完了です。

 

プラグインの設定方法と使い方

設定画面へアクセスしてみましょう。

【ダッシュボード】⇒【設定】⇒【SyntaxHighlighter Evolved】の順でクリックすると

設定画面が開きます。

 

SyntaxHighlighter Evolved03

下図の様な画面が表示されます。

 

SyntaxHighlighter Evolved04

設定画面が日本語なので、あまり迷う事はないと思いますが

実際にこの設定だとどう表示されるのかが分からなくならない様

便利なプレビュー画面を見る機能がついています。

 

プレビュー機能の使い方

設定を変更する際に、基本的に操作するのは

テーマ(見た目)

一般(各種設定)

行番号の開始(解説するコードが1行目行こうから始まる場合に行数を合わせると親切)

この3つになると思います。

勿論、その他の設定を操作しても問題あはありません。

 

まずは、変更させたい箇所を設定します。

次に、ページ中央にあるSyntaxHighlighter Evolved05ボタンをクリックします。

すると、下図の様に、SyntaxHighlighter Evolved05ボタンの下に実際にどのように表示されるのか

プレビュー画面を見る事が出来ます。

SyntaxHighlighter Evolved06

 

簡単な使い方

使い方はとっても簡単で

ソースコードを、[表記したい言語] と [/表記したい言語]のタグで、”[]”で囲むだけです。

1点注意点として、入力は、テキストとモードで行ってください。

SyntaxHighlighter Evolved07

後は、プラグインが勝手にやってくれるので、他はいじらなくて大丈夫です!

 

使える言語一覧

使える言語一覧です。

[]に入力する時は、右側の方のものを入力すればOKです。

言語名[]に入力時の名前
ActionScript3as3, actionscript3
Bash/shellbash, shell
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

 

 

以上です。

とても簡単に使えるので、コードを表示させる解説ページを作る際に是非ご活用くださいね!