ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

コードが綺麗に表示出来るCrayon Syntax Highlighterは最強です

約 5 分

最近、ヤバイWordPressのプラグインを発見しました!

それは「Crayon Syntax Highlighter」です。

こんな事を言うと、必ずこういう人が出てきます。

頭の良い人
お前、今さら何言ってんの?

そんな人は今すぐ出ていってください。

 

実は、WordPressを初めて使った日、記事の中で「ソースコード」をキレイに表示させたかったんだけどなかなか上手くいかなくて・・・

結局、その時は「自分が出来る最善の方法」で投稿をしました。

こんな感じで↓ ↓

Crayon Syntax Highlighter

これでもスクロールバー付きのボックスを作って、ベースの色を青にして、本当は文字を全部「白」に設定したつもり・・・とか色々やったんですが、これが限界でした。

その後「どうやったらキレイにソースを表記出来るんだろう?」って検索すること2時間。ついにコイツと出会いました。

チャッキー
超ヤバイ↓↓

 

Crayon Syntax Highlighter

どうですか?すごくないですか?

このプラグインを使えばボタン1発で「超らくー」にしかも「キレイ」にコードが書けちゃいます。

しかも、導入から設定までかかった時間は、わずか5分!

まさに言うことなしの最強プラグインです。

今回は、この「Crayon Syntax Highlighter」のインストールから使用方法まで詳しく記載していきたいと思います。

基本情報:対応するコンピューター言語は

対応言語一覧

  • ABAP
  • ActionScript
  • AmigaDOS
  • Apache
  • AppleScript
  • Arduino
  • Assembly (x86)
  • AutoIt
  • C
  • C#
  • C++
  • CoffeeScript
  • CSS
  • Delphi/Pascal
  • Diff
  • Erlang
  • Go
  • Haskell
  • HTML
  • Lisp
  • Lua
  • Microsoft Registry
  • MIVA Script
  • Monkey
  • MS-DOS
  • MySQL
  • Java
  • JavaScript
  • Objective-C
  • Perl
  • PHP
  • PL/SQL
  • PostgreSQL
  • PowerShell
  • Python
  • R
  • Rust
  • Ruby
  • Scheme
  • Shell (Unix)
  • Transact-SQL
  • TeX
  • Vim
  • Visual Basic
  • Visual Basic .NET
  • YAML

なんと全部で46個!!!!!

対応していない言語を探す方が大変ですね。みんなが使っているので対応してないのは「swift」くらい?「swift」が公式には対応してないかもしれないですが、記述はできます。

Crayon Syntax Highlighterの導入から使い方

①プラグインの追加

まずはWPのダッシュボードから「プラグイン」⇒「新規追加」をクリックして下さい。

Crayon Syntax Highlighter

プラグインの追加画面に切り替わったと思います。

Crayon Syntax Highlighter

右上の「キーワードボックス」に「Crayon Syntax Highlighter」と入力してください。

すると、左上に「グレイの格子柄のプラグイン」が表記されるので、そちらを「インストール」して「有効化」まで済ませてください。

インストールは以上です。続いて設定を行います。

②設定

ダッシュボード画面の「設定」の中に「crayon」というのが追加されているのでそこから設定を行います。

 

Crayon Syntax Highlighter

↓ ↓ の画面に切り替わったと思います。

Crayon Syntax Highlighter

初期の設定から特に変更することもないのですが、僕はソースコードが黒バックの方が見やすいので画面上部にある「テーマ」だけ変えました。

他にも、フォントやボックスのサイズなどもココで調整出来ます。

設定は以上になります。続いて使用方法を見ていきましょう。

③使用方法

インストールすると投稿画面に「CRAYON」というボタンが追加されます。

Crayon Syntax Highlighter

あとは、投稿画面内のソースコードを記述したい所で「CRAYON」ボタンを押すと新しいウインドウが開きます。

こんな感じ↓ ↓ ↓
 

Crayon Syntax Highlighter

ここにソースを記述するだけです。

先程、基本設定をしましたが、ココでもボックスの大きさをどうするかなど細かい設定ができます。

僕はこんな感じにしました。↓ ↓ ↓
 

Crayon Syntax Highlighter

最後に、右上にある「挿入」ボタンをクリックすれば本文中にコードが書き込まれます。

お疲れ様でした、使い方は以上です。

まとめ

僕はこの便利なプラグインのおかげで作業時間が大幅に短縮できました。

まだ、インストールしていない人は是非1度使ってみてはいかがでしょうか?

チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事