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

IT

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

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

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥2,600 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/03/15 19:06:03時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド!カード類も収納出来てかさ張らないのでオススメです!

スポンサーリンク

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

関連記事

YouTubeも見てね♪

お名前.comサイドバー