素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【ソースコードの埋め込み】WordPressでコードを綺麗に表示してくれる「Crayon Syntax Highlighter」プラグイン

投稿日: 2017年10月31日
最終更新日:

スポンサーリンク

336×280




ソースコードの埋め込み

ソースコードを記事に埋め込みたい場合、プラグイン等を入れていないとすごく質素な感じになってしまいます。

また、様々な言語によってシンタックスハイライトが異なるので、それを自前で表現するのはとても大変です。

そんな方のためのプラグイン、もちろんWordpressに用意されていますよ!!笑

今回は、「Crayon Syntax Highlighter」というWordpressプラグインをご紹介致します♪

Crayon Syntax Highlighter

概要

Crayon Syntax Highlighterプラグインは、記事の中でソースコードを綺麗に表示してくれます。

また、様々な言語に対応しており、40種類以上の言語に合わせてシンタックスハイライトをサポートしてくれます!

導入方法

インストール

プラグイン>新規追加を選択し、キーワードに「Crayon」と入力すると、「Crayon Syntax Highlighter」プラグインがヒットすると思うので、今すぐインストールボタンをクリックします。

インストールが完了すると、有効化ボタンに変わるのでクリックします。

確認

設定の中に、Crayonメニューが追加されていれば有効化が完了です。

使い方

設定>Crayonの中でエディターの細かい設定は可能ですが、デフォルトのままで使えるので今回はデフォルトのままで進めていきます。

記事編集エディタボタン群の中に、crayonボタン」が追加されていると思うのでクリックします。

専用の入力ダイアログが表示されるので、ソースコードと、対応する言語を入力し、右上のaddボタンをクリックします。
※HTMLの場合はDefaultのままで良いです。

そうすると以下のようになります。

JavaScriptはこんな感じ

CSSはこんな感じ

良い感じですね♪

終わりに

今回はデフォルトの設定で紹介してみましたが、細かい設定で見た目もカスタマイズ出来ますので、自分好みのコードエディターに設定してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , ,

blogenist

Author: blogenist