Markdownの記法についてまとめます.

画面上部の設定は, テーマごとに大きく異なるので省きますが,

draft: true

にしておくと, 下書き状態になるのでページに反映されないので, 書き出したのはいいけど完成しなかったりしたページは下書き状態にしておくと良いと思います.

また, デフォルトだとページの要約(トップページの記事リストに表示される)が長くなりすぎてしまう問題が有るので,

Hugoで日本語ページの要約長を指定する を参考に要約長も指定しながら記事を書くことをおすすめします.

構成

見出し

HTMLで言うh1タグやh2タグのような見出しは, #を並べて表現します.

# h1タグ
## h2タグ

h1タグ

h2タグ

通常の文章と, 強調表現, 取り消し線

通常の文章は, 普通に文章を書いていくだけです.

改行2つにpタグの終わりが対応するので, Markdown上で1行改行するだけだと実際には改行されません.

強調したい文字は, * あるいは ** で囲います.

~~ で囲うことで, 取り消し線も扱えます.

こんにちは!
よろしくおねがいします!!

こんにちは!

よろしくおねがいします!!

*強調1*

**強調2**

~~取り消し線~~

こんにちは! よろしくおねがいします!!

こんにちは!

よろしくおねがいします!!

強調1

強調2

取り消し線

リストと番号付きリスト

- リスト1
- リスト2
- リスト3

1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
  • リスト1
  • リスト2
  • リスト3
  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3

番号付きリストは, 1, 2, 3と書いていっても構いませんが, 1を連ねても表示はきちんと1ずつ増えていきます.

あとから挿入するかもしれないので, 僕は好んで1を連ねて書くことが多いです.

テーブル

| 中央揃え | 左揃え | 右揃え |
| :---: | :--- | ---: |
| 太郎君 | 20歳 | 男 |
| 花子さん | 18歳 | 女 |
中央揃え 左揃え 右揃え
太郎君 20歳
花子さん 18歳

テーマ的に少し見づらいですが, 2行目で右揃え, 左揃えなどを 設定していて, それが反映されているのが分かると思います.

コードの挿入

バッククォート(`)を3個連ねたもので囲った範囲にコードを貼り付けます.

その言語に対応していればハイライト等もされるはず.

``` c
#include <stdio.h>

int main(){
    printf("Hello World\n");
    return 0;
}
    ```
#include <stdio.h>

int main(){
    printf("Hello World\n");
    return 0;
}

引用表現

> Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。

水平線

めっちゃ腹減った.

---

ところで, ...

めっちゃ腹減った.


ところで, …

リンク

まだ見てない方は
[こちら](https://www.hogehoge.com/index.html)

まだ見てない方は こちら

画像の添付

存在しない場合は代替テキストが表示される

![代替テキスト](https:www.hogehoge.com/index.png)
![代替テキスト](https://2.bp.blogspot.com/-ijRwyI79zDk/XJB44ea988I/AAAAAAABR6k/Z19GsR7c8nkDfuCBuHC_P95mLYOv8a2KACLcBGAs/s800/family_shinseki_dukiai_nigate_woman.png)

存在しない場合は代替テキストが表示される

代替テキスト 代替テキスト

自前でアップロードした画像を乗せるには,

TestSite/content/ をルートと考えて画像ファイルの絶対パスを記述すればOK.

<!-- content/images/test.pngに画像ファイルを設置 -->
![代替テキスト](/images/test.png)

HTMLの埋め込み

Markdown上では, 基本的にHTMLを直書きすることも可能です.

ですので, こういうの書きたいなってときに対応した記法がなかったり, より凝ったデザインで書きたいときは HTMLで書いちゃえばOKです.

てことで, HTMLの力を借りた上でよく使う記法を.

ページ内リンク

[ジャンプします](#jump)

<a id="jump"></a>

#### ジャンプ先

hogehoge

ジャンプします

色指定文字

<font color="Red">赤で書いてるぞ</font>

赤で書いてるぞ

Shortcode

Hugoのテーマ側で定義されたショートコードを使うこともできます.

どんなShortcodeがあるかはテーマ毎に違いますが, 例えばこのサイトで使っている hugo-nuo では, 動画を埋め込むショートコードを提供していて, 画像同様に動画ファイルをcontent以下に設置すれば,

※ Themeを変えたので, 削除しました(ビルドエラーのため…).

このように動画を貼り付けられます(どうも, バッククォートでのコード設置より優先してshortcodeがhtmlに置換されてしまうっぽいのでサンプルが出せません).

Shortcodeは,

TestSite/themes/<テーマ>/layouts/shortcodes/

にhtml形式で入っていて, 開くと使用例が書いてありますので, それを参考に利用できるはずです(テーマによってはexampleSiteの中にShortcodesの説明ページが入ってるかも).

ジャンプ先

hogehoge

戻る