vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[WordPress] ソースコードを綺麗に表示!SyntaxHighlighter Evolvedプラグイン導入

      2015/10/11

LINEで送る
Pocket

wp-SyntaxHighlighter Evolved
こんにちは、okutani(@okutani_t)です。WordPressにソースコードを貼り付けるとき、みなさんはどのようにしているでしょうか。

WordPressプラグイン「SyntaxHighlighter Evolved」を使うと、ソースコードの表示を綺麗に整えてくれるのでオススメです。

また、言語毎にシンタックスハイライトもしてくれるので、プログラミング系の記事を多く書く人はぜひ導入しておきたいプラグインですね。

では、さっそくSyntaxHighlighter Evolvedをインストールしていきましょう。

スポンサーリンク

SyntaxHighlighter Evolvedの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。

wp-syntax-highlighter-evolved

インストールが完了したら「プラグインを有効化」をクリックしましょう。

wp-syntax-highlighter-evolved2

これでSyntaxHighlighter Evolvedの導入が完了しました。

SyntaxHighlighter Evolvedの設定

では設定を行っていきましょう。
ダッシュボードから「設定」→「SyntaxHighlighter」を選択します。

wp-syntax-highlighter-evolved3

設定画面が開きました。設定画面は日本語で記述してあるのでわかりやすいですね。

バージョンとテーマの選択

まずはSyntaxHighlighterのバージョンを選択します。

今回は「コピー時に行番号がコピーされない」「ダブルクリックでコード全選択が行える」といった特徴がある「バージョン3.x」を選択しました。

「バージョン2.x」だと見た目が少し違うのと、ツールバー等が表示できるようになります。

一緒にテーマも選択しておきましょう。

wp-syntax-highlighter-evolved4

ちなみにテーマの見た目はDefaultだと

wp-syntax-highlighter-evolved5

Emacsは

wp-syntax-highlighter-evolved6

Eclipseなんかはこんな感じでした。

wp-syntax-highlighter-evolved7

お好みでテーマを選択しましょう。

ツールバー表示について

大体の項目は読めばわかるのですが、いくつかわかりにくい項目があるのでそちらを説明します。
「ツールバーを表示する」の項目は下記の通りです。

  • バージョン3.x
  • コードの右上にSyntaxHighlighterのクレジットリンク表示

  • バージョン2.x
  • マウスホバー時にコード右上にツールバー表示

wp-syntax-highlighter-evolved9

バージョン2を使うのであればチェックを入れて置いたほうが良いと思います。

自動リンク・軽い表示モード

次の項目の「自動リンクを有効にする」は、コード内にあるURLリンクが選択できるようになります。基本的にチェックしない方がいいです。

「軽い表示モードを使う」は、行番号やツールバーが表示されなくなります。このチェックもいりません。

設定が終わったら次の項目をみていきましょう。

CSS・タイトル

wp-syntax-highlighter-evolved10

ここでもわかりにくい項目を説明していきます。
「追加のCSSのClass名」は、コードを囲うdivに任意のclass名をつけることができます。これで任意のclassを付けてcssを使ったスタイルを記述することができますね。

「タイトル」はソースコードの上にタイトルをつけることができます。試しに「java code」と入力して保存すると、下記のようにコード上部にタイトルが付きました。

wp-syntax-highlighter-evolved11

また、タイトルは「ショートコードパラメータ」という個別のオプションをつけることでコード毎にも付けることができるので、お好みで設定しましょう。

これで基本的な設定は終わりです。「変更を保存」を忘れずにクリックしましょう。

利用方法

利用方法は簡単です。

[言語の名前]
ソースコード
[/言語の名前]

のように記述することで利用できます。

では記事の投稿画面を開いて、「テキスト」タブをクリックして記述していきましょう。

ちなみにビジュアルモードだと利用できないので注意が必要です。

wp-syntax-highlighter-evolved12

今回はjavaのコードを表示してみました。他にもhtml,css,php等々の言語が対応しています。

参考Posting Source Code — Support — WordPress.com

    対応言語

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

かなりたくさんの言語に対応していますね。

ショートコードパラメータを使ってみる

ショートコードパラメータを利用すると、任意の行の行番号を変更したり、行をハイライトすることができます。

ショートコードの一覧は設定画面の一番下にあるので参考にしてみてください。

先頭の行番号を変更「firstline」

では先頭の行番号を変える「firstline」を使ってみます。

[言語の名前 firstline="100"]
ソースコード
[/言語の名前]

wp-syntax-highlighter-evolved13

先頭の行番号が100から始まるようになりました。参考するコードの場所を指定するとき利用できそうですね。

行をハイライト「highlight」

行をハイライトする「highlight」は次のように使います。

[言語の名前 highlight="1-3,5"]
ソースコード
[/言語の名前]

wp-syntax-highlighter-evolved14

ハイフン( – )で範囲指定、カンマ( , )でハイライト箇所を増やせます。

タイトルを付ける「title」

コード上にタイトルを付ける「title」を使ってみます。ちなみにバージョン2.xではタイトルはつけることができません。

[言語の名前 title="javaソースコード"]
ソースコード
[/言語の名前]

wp-syntax-highlighter-evolved15

一般設定で入力したタイトルは上書きされます。

ショートコードパラメータは複数つけることができるので、いろいろと好きなように設置してみてください。

基本的な使い方は以上です。参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
結構いじれる箇所があってうれしいですね。後はCSSでレイアウトを変えて見やすくすると良いと思います(`・ω・´)

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[WordPress]『Better Delete Revision』で不要なリビジョンを削除しよう

こんにちは、okutani(@okutani_t)です。WordPressで記事 …

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

こんにちは、okutani(@okutani_t)です。WordPressで画像 …

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

もくじを自動で作成。WordPressプラグイン「Table of Contents Plus」導入&初期設定

こんにちは、okutani(@okutani_t)です。当ブログvdeepはWo …

WordPressのサイトマップを「PS Auto Sitemap」で作成してみよう

こんにちは、okutani(@okutani_t)です。サイトマップとは、サイト …

All in One SEO PackのXML Sitemapで最低限行うべき設定項目

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

[WordPress]お問い合わせフォームを「Contact Form 7」で作成する

こんにちは、okutani(@okutani_t)です。サイトを運営していて必要 …

SEO対策に!PubSubHubbubを使ってGoogleに素早くインデックス

こんにちは、okutani(@okutani_t)です。WordPressプラグ …

WordPress Popular Postsで人気記事一覧を設置&CSS装飾

こんにちは、okutani(@okutani_t)です。 ブログのサイドバーに「 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。