webgonia

WordPressでブログのソースを紹介する時に役立つプラグイン

WordPressでブログのソースを紹介する時に役立つプラグイン

コードをワードプレスで紹介するときはCrayon Syntax Highlighterプラグインをインストールしておくと便利です。

プログラミング関連のブロガーさんにとってコードを記事内に記述する頻度が多く、カスタマイズしやすくオリジナルデザインでおしゃれにコードを表示できるので導入しておきましょう。

プラグインでコードを記述

CrayonSyntaxHighlighterワードプレスワードプレスでコードを表示

ワードプレスでコードを記述する時は「<>」または「Crayon」をクリックすると「Add Code」画面が表示されます。
CrayonSyntaxHighlighteワードプレス
「Add Code」画面が表示されたらコードの記述デザイン設定後「挿入」をクリックするとコードが表示されるので「プレビュー」で確認しましょう。
CrayonSyntaxHighlighteaddcode

Add Codeで設定できる項目

  • タイトル:コードのタイトルを表示
  • プログラミング言語:プログラミング言語を選択
  • Line Range:番号を入れるとその行(選択範囲)だけ表示
  • マークするライン:番号を入れるとその行(選択範囲)をマークアップ
  • コード:表示させたいコード記述
  • URL:挿入するファイルへのURL
  • テーマ:コード表示のテーマを選択
  • フォント:コードのフォント、サイズ、高さを指定
  • サイズ:表示されるコードボックスのサイズを指定

コードを記述する度にしていするのが面倒ならあらかじめ設定しておくと便利です、さっそくインストールしていきましょう。

 

Crayon Syntax Highlighterインストール

まずはCrayon Syntax Highlighterをインストールしていくのでダッシュボードメニューの「プラグイン」→「新規追加」に進んでください。
「プラグインの検索」からCrayon Syntax Highlighterを入力して検索すると表示されるので「いますぐインストール」をクリックしましょう。
CrayonSyntaxHighlighterインストールインストールできたらCrayon Syntax Highlighterを「有効化」しましょう。
CrayonSyntaxHighlighterプラグイン有効化これでCrayon Syntax Highlighterのインストールは完了です、設定を開いて詳細を確認してみましょう。

 

Crayon Syntax Highlighter設定

有効化ができたら設定にします、「設定」→「Crayon」をクリックしてください。
CrayonSyntaxHighlighter設定ここで設定しておくとコードを表示する度に設定しなくてもいいので、お気に入りのデザイン設定を保存しておきましょう。
CrayonSyntaxHighlighte基本設定この設定で確認したいのが「一般設定」を下にスクロールした先にある「必要なときだけCrayonのCSSとJavaScriptを読み込むように試みる」にチェクをいれておくとコードだけ読み込まれるのが遅くなるのを防げます。
CrayonSyntaxHighlighte読み込み設定

 

ブログでコードを紹介する時に役立つWordPressプラグインは以上になります。

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

Return Top