【Minimalism】ソースコードの埋め込み方法

前回は見出しデザインのカスタマイズを行いました

everyday-study.hatenablog.jp

今後このブログでプログラムのソースコードを書く機会が多くなりそうなので、ソースコードの埋め込み方について調べてみました

準備

はてなブログでソースコードをきれいに埋め込むために、まずはブログの編集方法から設定する必要があります

はてな記法の設定

「ダッシュボード」⇒「設定」⇒「基本設定」⇒「編集モード」で
「はてな記法モード」にチェック

ソースコードの書き方

ソースコードは次のような書式で書く必要があります
>|言語名|
コード
|

ちなみに、>||と||<は必ず行頭になければいけません
半角スペース1つあるだけでうまく表示されません
設定可能な言語については次のはてなブログのヘルプを参照してください

help.hatenablog.com

正しく書けていれば、次のような表記になります

h3 {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

次のサンプルではあえて、行頭に半角スペースを入れているので書いたままに見えてしまいます
>|css|
h3 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
|