<pre>タグと<code>タグは見づらい
<pre>タグと<code>タグを使用してソースコードの記述を表示するには、デフォルトだとこのようになります。
しかし、これでは縦幅が大きく、色味も無いので見づらいです。
そこで、Wordpressのプラグインで何か良いのはないかなと探していたところ「Crayon Syntax Highlighter」と言うプラグインを発見しました。
ソースコードを綺麗に表示するWordpressプラグイン「Crayon Syntax Highlighter」
完成図のビジュアル
1 2 3 4 5 6 7 8 9 | a:hover{ text-decoration:none; } list>li{ margin-bottom:15px; margin-top:15px; margin-margin:15px; } |
インストール方法
管理画面 > プラグイン > 新規追加 > 「rayon Syntax Highlighter」で検索 > 今すぐインストール > 有効化 >
設定方法
管理画面 > 設定 > SyntaxHighlighter
設定は下の方にプレビューがあるので、見ながら設定を変更していましょう。
私はデフォルトのままで何もいじっていません。
使い方
投稿や固定ページの「ビジュアル」ではなく「テキスト」の方に「crayon」とあるのでクリック
下のような画面が出てくるので「Title」や「コード」に記述して「Add」をクリック
このように表示されました!
見やすい!!
1 2 3 4 5 6 7 8 9 | a:hover{ text-decoration:none; } list>li{ margin-bottom:15px; margin-top:15px; margin-margin:15px; } |
参考記事
https://miningoo.com/154
http://michisugara.jp/archives/2011/syntax_highlighter.html
ありがとうございました!
コメント