WEBデザインに関するトピックなどをブログで投稿したい場合、CSSやHTMLソースを見本で表示させる時があります。
WordPressなら簡単に表示ができるプラグインがあります。
いくつかプラグインがありますが今回はSyntaxHighlighter Evolvedをご紹介します。
インストール
管理画面の『プラグイン』から『新規追加』をクリックします。
検索欄に「SyntaxHighlighter Evolved」をコピペして検索。
1番目に表示される「SyntaxHighlighter Evolved」をインストールして有効にする。
設定の確認
「SyntaxHighlighter Evolved」の設定は管理画面の『設定』に『SyntaxHighlighter』というメニューが追加になっているのでそちらから変更などを行います。
表示のデザインも選べます。
特にカスタマイズしなくても良ければ設定をいじらずにすぐに投稿で使用できます。
使用方法
投稿の新規追加を開いてテキストエディタの表示で入力します。
表示させたいコードの前の行に[◯◯]〜[/◯◯]で囲み◯◯部分はbrushesと呼ばれるショートコードを書きます。
CSSの場合の入力例
[css]
.entry-step h3::before {
position: absolute;
top: 0;
left: 0;
content: counter(titleNum);
margin-top: 3px;
width: 30px;
height: 30px;
line-height: 30px;
background-color: #7b7983;
border-radius: 100%;
color: #fff;
font-size: .9em;
text-align: center;
}
[/css]
表示させると...
.entry-step h3::before {
position: absolute;
top: 0;
left: 0;
content: counter(titleNum);
margin-top: 3px;
width: 30px;
height: 30px;
line-height: 30px;
background-color: #7b7983;
border-radius: 100%;
color: #fff;
font-size: .9em;
text-align: center;
}
主なbrushesの一覧
| ソースコードの種別 | Brushes |
|---|---|
| XML | xml, xhtml, xslt, html, xhtml |
| Plain Text | plain, text |
| CSS | css |
| PHP | php |
| JavaScript | js, jscript, javascript |
ちなみに話は少し逸れますが、
この記事の入力例のようにWordPressのショートコード[◯◯]と[/◯◯]もそのまま記事に表示させたい場合、preで囲んでWordPressのショートコードを投稿画面で入力しても公開表示させると[◯◯]と[/◯◯]が消えてしまいます。
そんな時は[[◯◯]〜[/◯◯]]というように[]で更に囲めば消えません。
意外と簡単な方法なのでお試しください。
