WEB配色からCSSクラスタのまとめ方まで。困った時に知りたい時のあれやそれ。Q&Aページを作りました。はてなブログの見たままモードでシンタックスハイライトを使う方法2016-07-10はてなブログの見たままモードでシンタックスハイライトを使う方法はてなブログ今回から普通の記事に戻ります。題材的にはかなり一部の人向けになりますが、はてなブログの見たままモードでシンタックスハイライトを使う方法を紹介していきます。使う方法といいますか、jQueryなどは使わずに、かなり原始的な方法なのですが、はてな記法ではなく、見たままモードでもシンタックスハイライトを使いたい方の参考になるのではと記事にさせていただきます。シンタックスハイライトとははてなブログで使うには?シンタックスハイライトはこんな風に表示されます見たままモードで使ってみましょう【追記】もっと簡単にシンタックスハイライトを貼り付ける方法シンタックスハイライトとはまずシンタックスハイライトとは何か?これはコードをブログなどに表示する時にコードの内容に分けて色を分けてくれる機能です。カスタマイズのコピペコードなんかを表示する時に使ったり、プログラマの方が自分の書いたプログラムをブログに紹介する時に使ったりします。はてなブログで使うには?はてなブログでシンタックスハイライトを使うには、はてな記法で書く必要があります。>|ファイルタイプ|ここにコードを書く||<はてな記法モードでこんな風に書くと各プログラムに対応した部分をカラーで表示してくれます。はてなブログで対応しているシンタックスハイライトの種類は以下で確認できます。help.hatenablog.comシンタックスハイライトはこんな風に表示されますまずはシンタックスハイライトがどのように表示されるのかを、分かりやすいCSSで見てみましょう。#ccc;このように、セレクタ(青)、プロパティ(緑)、値(赤)に分わかれて、色がついてます。これで書いている方も見ている方も分かりやすい。いうのがシンタックスハイライトの良さです。この記事は見たままモードで書いてます。上のようにシンタックスハイライトは使えています。ソースコードを貼り付けるために、はてな記法と見たままモードを切り替えるのって以外に面倒なんですよね。GitHubを使ったりするのですが、外部読み込みですし、沢山載せると重いです。はてなではGistを貼り付ける機能もあるのですが、やはり重いよりも軽くしたいものです。同じように思う方もいらっしゃるでしょう。それでは、なぜ見たままモードでシンタックスハイライトを使えるのかを解説していきます。見たままモードで使ってみましょうはてな記法で書かれた記事は、最終的にブログで表示するためにHTMLに変換されます。ここで勘の言い方は分かったかも知れませんね。はてな記法で書かれたシンタックスハイライトはどんなHTML要素に変換をされるかというと、「pre」を使用してHTMLに変換されています。ちなみに、見たままモードで「pre」を使ってソースコードを書くと、下のコードのような表示になります。#ccc;はてな記法で書いたソースコードはHTML化される時に、クラス名が指定されています。それで各部分の色で表示される仕組みのようです。同じように自分で各部分のセレクタの指定をしても良いのですが、それも面倒なので、変換されたHTMLをそのまま貼り付けます。これで見たままモードでもシンタックスハイライトを使えるようになります。ここまで説明してきてそれだけ?はい、それだけです。原始的な感じです(笑)でもそれだと、いちいちはてな記法と見たままモードに設定変更しないといけないんじゃ?それでは普通に書くのと同じでは?一度はてな記法で書いた記事は、見たままモードにしている時でも、はてな記法でしか編集が出来ません。1つの記事でもはてな記法で記事を作成し、下書きなどに入れておけば、いつでもソースコードをはてな記法で書き込めます。その記事でソースを表示して該当の部分だけを、見たままモードに貼り付けます。先ほど書いたCSSをHTMLで変換したものをそのまま見てみるとこんな感じです。それぞれにクラス名が指定されてます。class="synConstant">#ccc</span>;</pre>この状態のものを見たままモードで貼り付けると、そのままシンタックスハイライトが使えるようになります。最初からはてな記法で書けば良いというのもありますが、どうしても見たままモードでシンタックスハイライトを使いたいという方には参考になるのではないでしょうか。当記事のブックマークにすなばいじりのpsneさんから、上の方法の手間を省く方法を教えていただきました。PC+モダンブラウザでは、(リアルタイム)プレビューで表示された該当部分をそのままコピペできるので、もうひと手間減らせていい感じです。はてなブックマークその後、記事でもして説明してくれています。ありがとうございます。psn.hatenablog.jp私のブログの方でもその教えていただいた方法を追記させていただきます。はてな記法の場合、リアルタイムプレビューが使えます。そのプレビューされたものをコピーし(pre周りの枠も合わせて選択する感じで)それを見たままモードに貼り付けるという方法です。下にわかりやすいように画像にしておきました。これで、記事の保存やソースから探す手間が省けるので、かなり楽になります。そのようになるかなどさらに詳しい説明はpsneさんの記事をお読みください。psneさん教えていただきありがとうございました。あるので大変ですが、私もこれから今まで貼り付けたGistを全てこの方法に書き換えます。12:30Tweet関連記事2016-08-02【感謝御礼】ほしい物リストからある商品が届いたのでご紹介させていただきます。GuideBook...2016-07-21SNSフォローボタンをフラットにカスタマイズする方法を初心者にもわ分かりやすく解説します。今回は、はてなブログのフォローボタンをシンプルナフラットボ...2016-07-12CONTENTS×日本の夏。新色のリクエストを募集します。今回は私が公開しているはてなブログのテーマ「CONTENTS」のコ...2016-06-19【コピペで簡単】はてなブログ公式の関連記事モジュールを記事下に表示させる方法。CONTENTS×日本の夏。GuideBookを執筆しました。カスタマイズやデザイン、WEB系(SEOやWEBマーケティング)の事を書いていきます。GuideBookを執筆しました。はてなIDの取得からブログ解説。Proや独自ドメインへの変更の説明やSNSとの連携。カスタマイズに広告やアフィリエイトの設置まで。はてなブログの解説書。GuideBookThemeはてなブログでテーマをを公開しています。「主役はコンテンツ」をコンセプトに、おしゃれで機能的で、使いやすく見やすいテーマを作りました。グローバルメニューやフッターに加えリコメンド欄や対話式のCSSも適用済です。ヨメレバとカエレバも適用済。コンテンツ作りに集中していただけるようなテーマになっています。無料で使用出来るので、是非ご利用下さい。reserved.TOPへ引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。