はてなブログでシンタックスハイライトを使う！！

皆様、こんばんは～

中村麗乃さんの動画配信に興奮気味のNaaaOです。

さて、

今日はシンタックスハイライトについて書きたいなと。

シンタックスハイライトとは

簡単に言ってしまえば

ソースコードを色付けして表示する機能のこと

読み手に明確に伝わるように、

言語ごとの構文に応じた色付けが表示されるの～

こんな感じで

class Nogi

   def member(reno)

       puts "今日のメンバーは"+reno+"だよ"

     end

 end

今回は、これをはてなブログでシンタックスハイライトをどう書いていくのかを備忘録として書いときます～～

はてなブログでシンタックスハイライトを使う

 はてなブログに３つある編集モードのうち「はてな記法」と「Markdown」には既にシンタックスハイライトが用意されているんだとか

はてな記法の場合

・「>||」と「||<」の間にコードを書く

・言語指定する場合は「 | 」の間に書く

 こんな感じ

>|ruby|

class Nogi

   def member(reno)

       puts "今日のメンバーは"+reno+"だよ"

     end

 end

||<

これが

class Nogi

   def member(asuka)

       puts "今日のメンバーは"+asuka+"だよ"

     end

 end

こうなる

 
Markdownの場合

 
'''ruby
class Nogi

   def member(reno)

       puts "今日のメンバーは"+reno+"だよ"

     end

''' end
 

これが

class Nogi

   def member(miZuki)

       puts "今日のメンバーは"+mizuki+"だよ"

     end

 end

こうなる。

まぁ要領は同じですね～～

みたままの場合

誰でもすぐにできる方法は

・リアルタイムプレビューを使い、プレビューされたものをコピーする

らしいです。

リアルタイムプレビューとは、その場で書きながらどのように表示されているかを見ることができる機能です。

「はてな記法」や「Markdown」で使用できます。

下書きで「シンタックスハイライト用」とし、載せたいコードを書いてそれをコピー、あとは張り付けるだけです！！

こんな感じ

コピーするだけなんで簡単です！

今回、参考にさせてもらった記事はこちらです。

jsstudy.hatenablog.com

www.dreamark.tokyo

最後に

僕は、基本「みたまま」で書いてるので今回のを採用していきたいなと思っています～。

ただ、

何回も下書きに遷移するのはめんどいので、

一回書いたら、

あとは「HTML編集」でコピーしちゃおうかなとも思ってます。

こんな感じで

コードが少なかったり、ある程度、HTML・CSSが分かっている人だったらそっちのほうが速いのかなと思います！ 

さぁ、これからばんばん書いていくぞ～～～

主にrailsについて書いていきたいなと思います！

だいたい備忘録ですが！！

ではでは。