WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法

  • 2013/09/27
  • 2013/09/23
  • HowTo
LINEで送る
Pocket

よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、

<body>
  <div id="SyntaxHighlighter">
    <a href="#">これ、よう見るけどみんなどうやって書いてんにゃろ。どうやって使うん?</a>
  </div>
</body>

こんな風にキレイに書いてるのをよく見かけません?見ますよね?最近までこういう記事書かなかったので『これ、よう見るけどみんなどうやって書いてんにゃろ。どうやって使うん?』って思ってたんですが、記事にする事もないし、ま、いっか。と『?』を『?』のままで終わらせてたんですね。
でも最近、このブログでこれが必要となってきたので、今回はこの『?』について。

これは “SyntaxHighlighter” というライブラリを使って書いてるのですが、WordPress用には “SyntaxHighlighter Evolved” というプラグインがあるんですね。
今回はその “SyntaxHighlighter” をWordPressで使う方法、要するに “SyntaxHighlighter Evolved” の使い方、導入方法を簡単に紹介します。


2103/9/22現在
“SyntaxHighlighter Evolved” のバージョンは 3.7.1
“WordPress”のバージョンは 3.6.1
です。

導入方法は思っているよりも簡単です。
まずはWordPressにログインして、左のメニューバー/プラグイン/新規追加 等から、
“プラグインのインストール” の画面に行ってください。
で、検索欄に “SyntaxHighlighter Evolved” を入力して検索。
SyntaxHighlighter1のgifアニメ

するとこの画面にくるので、
SyntaxHighlighterの画像
“いますぐインストール” をクリックして “使用する” をクリックしたらとりあえず導入は完了です。

で使い方。これまた至って簡単。

ソースコードの前後に
[html]ここソースコード[/html]
[css]ここソースコード[/css]
こんな感じでいれるだけです。

htmlなら、

[html]
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Wordpressで “SyntaxHighlighter” を使う方法これ、よう見るけどみんなどうやって書いてんにゃろ。どうやって使うん?  </div>
</body>
[/html]

※このままコピペしても使えません!

こんな感じ。
cssなら、

[css]
#SyntaxHighlighter{
 color:red;
 font-size:24px;
 border:1px solid #ABC;
}
[/css]

※このままコピペしても使えません!

こんな感じ。

ちなみに注意書きにも書いてますが、今回このソースはコピペできません。
この[]←半角でないと使用できないんですね。
上のデモの記載は、半角で書いちゃうとキレイに “SyntaxHighlighter” が有効になって表示されてしまって中身が見れなくなるので、全角の[]、また<>を使って書いてます。
ですので、コピペではなく、自分で[]の中にhtmlなり、cssなりを入れて記述&プレビューしてみてください。

ちなみに、上記のデモ記載を全角[]ではなく、半角[]を使って書くと、

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wordpressで "SyntaxHighlighter" を使う方法</title>
 
</head>
<body>
  <div id="SyntaxHighlighter">
    <a href="#">これ、よう見るけどみんなどうやって書いてんにゃろ。どうやって使うん?</a>
  </div>
</body>

こんな感じ。
cssなら

#SyntaxHighlighter{
 color:red;
 font-size:24px;
 border:1px solid #ABC;
}

こんな感じ。

あと一つ気になる点があったので、それを変更して今は使ってます。
これ、設定次第で、backgroundの色を変えられたり、希望する行をハイライトにしたりできるのですが、枠の設定がないんですよね。デフォルトでは。
なので、ここで今表示されてるように、枠が表示される方法も書いておきます。

これまた簡単なので、是非やってみてください。

設定画面の、”追加のCSSのclass名(複数可能)” 部分に、クラス名をつけます。
SyntaxHighlighter3のgifアニメ
ABCでもなんでもOKです。それを記述したら、
左のメニューバー/外観/テーマ編集に行けば、最初に style.css の画面が表示されると思いますので、そこに自分のわかるように、

#ABC{
  border:1px solid #aaa;
  padding:5px 0;
}

こんな感じに設定すれば、こんな感じに表示されるようになります。

どうです?簡単だったでしょ?
ってことで、導入をお考えの方、是非チャレンジしてみてください!



関連記事

URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


『WinSCP』をMacで使えるようにする方法!!


FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…

記事を読む▷


wordmork.itの画像3

wordmark.it でフォントを選ぶ方法


フォント選びって結構大変ですよね。使用するフォントによって、そのサイトなりデザインの印象が変わってくるので、色選びもそう…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


アイキャッチ_はてぶ

はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法!


ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更…

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


サーバー移転の手順 その2:データベースの移行(phpMyAdminを使って)


前回サーバ移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)からの続きです! って…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


Message

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

参考にさせていただいてるサイト

PAGE TOP