ソースコードを綺麗に表示させたい
※この記事は「Crayon Syntax Highlighter」を導入する記事ですが諸事情により私は利用しておりません。試した環境だとうまく動作しないことがわかりましたのでもし試される方は最後まで読んでからご利用ください！！！！！
ソースコードをブログ内で綺麗に表示させたい。みなさん思いますよね。そうですよね。全人類共通の願いですよね。というわけで本日もグーグル大先生のお力を借りることに。なぜいきなりそう思ったのかというと、PHP入門編の記事を書いている途中で、あれ、ソースコード綺麗に表示させるタグなくね？って気づいてしまったんですよね。気づきの神ですよね。なので先にそちらのプラグインを導入することに。ついでに記事に！みたいなノリです。
Crayon Syntax Highlighter
いろんなブログで見かけたことのあるソースコード表示、そのプラグインがあるみたいです！早速導入しましょう。そうしましょう。
1.「Crayon Syntax Highlighter」をダウンロード
Crayon Syntax Highlighterをダウンロード
何やら不吉そうな注意書きがありますが、気にしたら負けだという精神でダウンロードボタンをポチッとすると「crayon-syntax-highlighter.zip」がダウンロードされました。
2.「Crayon Syntax Highlighter」をインストール
管理画面の「プラグイン」を押下
「新規追加」を押下
「プラグインのアップロード」を押下
先ほどダウンロードした「crayon-syntax-highlighter.zip」を選択し、「今すぐインストール」を押下
プラグインのインストールが完了したら「プラグインを有効化」を押下
有効化が完了すると記事投稿欄のタグに「crayon」が追加されてる！
早速使ってみる
ん？なんか思ってたんのと違うなぁ。色全然ついてないじゃん。なんでだ？
あれ？やっぱり何も変わらない。。。。ふとよぎる不安。。。。
感想的な何か
なんでだろ、、、、軽く調べた感じだと、プラグイン同士の競合も考えられるみたい。ただ、今入れてるプラグインって必要だから入れてるのであって、、、これ以上削れない。。。。と言うことで今回は中途半端ですがこのプラグインとはさようならして他の方法考えようかなぁ。まぁなんかあるでしょ多分。
と、思ったら、、、、、、、
やからしてた！正常に動作してたけど、どうも投稿画面の「ビジュアル」からじゃ確認できないみたい。あぁできなかったなぁとブログ確認してみたらなぜかできてました。そしてここで大きな勘違いをしていることに気づきました。。。。私<pre>タグってなんか四角で囲まれるし区切りにいいなぁって使ってたんですけど。そもそも使い方間違ってるっぽいwwwwwどうしてこうなったwwwwwwwプラグインは一旦無効化して今までの記事の内容修正だなぁ、、、、、これはひどい。。。。なんのためのテスト環境だよぉ。。。。と絶望しましたw
さらに追記（タグを変換したのは正解でしたが、、、、）
全投稿の区切りを<pre>から<h３>に修正しました！これでちゃんとできるはず。プラグイン有効化に戻して。再度チャレンジ！！！
悲しいことにうまく動作してないみたい
どうもCocoonと相性が悪いのか私の設定が悪いのわかりませんが、「Crayon Syntax Highlighte」を使うとソース内の半角スペースが全て削除されて見えるみたいです。また、枠の表示も正しくできてないみたいでスクロールなんかも全然できなかったです。
それでもやっぱりCocoonはすごかった
どうにも諦めきれなかったのでいろいろ探してみたら、、、、Cocoonのデフォルトの設定を変更することでソースコードにハイライトを入れることができることが判明！！！！素晴らしい。さっそく設定してみることに！！！！
1.Cocoonの設定
2.コードタブ
3.「ソースコードをハイライト表示」にチェックを入れる。「ハイライトスタイル」をお好みのスタイルに変更、私の場合は「github」にしてみました
この記事の趣旨とは異なりますが、なんとかできました
#include <iostream.h>
int main() {
cout << "Hello C++ World" << endl;
return 0;
}
コメント