ルクセリタスでプログラムをきれいに見せたい！投稿画面にソースコードを埋め込む方法とは

Luxeritas（ルクセリタス）等ワードプレスを利用している際のプログラムに関する悩み。

悩む女性１

• 投稿画面にソースコード（プログラム）をきれいに記述して表示したい。
• でも、そのまま記述すると、見栄えが悪い。

と感じた経験はありませんか？

管理者

そこで、投稿画面にプログムのソースコードを埋め込んで、きれに表示する方法をご紹介していきましょう。

「Crayon Syntax Highlighter」とは

自分が作ったサイトをきれいに見せるためのプログラム。

そんなプログラムもただ投稿画面に記述しているだけでは、とても見づらいですし、なんだか見栄えがかっこわるいんですね。。。

そんなときに便利なプラグインがこの「Crayon Syntax Highlighter」。そこで、このプラグインについてご紹介していきましょう。

何よりソースコードを表示する際に直接投稿画面に入力すると、見栄えが悪くなってしいますが、このプラグインによって、この枠線内に表示ができるため、とてもかっこよく見せることができるメリットがあります。

表示例

こんな感じで表示されます。

ソースコードのインストール方法

それでは、プラグインを使って、容易にプログラムソースコードを埋め込む「Crayon Syntax Highlighter」のインストールを行っていきましょう。

プラグインインストールの操作画面

プラグインからキーワード入力項目に、「Crayon Syntax Highlighter」と入力しましょう。Crayonだけでも問題なく検索されると思います。表示されたら、選択して、インストールしましょう。

ソースコードを埋め込むプラグインを使ってみよう！

それでは、実際に「Crayon Syntax Highlighter」の使ってみましょう。

１．設定画面アイコン選択

２．ソースコード埋め込み

表示画面について

それでは、実際の表示画面について解説していきましょう。

１．投稿中の表示画面について

このように、投稿中の表示画面に関しては、すごくシンプルで、枠線に囲まれただけになっています。

２．実際の表示画面

先頭列に数字の行数が表示されます。また内容ソースコードもコピーすることができるので、このサイトを訪問していただいた方にも役に立つ情報を提供することが可能です。

まとめ

このように、ソースコードをただサイトに掲載するだけでなく、見栄え良く、表示することができる。プラグイン「Crayon Syntax Highlighter」なのです。

自分のサイトを上手にカスタマイズして、有益な情報を提供できるようにしていきましょう。