ルクセリタス等ワードプレスを利用している際に、投稿画面にソースコード（プログラム）を記述したい。でも、そのまま記述すると、見栄えが悪いと感じた経験はありませんか？
そこで、投稿画面にソースコードを埋め込む方法をご紹介していきましょう。
「Crayon Syntax Highlighter」とは
自分が作ったサイトをきれいに見せるためのプログラム。そんなプログラムもただ投稿画面に記述しているだけでは、とても見づらいですし、なんだか見栄えがダサイんです。。。
そんなときに便利なプラグインがこの「Crayon Syntax Highlighter」。そこで、このプラグインについてご紹介していきましょう。
Crayon Syntax Highlighterとは・・・
ソースコードを投稿画面に表示される際、下記のように枠線の内部に囲って、ソースコードを行ごとに表示し、見栄え良く表示することができるプラグインです。
何よりソースコードを表示する際に直接投稿画面に入力すると、見栄えが悪くなってしいますが、このプラグインによって、この枠線内に表示ができるため、とてもかっこよく見せることができるメリットがあります。
＜表示例＞
ソースコードのインストール方法
それでは、プラグインを使って、容易にプログラムソースを埋め込む方法を活用する方法です。そのプラグインは、「Crayon Syntax Highlighter」になります。
1.＜プラグインインストール＞
ソースコードを埋め込むプラグインを使ってみよう！
それでは、実際に「Crayon Syntax Highlighter」の使ってみましょう。
1.設定画面アイコン選択
3.ソースコード埋め込み
表示画面について
それでは、実際の表示画面について解説していきましょう。
1.投稿中の表示画面について
このように、投稿中の表示画面に関しては、すごくシンプルで、枠線に囲まれただけになっています。
1 2 3 4 | .post h2 { border-left:solid 10px #20a39e; border-bottom:2px dashed #20a39e; } |
2.実際の表示画面
先頭列に数字の行数が表示されます。また内容ソースコードもコピーすることができるので、このサイトを訪問していただいた方にも役に立つ情報を提供することが可能です。
まとめ
このように、ソースコードをただサイトに掲載するだけでなく、見栄え良く、表示することができる。プラグイン「Crayon Syntax Highlighter」なのです。
自分のサイトを上手にカスタマイズして、有益な情報を提供できるようにしていきましょう。
