このエントリーをはてなブックマークに追加  ブログランキング・にほんブログ村へ

WordPressで記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

本文中で「HTML」「CSS」などの解説をするときに、そのまま入力すると、記事に反映されてしまったり、ユーザーがコピペできなかったり、何かと不便ですよね。

そこで今回は、ソースコードを反映せずにきれいに表示し、ユーザーはコピペもできる便利なプラグイン『Crayon Syntax Highlighter』をご紹介します。

こんな感じで、きれいに表示できます。

では、インストールから順に、見ていきましょう!

『Crayon Syntax Highlighter』インストール方法

①管理画面から【プラグイン】を選択し

②【新規追加】をクリックします。

①キーワドに【Crayon Syntax Highlighter】と入力し検索します。

②『Crayon Syntax Highlighter』が表示されたら【今すぐインストール】をクリックします。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

『Crayon Syntax Highlighter』が表示されたら【有効化】をクリックします。

『Crayon Syntax Highlighter』

『Crayon Syntax Highlighter』のインストール方法は以上です。

次に、『Crayon Syntax Highlighter』の設定をしていきましょう。

『Crayon Syntax Highlighter』の設定方法

『Crayon Syntax Highlighter』は、初期設定のままでも、問題なく使用できますが、管理画面の設定「Crayon」から各設定を行うことができますので、一通りみていきましょう。

①管理画面の【設定】から②【Crayon】を選択します。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

設定画面が長いので、必要な個所を順に紹介します。

①【テーマ】デザインの変更ができます。

各テーマはプレビューで確認することができます。

②【フォント】フォントの種類・サイズ・行の高さが設定できます。

③【余白の設定】上下の余白の設定ができます。

④【ツールバー】ツールバーの表示設定ができます。

マウスをのせたときに表示する・常に表示する・表示しないから選択できます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

⑤【行】行の表示設定ができます。

コードが長くなった時に、折り返して表示するか、スライドして表示させるかの設定ができます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

⑥【その他】「必要なときにのみCrayonのCSSとJavaScriptを読み込もうと試みる」にチェックをいれることで、表示の最適がができます。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

⑦【変更を保存】変更を確定します。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

『Crayon Syntax Highlighter』の設定方法は以上です。

では、早速使ってみましょう。

『Crayon Syntax Highlighter』の使い方

投稿入力画面の右上にある【<>】をクリックします。

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

コード以外は任意になります。

①【タイトル】ツールバーにタイトルが表示されます。(任意)

②【プログラム言語】ツールバーにプログラム言語が表示されます。(任意)

③【マーカーライン】コードにマーカーを引くことができます。(任意)

④【コード】コードを入力します。

⑤【挿入】

記事中にソースコードを表示させるプラグイン『Crayon Syntax Highlighter』

③マーカーで強調したい行数が、複数ある場合は【,】で区切ります。

例【1,3,5】

複数行続けて強調したいときは【-】で範囲指定をします。

例【1-5】

基本的には④コードを入力し、⑤挿入するだけでOKです。

入力画面では、こんな感じ↓に表示されても

実際のブログでは、こんな感じ↓に、きれいに表示されます。

まとめ

『Crayon Syntax Highlighter』を利用すれば、簡単にコードの表示を行うことが出来ます。

きれいに表示させるだけでなく、ユーザーは簡単にコピペすることができるようになり、便利なブログになりますね♪

ブログでソースコードを、表示させるときは『Crayon Syntax Highlighter』を利用してください(*’▽’)

最後までご覧いただきありがとうございます。

ポチッと応援してもらえると嬉しいです(*'▽')

このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ

このブログでは、私がアフィリエイトを始めたばかりの時に、

『躓いたこと』

『知りたかったこと』

『こんなアドバイスがほしかったなぁ』

と思った事などを、初心者の方にも解りやすいように紹介しています。

メルマガでは、ブログの入門講座に続き、アフィリエイト初心者でも『稼ぐ力』を身につけるための情報を発信中です📧

今ならアフィリエイトのスタートダッシュに役立つ、3つのレポートをプレゼント中✨

本気でアフィリエイトと向き合いたい方、お待ちしています(*´ω`*)

🎁プレゼントの詳細と登録は、こちらからお願いします。

◆無料メール講座