【2019年】WordPressでQiitaのように美しくソースコードを表示する【Crayon Syntax Highlighter】

はじめに

こんにちは、技術者を目指しているぴえりです。

今回はWordPressのソースコードを表示する設定について説明します。表示の設定に時間がかかってしまったので、情報をシェアして置きたいと思います。

ソースコードを美しく表示する方法は、WordPressプラグインのCrayon Syntax Highlighter を利用します。実際には、プラグインをインストールして表示方法の設定を変更するだけです。

対象者

Crayon Syntax Highlighter の表示をデフォルトのまま利用したくない。ソースコードを美しく表示したいという方が対象です。

目標

理想:Qiitaの美しいソースコード表示1 qiita_sample

現実:Crayon Syntax Highlighterのデフォルト表示
crayon_sample

問題点

  • フォント/ライン幅
  • paddingが狭い
  • カラースキーマが乏しい
  • 無駄なオプション
    • ソースコードを全てコピペできる
    • ダブルクリックで表示変わる

上記の問題点を解決した表示

修正:各種設定を変更した Crayon Syntax Highlighter

まぁまぁ綺麗に表示できるようになったかなと思ったのですが、結構不満があります。

  • import周り配色
  • コメント周りの配色
  • class系の配色

初期よりは見やすくなったので、ひとまずこれでブログを作成していく.

設定方法:実際に設定した手順

プラグインインストール

プラグイン > 新規追加 > Crayon Syntax Highlighterを検索 > インストール > 有効化

設定方法

設定 > Crayonクリック
※記述していないものはチェックを外して、設定していません

設定項目 設定内容
Theme Monokai
Font Adobe Source Sans
Font Font Size 16
Font Line Height 24 Pixels
Metrics Top Margin 12
Metrics Bottom Margin 12
Toolbar Display the Toolbar : Naver
Lines チェックなし
Code [チェック]Decode HTML entities in code
Code [チェック]Remove <code> tags surrounding the shortcode content
Tags [チェック]Capture <pre> tags as Crayons
Languages/Files 初期設定
Tag Editor チェックなし
Misc 初期設定
Errors 初期設定

設定:padding

ソースコードの領域を広めに取りたいので、
外観 > カスタマイズ > 追加CSSに以下を追記

.crayon-pre {
    padding: 30px!important;
}

以上でカスタマイズは終了です。

参考URL

Crayon Syntax Highlighter設定

  • Crayon Syntax Highlighterでフォントや背景の色を変更したい場合は設定項目を編集する[参考リンク]
  • Crayon Syntax Highlighterの設定項目を日本語で見たい場合[参考リンク]

カラースキーマ設定

Crayon Syntax Highlighterの編集を行うときの参考


脚注

  1. https://qiita.com/penguinz222/items/40c72b44d1f19a7c379e

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です