スポンサーリンク

スポンサーリンク

【wordpress小技③】ソースコードをきれいに貼りたい人におすすめ!Crayon Syntax Highlighter

▼この記事をSNSでシェアする▼

トンビ

WordPress小技第三弾!

トンビ

今日紹介したいのは上のコードの貼り方!

エンジニアブロガーの方には必須のプラグインCrayon Syntax Highlighter!

このサイトも今までドローンの記事がコード直書きだったのですが、なんか腑に落ちなかったんですよね。吹き出しの貼り方の紹介のコードも不格好でした。

ただ、Crayon Syntax Highlighterを使うと行番号も降られて、色合いもよくてみやすいです!

インストール

  1. プラグイン > 新規追加を押下します。
  2. 検索欄で「Crayon Syntax Highlighter」で検索する。
  3. Crayon Syntax Highlighterをインストール
  4. そして「有効化」を押す!

これね。

設定で編集

設定 > crayonを押下します。

ここで問題が・・・

トンビ

設定が英語・・・日本語設定なのに

wordpressのアップデートでこういう不具合は頻発しているらしい。

ちなみに日本語が正しく適用されていても、一部は英語です。

日本語で表示されないトラブルの解決策としては、

example.com/wp-content/languages/plugins
あるいは
example.com/public_html/wp-content/languages/plugins
フォルダにある
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
を削除するといいです。

(自分で試してはいないので、この変更に関する責任は一切負いかねます。バックアップを必ず取りましょう。)

設定カスタマイズ

英語のままですが、日本語の補足をつけて解説します。

ツールバーの常に表示(always)はチェックにしたほうが使いやすいです!

コードの折り返しはぼくはやってませんが、やりたい人はやりましょう。

ツールバー以外はあまりいじらなくてもそこそこ使いやすいです。

言語の設定したい人はここで編集しましょう。

実際に貼る

貼り方はとても簡単。

投稿のテキストタブを開き、crayonのツールバーをクリック

言語の設定は任意で行い、枠にコードを貼り、addを押します。

こんな感じのがビジュアルに出てきます。

番号とか反映されてないじゃんと思うかもしれないですが、実際に記事のプレビューや公開をすると、下のようにちゃんと表示されます。

スポンサーリンク

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(19卒就活生)
◆トンビ(社会人1年目SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する