*

WordPressでソースコードを綺麗に表示:SyntaxHighLighterEvolved

公開日: : web(一般)


本ブログはプログラミングに関する技術ブログなので、記事内にソースコードを記述することがかなり多いのですが、普通にソースを記述すると読みづらくなってしまったり、コピーしたときに余分な空白が入ってしまったりとなかなか不便なことがありました。

記事ごとに表示状態を気にしながらソースを書くのはとても手間がかかるので、「SyntaxHighLighterEvolved」というプラグインを利用してソースコードの表示をより見やすく、より記述記述しやすくすることにしました。

とても便利なプラグインなので、導入方法と簡単な利用方法を掲載したいと思います。

 

SyntaxHighLighterEvolvedとは

ソースコードを記事上でエディタで表示した時のように綺麗に整形して表示してくれる便利なプラグインです。記事のソースコードの部分を[]括りのタグで囲むだけで、簡単に利用することが出来ます。

 

WordPressへのインストール

1.管理画面にて「プラグイン」>「新規追加」をクリックします。

2.検索欄に「Syntax HighLighter Evolved」と入力してプラグインを検索します。

3.検索結果に表示された「Syntax HighLighter Evolved」の「いますぐインストール」をクリックします。

以上で完了です。

SyntaxHighLighterEvolvedの使い方

記事の記述の際にソースコードを[***][/***]というタグで括るだけです。

php,javascriptなど大抵の言語には対応しているので、言語ごとに対応するタグを利用します。

注意:

ソースを記述する際は「テキスト」モードで編集します。「ビジュアル」モードで編集するとソースの一部が削除されたり、改変されたりすることがあります。

phpソースの表示

$test = array('aaa', 'bbb', 'ccc');
foreach($test as $key => $value) {
  echo $key . 'の値は' . $value 'です。';
}

 

javascriptソースの表示

var test = 3;
if (test >= 3) {
 alert('testの値は3以上です');
}

 

 

オプションとして指定行をハイライトしたり、行番号の開始番号を変えたりもできるので、色々と試してみましょう。

このブログもこれで少しは読みやすくなったかも。。。

 

ad_right_top

関連記事

blog_logo_small

MediaWiki:GoogleAdsense広告を表示する方法[HTMLets]

mediawikiのコンテンツ部分にAdsense広告を表示する方法です。 コンテンツ部は普通

記事を読む

blog_logo_small

はてなブックマーク数を表示する方法

今回は自分のブログやサイトに、はてなブックマークの被リンク数の画像を表示する方法を紹介します。

記事を読む

blog_logo_small

MediaWikiのCentOSへのセットアップ

MediaWikiをCentOSへインストールしてみたので掲載します。 事前準備 MediaWi

記事を読む

blog_logo_small

Apache:mod_rewriteでURLを正規化

今回はApacheの「 mod_rewrite」を使用してURLの正規化の方法を掲載します。

記事を読む

blog_logo_small

Android Screen Moniter で Android スマホ タブレット を キャプチャー 配信

ビジネスユースでAndroidの画面をキャプチャーしたい、 ニコニコ、youtube、USTR

記事を読む

google以外広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad_right_top

linux-pen
【cron】秒間隔で定期実行する為の設定方法

コマンドを定期実行させたい場合に利用するcronですが、普通に利用する

blog_logo_small
【Apache】 ReverseProxy(リバースプロキシ)を設定してサブディレクトで別サーバーの内容を表示

今回はApacheのリバースプロキシ設定について紹介したいと思います。

blog_logo_small
【Apache】 Aliasを設定してサブディレクトでDocumentRoot以外を参照する

今回はApacheのAlias設定について紹介したいと思います。この方

no image
2015:新年のご挨拶

明けましておめでとうございます。 昨年はたくさんの方々に当ブログ

blog_logo_small
MySQL:外部ホストからのDBアクセス方法

MySQLではデフォルトで外部ホストからのアクセスを許可していないので

→もっと見る

  • アクセスカウンター
PAGE TOP ↑