西島です。

最近では賢威7のカスタマイズ方法などを、ブログで紹介する事もありますが、ソースコードを書く時に便利なのが【SyntaxHighlighter Evolved】と言うプラグインです。

今回は記事内に綺麗にソースコードが書ける【SyntaxHighlighter Evolved】について紹介します。

【SyntaxHighlighter Evolved】をインストール

ダッシュボードから「プラグイン」→「新規追加」、右上に出てきた検索窓に「SyntaxHighlighter Evolved」と入力→「今すぐインストール」→「有効化」していきます。

SyntaxHighlighterインストール

【SyntaxHighlighter Evolved】各種設定

次に「設定」→「SyntaxHighlighter」から基本設定をおこないます。

SyntaxHighlighter設定変更

バージョン

SyntaxHighlighterバージョン設定

バージョン2.x

・バージョン2.xでは、右上にツールバーが表示され、そこからコピーなどの操作が出来ます。

バージョン2.xツールバーあり

バージョン3.x

・バージョン3.xでは、コードをダブルクリックするこ事で、コードがコピー出来ます。

バージョン3.xツールバーなし

・ダブルクリックでコピー出来ます。

バージョン3.xダブルクリック

nisijimanisijima

僕の場合は、ツールバーが表示された方が、使いやすい印象だったので、バージョン2.xを選びました。

テーマ

8種類のテーマの中から、お好みのテーマを選びましょう。

SyntaxHighlighterテーマの選択

チェック

・テーマを設定し、「変更を保存」をクリックすると、プレビュー画面でテーマの変更がその場で確認できます。

SyntaxHighlighter設定変更

一般

SyntaxHighlighter一般設定

わからなければデフォルトのままでOKですが、「自動リンクを有効にする」は必要ないと思うので、チェックは外したほうがいいでしょう。それとバージョン2.xを使う場合は、ツールバーを表示するにチェックを入れて起きましょう。

nisijimanisijima

その他は、ご自身の好みに合わせて選択して下さい。

使い方

実際の使い方は表示させたいコードに合わせて、ショートコードを記述していきます。今回は例としてcssでの表示方法です。

[code language=”css”] ソースコード [/code]

又は

[css] ソースコード [/css]

で表示出来ます。

注意

・コードを書き込む時は、ビジュアルモードではなく、テキストモードにして利用して下さい。

SyntaxHighlighterテキストモード

そのほか、html,php,javaなど主要な言語意外にも、数多くの言語に対応しています。

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

引用元: WordPress.com

nisijimanisijima

8割がた使った事ありません。

その他パラメーターを組み合わせる事で、ハイライトなど様々な表示方法が出来るので、必要に応じて組み合せて下さい。

まとめ

今回は、記事内にソースコードを綺麗に表示させるプラグイン【SyntaxHighlighter Evolved】の紹介でした。

ソースコードを綺麗に表示させる為には、preタグぐらいしか考え付きませんが【SyntaxHighlighter Evolved】で綺麗にそれっぽく見えるので、コードを表示させてい人は是非参考にして下さい。

それでは、西島でした。^^

気軽にお問い合わせ下さい

  • ネットビジネスは難しそう
  • 何をやればいいかわからない
  • そもそもこの業界が怪しい

などなど、悩み・質問・相談、気軽にお問い合わせ下さい。

お問い合わせはこちら

特典付き無料メールマガジン


現在特典付きで、無料メールマガジン配信中!
いつでも解約出来るので、気軽に登録して下さい。

mail-magazine

↑クリックすると、特典紹介ページに移ります。