WordPressで “SyntaxHighlighter” を使って、ソースコードをキレイに書く方法
- 2013/09/23
- HowTo
よくwebデザイナーさんやクリエイターさん、プログラマーさんたちの書いてるwebサイトを見たら、ソースコードを、
<body>
<div id="SyntaxHighlighter">
<a href="#">これ、よく見るけどみんなどうやって書いてんにゃろ。どうやって使うの？</a>
</div>
</body>
こんな風にキレイに書いてるのをよく見かけません？見ますよね？最近までこういう記事書かなかったので『これ、よく見るけどみんなどうやって書いてんにゃろ。どうやって使うの？』って思ってたんですが、記事にする事もないし、ま、いっか。と『？』を『？』のままで終わらせてたんですね。
でも最近、このブログでこれが必要となってきたので、今回はこの『？』について。
これは “SyntaxHighlighter” というライブラリを使って書いてるのですが、WordPress用には “SyntaxHighlighter Evolved” というプラグインがあるんですね。
今回はその “SyntaxHighlighter” をWordPressで使う方法、要するに “SyntaxHighlighter Evolved” の使い方、導入方法を簡単に紹介します。
2013/9/22現在
“SyntaxHighlighter Evolved” のバージョンは 3.7.1
“WordPress”のバージョンは 3.6.1
です。
導入方法は思っているよりも簡単です。
まずはWordPressにログインして、左のメニューバー/プラグイン/新規追加 等から、
“プラグインのインストール” の画面に行ってください。
で、検索欄に “SyntaxHighlighter Evolved” を入力して検索。
するとこの画面にくるので、
“いますぐインストール” をクリックして “使用する” をクリックしたらとりあえず導入は完了です。
で使い方。これまた至って簡単。
ソースコードの前後に
［html］ここソースコード［/html］
［css］ここソースコード［/css］
こんな感じでいれるだけです。
htmlなら、
＜html＞
＜head＞
＜meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″＞
＜title＞Wordpressで “SyntaxHighlighter” を使う方法これ、よう見るけどみんなどうやって書いてんにゃろ。どうやって使うん？ ＜/div＞
＜/body＞
［/html］
※このままコピペしても使えません！
こんな感じ。
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名(複数可能)” 部分に、クラス名をつけます。
ABCでもなんでもOKです。それを記述したら、
左のメニューバー/外観/テーマ編集に行けば、最初に style.css の画面が表示されると思いますので、そこに自分のわかるように、
#ABC{
border:1px solid #aaa;
padding:5px 0;
}
こんな感じに設定すれば、こんな感じに表示されるようになります。
どうです？簡単だったでしょ？
ってことで、導入をお考えの方、是非チャレンジしてみてください！
Google AdS
- ◀PREV
前の記事
- wordmark.it でフォントを選ぶ方法
- NEXT▶
次の記事 - CSSスプライトで、スムーズに画像を切り替える
関連記事
-
WordPressのテスト(ステージング)環境を簡単に作る方法・注意点：XSERVER + All in On WP Migration
今まで企業サイトの管理等では、最初から環境が整っているところばかりだったので、開発・テスト・ステージング環境はあまり深く…
-
Youtube動画がWordPressで思い通りに表示されない原因と解決方法！レスポンシブ・URLをそのまま表示・横並び配置等
WordPress（ワードプレス）の投稿にYoutubeの動画を表示させたい時、URLをそのまま貼るだけで自動でこんな感…
-
無料版『ChatGPT・Copilot・Gemini』比較！使い倒してわかった違い・リミット回数・注意点・使い方のコツ
2024/11 更新「Copilotの回数制限がなくなってました！」 WordPress（ワードプレス）でオリ…
-
『reCAPTCHA v3』を問い合わせページのみ＆左側に表示させる方法：その２
前回書いた『reCAPTCHA v3』を問い合わせページのみ＆左側に表示させる方法：その１の続きです！ 今…
-
『reCAPTCHA v3』を2ページ以上表示させる時の方法（問い合わせ+α・固定ページ・投稿ページetc..）
以前『reCAPTCHA v3』を問い合わせページのみ＆左側に表示させる方法：その2を書いた時は、問い合わせページにのみ…
