Webサイト上でプログラムのソースコードが綺麗に表示されているページを良く見かけるかと思います。
今回は「SyntaxHighlighterEvolved」というWordPressのプラグインを使ってソースコードをエディタのように表示する方法をご紹介します。
実際にインストールして使ってみましたがやり方は非常にカンタンなのでWebサイト上でプログラミングのコードを解説する機会が多い方は、是非使ってみてください。

SyntaxHighlighter Evolvedのインストール

WordPressの管理画面から、ダッシュボード→プラグイン→新規追加
「SyntaxHighlighter Evolved」をキーワードとして検索するとすぐに表示されます。

今すぐインストールを行って有効化を行います。

ダッシュボード→プラグイン→インストール済みのプラグイン
SyntaxHighlighter Evolvedの設定をクリックします。

設定

デフォルトの内容で特に変更する必要はありません

SyntaxHighlighterのバージョン

・バージョン2.x
オンマウスでツールバーが表示されることと、行の折り返しが可能となります（バージョン3.xでは不可能です）

バージョン3.x
ツールバーは表示されません。また、長い行の場合は横スクロールバーが表示されます。
ソースコードのコピーはドラッグかダブルクリックで選択して行います。

ソースコードの表示スタイル

ソースコードの表示スタイルは８種類から選べます。
実際に表示させてWebページのイメージに合うものを選びましょう。

デフォルト

Django

Eclipse

Emacs

Fade to Grey

Midnight

RDark

使い方

WordPress記事のビジュアルエディタ上で以下のような記述をします。

記述方法

例えばjavaのソースコード「HelloWorld」を表示する場合

記述例

public class HelloWorld{ public static void main(String[] args){ System.out.println("Hello World!!"); }}

表示例

表示対応言語

• 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

まとめ

SyntaxHighlighter Evolvedのプラグインを使用すればWebサイト上に綺麗にソースコードを表示することができます。技術者の方もこれからプログラミングを覚える方も是非覚えて使いこなしてみましょう。

ANAマイルの貯め方

マイルが貯まるクレジットカードだけでは大量のANAマイルは貯まりません。
では、どうすれば貯まるのか？ANAマイルを大量に貯めたい人は読んで下さい。

今すぐ読む