はてなブログのMarkdown記法のTips

はてなブログのMarkdown記法はだいたい直感的で特に苦労することもないのですが、たまにわからないものがありますので、メモっていきます。

Markdown記法のリスト内にコードブロック挿入

結論、Markdown記法やはてな記法では、Markdown記法のリスト内でコードブロックを書くことはできません。
しょうがないので、HTMLのpreタグで記載します。

OKパターン：HTMLのpreタグを使います。シンタックス・ハイライトはできません。

このように書くと、

* 項目１
* 項目２
  <pre>
  hoge
  fuga
  </pre>

以下のようになります。

• 項目１
• 項目２

  hoge
  fuga
  

NGパターン：Markdown記法のコードブロック

このように書くと、

* 項目１
* 項目２
  ```
  hoge
  fuga
  ```

以下のように、1行コード扱いになってしまいます。

• 項目１
• 項目２
  hoge fuga

Markdown記法のリスト内に表挿入（テーブル挿入）

コードブロックと同様に残念ながら通常のMarkdown記法の表は挿入できません。
しょうがないので、HTMLのtableタグで記載します。

OKパターン：HTMLのtableタグを使います。

このように書くと、

* 項目１
* 項目２
  <table>
    <tr>
      <th align="left">header1</th>
      <th align="left">header2</th>
      <th align="left">header3</th>
    </tr>
    <tr>
      <td align="left">item1</td>
      <td align="left">item2</td>
      <td align="left">item3</td>
    </th>
  </table>

以下のようになります。

• 項目１
• 項目２
  

  header1	header2	header3
  item1	item2	item3

NGパターン：Markdown記法の表

このように書くと、

* 項目１
* 項目２
  |header1|header2|header2|
  |:-|:-:|-:|
  |item1|item2|item3|

以下のように、リスト項目の続き扱いになります。

• 項目１
• 項目２
  |header1|header2|header2| |:-|:-:|-:| |item1|item2|item3|

画像の大きさを変更する方法

• 普通に画像を挿入する

  [f:id:hogefuga:20187531126142p:plain]

• サイズを指定して挿入する

  [f:id:hogefuga:20187531126142p:plain:w200]
  [f:id:hogefuga:20187531126142p:plain:h200]

  • w200を指定すると、画像エレメントにstyle="width:200px"というスタイルが追加されて、横幅が200pxになる。
  • h200を指定すると、画像エレメントにstyle="height:200px"というスタイルが追加されて、縦幅が200pxになる。