読者です 読者をやめる 読者になる 読者になる

おうちでお仕事(したい)!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!日々の勉強記録と行動記録をしていきます。目標は2016年中にタイトルの(したい)をとること!

結婚を機に、在宅ワークでWEBデザインの仕事をするべく一念発起!
日々の勉強記録と行動記録をしていきます。
目標は2016年中にタイトルの(したい)をとること!

はてなブログでソースコードをカラー表記する方法

f:id:yaike_webnohito:20151106210530p:plain
先程初めてカスタマイズ系の記事をアップした時に、
ソースコードの表示が思うように反映されず四苦八苦したので、
ちょこっと覚え書きしておきます!

表記モードを変更する

「見たまま編集モード」や「html編集」では、残念ながらソースコードをうまく表示することはできないみたいです。
本文と同じ形で表示されてしまいます。
「あの四角で囲まれてて、色も分けて表示されるやつがいいのに……!」
と、検索検索。
どう検索すれば出るのかわからずここでも四苦八苦しましたが割愛。

ダッシュボード<設定<編集モード
と進み、編集モードの中にある「はてな記法モード」にチェックすれば、
ソースコードカラー表記の第一段階クリア!

スーパーpre記法で書き込む

スーパーpre記法」とやらがまだよくわからないのですが、
とりあえずコードの前後を『>|言語名|』と『||<』で挟めばOKとのことです!
このとき、『>|コード名|』と『||<』は必ずそれぞれ行頭に書くようにしてください。

 >|css|
  #blog-title-inner {
   background-size: contain;
 }
 |

これが、

 #blog-title-inner { 
   background-size: contain; 
} 

こんな感じで思うように表示されました!!


今回参考にさせていただいたのはこちら↓



はてな記法もいろいろあるようです。
はてな記法一覧 - はてなダイアリーのヘルプ
便利なものを探し出して覚えるようにしようと思います~
また覚え書きするかもしれません!

おまけ

ちなみにアイキャッチ画像はこちらで作成しました。
Instacode
ソースコードを入れるだけで簡単にかっこいい画像が作れて面白かったです~!