WordPressプラグイン「Crayon Syntax Highlighter」で綺麗にソースコードを表示させる

スクリーンショット (408)
スポンサーリンク
The following two tabs change content below.
粕尾 英行 (かすお ひでゆき)
1986年7月生まれ長野育ち。 よく飲みよく食べ、サッカー、麻雀、ゴルフが好きな30歳。 東京で10年働いて地元長野に帰ってきたら、長野がすごく良いところだ!となって長野紹介ブログ「ILove長野」を始めました。 長野の方のためのブログを活用した集客コンサル・イベント主催もやってます。

こんにちわ!

ひでゆきです^^(dehichan0728)

 

今日は記事中のソースコードを紹介したいと思ったときに、綺麗に表示させることができるプラグインを紹介します!

 

ソースコードっていうのは、ページ上で右クリックすると見れます。

cord cord2

 

 

Crayon Syntax Highlighterとは

Crayon Syntax Highlighterは、WordPressの記事中のソースコードを綺麗に表示させることができるプラグインです。

 

他の人にコードを紹介したい!

というときに、このプラグインを使います。

 

そのまま貼るのはちょっとなしよねぇ~

 

<p class=”post-date”>投稿日:<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”datePublished” content=”<?php the_time(‘Y-m-d’); ?>” ><?php the_time(get_option(‘date_format’)); ?></time> | 更新日:<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”dateModified” content=”<?php the_modified_date(‘Y-m-d’) ?>” ><?php the_modified_date(get_option(‘date_format’)); ?></time></p>

 

 

こうやってみます?

<p class=”post-date”>投稿日:<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”datePublished” content=”<?php the_time(‘Y-m-d’); ?>” ><?php the_time(get_option(‘date_format’)); ?></time> | 更新日:<time datetime=”<?php the_time(‘Y-m-d’); ?>” itemprop=”dateModified” content=”<?php the_modified_date(‘Y-m-d’) ?>” ><?php the_modified_date(get_option(‘date_format’)); ?></time></p>

 

 

どうせならソースの色味とかそのままの方が見栄えいいですよね。

cord2

 

そんな時に「Crayon Syntax Highlighter」プラグインを使えばソースを綺麗に表示できちゃいます!

<p class="post-date">投稿日:<time datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished" content="<?php the_time('Y-m-d'); ?>" ><?php the_time(get_option('date_format')); ?></time> | 更新日:<time datetime="<?php the_time('Y-m-d'); ?>" itemprop="dateModified" content="<?php the_modified_date('Y-m-d') ?>" ><?php the_modified_date(get_option('date_format')); ?></time></p>

 

どうでしょうか、この方がカッコいいでしょ?笑

見た感じもソースなんだ。ということが伝わりやすいです。

 

では、インストール方法、設定、使い方を説明していきます!

 

Crayon Syntax Highlighterのインストール方法

WordPressでプラグインをインストールしたことないよ!

 

という方はこちらWordPress入門「プラグインとは」「インストールする方法」

 

 

Crayon Syntax Highlighter設定方法

このプラグインは設定不要で使えます!

それぞれがカスタマイズすることができるのでお好みでお願いします~

 

ダッシュボード「設定」→「crayon」

setting

 

テーマ選択

テーマは好きなものを選択してください!

crayon

 

テーマの一部こんな感じ…

全部書きだすの途中で諦めました。ごめんなさい!

 

1c kod

 

1c Zapros

 

809finset

 

Ado

 

Amity

 

Arduino ldo

 

Bncplusplus

 

Capactitacionti

Cg Cookie

Cisco Router

Classic

Code Spesial Board

Coy

Dark Terminal

Eclipsc

Epicgeeks

Familiar

Feeldesign

Flatui Ligt

 

まだまだ種類ありますが、この辺にしときましょう。笑

ここで好きなテーマを選んでください、特に選ばなくても使えます。

 

フォント選択

もう見本は出しません…数が多すぎます!!笑

crayon2

 

こんな感じに変わったりします、フォントを選択したらその場でサンプル変わります。

サイズ選択

気になる方はやってください!笑

crayon3

 

それ以降の設定

そのままでも使えます!

crayon4

このままで問題なーし!

crayon5

 

 

Crayon Syntax Highlighter使い方

 

プラグインを有効化すると、記事の装飾関連に追加されます。

 

ビジュアル

crayon6

テキスト

crayon8

 

それぞれのボタンをクリックすると以下の画面がでます。

crayon7

 

①タイトルを記入

crayon9

 

②1文章として表示

改行がないソースで使います。

 

どっちでも使えます、見やすさを考えるとチェックをした方がいいでしょう。

 

チェックなし

 

チェックあり

<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1046"><a href="https://dehichan.com/category/beginner/open-set/">

 

③挿入

これをクリックすることでソースを記事内に表示します。

 

④コードを貼り付ける場所

綺麗に表示したいソースを貼り付けます。

 

Crayon Syntax Highlighterまとめ

使い方は本当にシンプルです!!

設定不要で使えることも嬉しいですね。

 

そのまま貼り付けでもいいですが、見栄えを考えるとプラグインを使った方がいいでしょう!!

見栄えと手軽さでこのプラグインが1番いいですよ^^

 

では!!

 

スポンサーリンク
スクリーンショット (408)

長野情報をみんなでシェアしよう!泣いて喜びます!!

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

粕尾 英行 (かすお ひでゆき)

1986年7月生まれ長野育ち。 よく飲みよく食べ、サッカー、麻雀、ゴルフが好きな30歳。 東京で10年働いて地元長野に帰ってきたら、長野がすごく良いところだ!となって長野紹介ブログ「ILove長野」を始めました。 長野の方のためのブログを活用した集客コンサル・イベント主催もやってます。