Webサイト上でソースコードを読みやすくしてくれる「SyntaxHighlighter」

HTMLやCSS、PHPのような様々なソースコードを、Webサイト上で読みやすく表示してくれる「SyntaxHighlighter」というプラグインがあります。Tipsなどを公開する時に、とても役立ちます。
ショートコードバラメータで、個々に値の設定ができるところも便利です。

まずは「SyntaxHighlighter」をインストール後、有効化して設定画面を見てみます。
日本語表示なので、必要箇所にチェックを入れたらソースを掲載したいページにショートコードを入力します。コードは[表示言語]~[/表示言語]のように囲むだけでOKです。


140605_002


ソースを掲載したいページにショートコードを入力します。

140605_001


上記をプレビューするとこのような感じになります

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>SyntaxHighlighter<title>
</head>
<body>
<p>コードを見やすく表示できます。</p>
</body>
</html>
一覧へ戻る