WordPressで記事の中にソースコードを埋め込む時、プラグインを使うと綺麗にソースコードが表示できて便利なので使ってます。
でも、プラグインは便利な反面で重くなることが多いので、なるべくなら使うプラグインの数は少なくしたいと思う人が多いかと思います。
プラグインなしで埋め込み可能なものが他にないかを探したら使いやすそうなのを見つけたので、プラグイン「あり」と「なし」のどっちが総合して便利か両方を表示してみることにしてみます。
プラグインを使う場合のソースコード埋め込み
プラグインありで使用したのはCrayon Syntax Highligterです。もちろんソースコードを埋め込めるプラグインです。
このプラグインは重いと思う人が多いみたいですね。
私も思います。
Crayon Syntax Highliterは設定も簡単で、すぐ使えるしソースコードが綺麗に表示されるから良い面もあるプラグインです。
Crayon Syntax Highligterの表示が上記の画像です。
行番号が表示されていて、コードのハイライトでCSSを例にするとセレクタやプロパティ、値が見やすくなります。
別記事ではもう一つ使いやすと思ったソースコード埋め込みのプラグインについて書いています。
今回の投稿のプラグインありでは「Crayon Syntax Highligter」の使い方を紹介します。
Crayon Syntax Highligter使い方
Crayon Syntax Highligterを使ってみようと思う人のために使い方も書いておきます。
プラグイン⇒新規追加⇒Crayon Syntax Higligter⇒インストール⇒有効化
あとは記事内で「<>」をクリックすればソースコード入力の画面になります。
①codeにソースコード入力⇒②Addで決定です。
使い方は、かんたんです。
これでプラグインの更新が入って重さが解消されればいいんだけどなぁ…という期待をしてるけど、Crayon Syntax Highliterの最終更新は2年前でした。
記事内でソースコード表示もコードが色分けされるし見やすいので、重いのを自己改善できる人は使う価値がありそうですね。
しかしですよ？私はプラグインを少なくしたい。重さを改善するよりも、プラグインなしでソースコードの埋め込みがしたい。更に埋め込み以外の使い方もできるものを選んでみました。
プラグインを使わないソースコード埋め込み
Code PenといってHTML、CSS、JavaScriptのコードをコーティングしてリアルタイムでプレビュー表示できるので自分の勉強にもなると思ってCode Penも試してみる事にしました。
もちろん、Code Penから記事内にソースコードも埋め込みができてソースコードの埋め込み表示はかっこいい感じになります。
See the Pen qJqJpq by @shu (@-shu-) on CodePen.
Code Penの使い方
Code Penの使い方も書いておきます。
Code Penトップページの右上のSign Upをクリック
Twitter、Facebookでも登録できるしメールアドレスでも大丈夫です。
メールアドレス登録の場合はSign Up with Emailからです。
登録するとすぐ使えるようになります。
トップページの右上の①作成する⇒②新しいペンでコードを記述できるページに進めます。
HTMLやCSSを記述できる画面右下にEmbedがあります。
Embedをクリックすると記事に貼るコードをコピペできます。
コードをコピーする前にiframeを選択してください。んでコピー。
そして、WordPressのテキストエディタで貼り付ければ完成です。
プラグインなしCDNでソースコードを埋め込む
もう一つはCDNと言って、ソースコードを埋め込むためのコンテンツをインターネット経由で使う方法です。
このCDNだとサーバー分散できてプラグインを使わず、軽量なソースコードの埋め込みができます。
シンプルでソースコードを表示させるデザインも選べるし、テキストエディタに近い埋め込みができます。
関連 LION MEDIAのシンタックスハイライトにhighlight.jsを使う方法
ただ記事に埋め込むときにはpreタグとcodeタグで挟んでソースコードを埋め込むので間違えないようにすることだけに注意が必要です。
プラグイン「なし」と「あり」を使った結果
プラグイン使用とプラグインなし、両方のソースコードを埋め込んでみて、使い方の説明してみましたが、設定ではプラグインありが少しだけ簡単かな？と思います。
しかし、今回紹介したプラグインのCrayon Syntax Highligterで埋め込む場合は、使い始めてからが重くなる。
逆に、プラグインなしのCode Penの場合は設定が少しかかるけど、重くないし埋め込んだソースコードをCSSと一緒にプレビューができる利点があります。
そしてCDNで読み込んでソースコードを埋め込む場合は軽量でデザインがおしゃれ。
で、けっきょく自分どれ使うの？になりますがメインにはCDNでソースコードを埋め込めるhighlight.jsを使って、cssをあてた結果のプレビューも記事で紹介したいときはCode Penを使うようにしてます。
