マークダウン記法 markdown

 静的サイトジェネレーター Hugoでブログ/固定ページの記事を書く際、マークダウン記法なるものを覚える必要性が出てきた。

 時折READMEなどで見かける.mdという拡張子のファイルがマークダウン記法で書かれたもの。

 覚えてしまえばHTMLタグより楽とのことだが、ブラウザで変換してくれるわけではないので、これまで使ってこなかった。

 Hugoの場合、ビルド(hugo -D)でHTMLファイルに変換される。

markdown - HTML 

markdown対応するHTMLタグ
改行半角スペース2つ<br>
段落空行<p> </p>
見出し1#<h1> </h1>
見出し2##<h2> </h2>
見出し3###<h3> </h3>
見出し4####<h4> </h4>
見出し5#####<h5> </h5>
見出し6######<h6> </h6>
強調・太字__ __、** **<b> </b>、<strong> </strong>
強調・イタリック_ _、* *<i> </i>、<em> </em>
取り消し線~~ ~~<s> </s>
罫線—、___、***<hr>
リスト-、*、+、<ul><li> </li></ul>
リスト(番号)1.、2.、3.、<ol><li> </li></ol>
引用><blockquote> </blockquote>

 補足すると、リスト listは-(ハイフン)、*(アスタリスク)、+(プラス)のどれを使っても同じ。
 タブ TABで字下げすると入れ子状になる。

 表 tableもマークダウンで書ける。

  |列1|列2|列3|
  |---|---|---|
  |a|bb|ccc|
  |xxx|yy|z|

 ここで初めて気づいた。
 あっ、WordPressもマークダウンで書けるのか……と。
  ※ WordPress5.0以降

 注釈は便利そう。

注釈1[^1]
[^1]: これは注釈

 リンクは明らかにHTMLタグより楽。

markdown対応するHTMLタグ
リンク[text](https://……)<a href = “https://……“>text</a>
画像挿入![text](…….jpg)<img src = “…….jpg” alt = “text“>
コード``` ```<code> </code>

 以上、こちらのページで表示確認。
  ※ 見出しのサイズ、文字色などは、テキトーにいじったCSSが反映されているだけで変更可能。

 HTMLタグ同様使っているうちに徐々に覚えられる。

 だが、_(アンダースコア)の後に半角スペースを入れないと変換されなかったり、半角スペースを入れたら余計なスペースができたり、イタリックやリストなど思ったように表示されなかったり……。

 慣れるまでは逐一確かめながら書く必要がある。

ICT
スポンサーリンク
ふシゼン
タイトルとURLをコピーしました