Markdown 記法の一覧

2024/09/24

2025/01/17
9 min

このブログで利用可能な Markdown 記法をまとめています。

## フロントマター

記事のメタデータを管理します。Markdown のトップに必ず記載する必要があります。

フロントマターの例

---
isDraft: false                         # required [true|false]
isLimited: false                       # required [true|false]
title: ~~~                             # required
category: tech                         # required [tech|idea]
tags: [html, css, js]                  # optional
description: ~~~                       # optional
publishDate: yyyy-MM-ddTHH:mm:ss+09:00 # required
updateDate: yyyy-MM-ddTHH:mm:ss+09:00  # optional
relatedArticles: [~~~]                 # optional
---

CLIについて

CLI を使用したコンテンツ管理を利用できます。

CLI

yarn siwl <action> -option <arg>

詳しくはこちら↗

## 見出し

見出し

## レベル1
### レベル2
#### レベル3

見出しのレベルについて

見出しは <h2> から始めます。
<h1> , <h5> , <h6> はスタイルを定義してありますが、使用は非推奨です。

## リスト

### 列挙

ネストを利用できます。

列挙

- ul-1
- ul-2
  - ul-2-1
  - ul-2-2

ul-1
ul-2
- ul-2-1
- ul-2-2

### 番号付き

ネストを利用できます。

番号付き

1. ol-1
2. ol-2
3. 1. ol-3-1
   2. ol-3-2

ol-1
ol-2
1. ol-3-1
2. ol-3-2

## インラインスタイル

### 強調

強調

これは **強調** されます。

これは強調されます。

### 取り消し線

取り消し線

~取り消し線~ がつきます。

<!--or-->

~~取り消し線~~ がつきます。

~~取り消し線~~ がつきます。

### イタリック

イタリック

これは *イタリック* になります。

これは イタリック になります。

## 脚注

脚注

これは脚注です[^1]。

<!--脚注はレベル3の見出しになります-->
[^1]: ここに脚注がきます。

これは脚注です¹。

## 区切り線

区切り線

-----

## リンク

### むき出しのリンク

URLが独立した行にある場合にのみ変換されます。

むき出しのリンク

https://siwl.dev/blog/articles/renewal-note

<!--or-->

<https://siwl.dev/blog/articles/renewal-note>

Astro, SolidJS で個人ブログを制作しました | SIWL.dev

Astro, SolidJS を使用してブログサイトをリニューアルしました。このエントリでは、使用した技術やライブラリについてまとめます。

siwl.dev

### インラインリンク

インラインリンク

[リニューアルノート](https://siwl.dev/blog/articles/renewal-note) はインラインリンクです。

https://siwl.dev/blog/articles/renewal-note はインラインリンクです。

[相対パスによるリンク](/blog/articles/renewal-note) は内部リンクです。

リニューアルノート↗ はインラインリンクです。

https://siwl.dev/blog/articles/renewal-note↗ はインラインリンクです。

相対パスによるリンクは内部リンクです。

## 画像

画像ファイルは ./images/[slug]/ に格納することを推奨します。キャプションをつける場合は1行空けます。

画像

![プロフィール画像](./images/markdown-syntax-guide/profile-image.jpg)

*[!image] 画像の例*

画像の例

## 表

キャプションをつける場合は1行空けます。

表

*[!table] テーブルの例*

| a     | b     |     c |   d   |
| ----- | :---- | ----: | :---: |
| aaaaa | bbbbb | ccccc | ddddd |
| aaaa  | bbbb  |  cccc | dddd  |
| aaa   | bbb   |   ccc |  ddd  |

テーブルの例

a	b	c	d
aaaaa	bbbbb	ccccc	ddddd
aaaa	bbbb	cccc	dddd
aaa	bbb	ccc	ddd

## コード

シンタックスハイライトには Shiki を使用しています。

Shiki

A beautiful yet powerful syntax highlighter

shiki.matsu.io

### インラインコード

インラインコード

`inline code` はインラインコードです。

inline code はインラインコードです。

### コードブロック

タイトルは任意です。

コードブロック

```js
const text = "Hello, world!";

const displayTextType = (text) => {
  if (typeof text !== "string") return;
  console.log("text type is string");
}
```

```ts:TypeScriptによる例
const text: string = "Hello, world!";

const displayTextType = (text: string) => {
  if (typeof text !== "string") return;
  console.log("text type is string");
}
```

const text = "Hello, world!";

const displayTextType = (text) => {
  if (typeof text !== "string") return;
  console.log("text type is string");
}

TypeScriptによる例

const text: string = "Hello, world!";

const displayTextType = (text: string) => {
  if (typeof text !== "string") return;
  console.log("text type is string");
}

## 引用

### 引用

引用

> ここは引用ブロックです。
> 
> ```python:Python
> x = 1
> y = 2
>
> def add(x, y):
>   return x + y
> 
> print(add(x, y))
> ```
> 
> `inline code` や $inline math$ も使えます。

ここは引用ブロックです。
Python
x = 1
y = 2

def add(x, y):
  return x + y

print(add(x, y))
inline code や $inline math$ も使えます。

### コールアウト

title は省略可能です。ヘッダと文章部の間は1行空けます。:fold を指定するとデフォルトで折りたたまれて表示されます。

コールアウト

> [!type:fold] title
>
> これはコールアウトです。
> 
> ```python:Python
> x = 1
> y = 2
>
> def add(x, y):
>   return x + y
> 
> print(add(x, y))
> ```
> 
> `inline code` や $inline math$ も使えます。

type は以下から選択できます。

利用可能な type

type	description	color
`quote`	引用	default
`note`	覚書	default
`remark`	備考	default
`info`	情報	blue
`todo`	手順	blue
`important`	重要事項	violet
`example`	例	violet
`warn`	警告	amber
`question`	疑問	amber
`alert`	強い警告	red
`attention`	注意事項	red
`tip`	小ネタ	green
`break`	閑話休題	green

Quote

これはコールアウトです。

Python

x = 1
y = 2

def add(x, y):
  return x + y

print(add(x, y))