今回から普通の記事に戻ります。題材的にはかなり一部の人向けになりますが、はてなブログの見たままモードでシンタックスハイライトを使う方法を紹介していきます。
使う方法といいますか、ｊＱｕｅｒｙなどは使わずに、かなり原始的な方法なのですが、はてな記法ではなく、見たままモードでもシンタックスハイライトを使いたい方の参考になるのではと記事にさせていただきます。
シンタックスハイライトとは
まずシンタックスハイライトとは何か？これはコードをブログなどに表示する時にコードの内容に分けて色を分けてくれる機能です。カスタマイズのコピペコードなんかを表示する時に使ったり、プログラマの方が自分の書いたプログラムをブログに紹介する時に使ったりします。
はてなブログで使うには？
はてなブログでシンタックスハイライトを使うには、はてな記法で書く必要があります。
>|ファイルタイプ|ここにコードを書く||<
はてな記法モードでこんな風に書くと各プログラムに対応した部分をカラーで表示してくれます。
はてなブログで対応しているシンタックスハイライトの種類は以下で確認できます。
シンタックスハイライトはこんな風に表示されます
まずはシンタックスハイライトがどのように表示されるのかを、分かりやすいCSSで見てみましょう。
.hatena{ color:#fff; border:solid 1px #ccc;
このように、セレクタ（青）、プロパティ（緑）、値（赤）に分わかれて、色がついてます。これで書いている方も見ている方も分かりやすい。というのがシンタックスハイライトの良さです。
この記事は見たままモードで書いてます。しかし上のようにシンタックスハイライトは使えています。ソースコードを貼り付けるために、はてな記法と見たままモードを切り替えるのって以外に面倒なんですよね。だからGitHubを使ったりするのですが、外部読み込みですし、沢山載せると重いです。はてなではGistを貼り付ける機能もあるのですが、やはり重いよりも軽くしたいものです。同じように思う方もいらっしゃるでしょう。
それでは、なぜ見たままモードでシンタックスハイライトを使えるのかを解説していきます。
見たままモードで使ってみましょう
はてな記法で書かれた記事は、最終的にブログで表示するためにHTMLに変換されます。ここで勘の言い方は分かったかも知れませんね。
はてな記法で書かれたシンタックスハイライトはどんなHTML要素に変換をされるかというと、「pre」を使用してHTMLに変換されています。
ちなみに、見たままモードで「pre」を使ってソースコードを書くと、下のコードのような表示になります。これでも良いと言えば良いとのですが、どこか味気ないので、やはりカラフルに表示できればもっと良いですよね？
.hatena{
color:#fff;
border:solid 1px #ccc;
はてな記法で書いたソースコードはHTML化される時に、クラス名が指定されています。それで各部分の色で表示される仕組みのようです。同じように自分で各部分のセレクタの指定をしても良いのですが、それも面倒なので、変換されたHTMLをそのまま貼り付けます。これで見たままモードでもシンタックスハイライトを使えるようになります。
ここまで説明してきてそれだけ？はい、それだけです。かなり原始的な感じです（笑）
でもそれだと、いちいちはてな記法と見たままモードに設定変更しないといけないんじゃ？それでは普通に書くのと同じでは？
一度はてな記法で書いた記事は、見たままモードにしている時でも、はてな記法でしか編集が出来ません。なので、1つの記事でもはてな記法で記事を作成し、下書きなどに入れておけば、いつでもソースコードをはてな記法で書き込めます。その記事でソースを表示して該当の部分だけを、見たままモードに貼り付けます。
先ほど書いたCSSをHTMLで変換したものをそのまま見てみるとこんな感じです。それぞれにクラス名が指定されてます。
<pre class="code lang-css" data-lang="css" data-unlink=""><span class="synIdentifier">.hatena{</span> <span class="synType">color</span>:<span class="synConstant">#fff</span>; <span class="synType">border</span>:<span class="synConstant">solid</span> <span class="synConstant">1px</span> <span class="synConstant">#ccc</span>; </pre>
この状態のものを見たままモードで貼り付けると、そのままシンタックスハイライトが使えるようになります。最初からはてな記法で書けば良いというのもありますが、どうしても見たままモードでシンタックスハイライトを使いたいという方には参考になるのではないでしょうか。
【追記】もっと簡単にシンタックスハイライトを貼り付ける方法
当記事のブックマークにすなばいじりのpsneさんから、上の方法の手間を省く方法を教えていただきました。
PC+モダンブラウザでは、(リアルタイム)プレビューで表示された該当部分をそのままコピペできるので、もうひと手間減らせていい感じです。 - psne のコメント / はてなブックマーク
その後、記事でもして説明してくれています。ありがとうございます。
私のブログの方でもその教えていただいた方法を追記させていただきます。
はてな記法の場合、リアルタイムプレビューが使えます。そのプレビューされたものをコピーし（pre周りの枠も合わせて選択する感じで）それを見たままモードに貼り付けるという方法です。下にわかりやすいように画像にしておきました。これで、記事の保存やソースから探す手間が省けるので、かなり楽になります。何故そのようになるかなどさらに詳しい説明はpsneさんの記事をお読みください。
psneさん教えていただきありがとうございました。
結構あるので大変ですが、私もこれから今まで貼り付けたGistを全てこの方法に書き換えます。
以上、最後までお読みいただきありがとうございます！感謝
