Markdown記法の一覧

2024/09/24

2024/11/16
5 min

Tech

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

## フロントマター

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

フロントマターの例

---
isDraft: false   # require [true or false]
title: Markdown記法の一覧   # require
category: tech   # require [tech or idea]
tags: [html, css, js]   # optional
description: このブログで利用可能なMarkdown記法をまとめています。 # optional
publishDate: yyyy-MM-ddTHH:mm:ss+09:00   # require
updateDate: yyyy-MM-ddTHH:mm:ss+09:00   # optional
relatedArticles: [renewal-note]   # optional
---

CLIについて

CLIを使用すると、isDraft, publishDate および updateDate の内容を変更することができます。

記事の追加

# Markdownを生成し、isDraft, publishDate, updateDate を初期化します
$ siwl -f <filename> add

記事の公開

# isDraft = false, updateDate を更新します
$ siwl -f <filename> pub

記事を下書きに戻す

# isDraft = true
$ siwl -f <filename> dft

## 見出し

見出し

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

利用できる見出しについて

<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]。

<!--footnote-->
[^1]: ここに脚注がきます。

これは脚注です¹。

## 区切り線

区切り線

---

## リンク

### むき出しのリンク

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

むき出しのリンク

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

<!--or-->

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

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

覚え書きです。利用した技術についてまとめます。

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/ に格納することを推奨します。キャプションをつける場合は1行空けます。

画像

![プロフィール画像](./images/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

### タイトル付きコードブロック

タイトルは必須です。

タイトル付きコードブロック

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

const displayTextType = (text: string) => {
  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");
}

## 引用

### 通常の引用

通常の引用

> 通常の引用

通常の引用

### コールアウト

title は省略可能です。

コールアウト

> [!type] title
>
> text text text

利用可能な type

type	description	color
`quote`	強調したい引用	default
`note`	補足	default
`info`	付帯する情報	blue
`important`	重要事項	violet
`warn`	警告	amber
`alert`	強い警告	red
`tip`	小ネタ	green
`math`	数学の公式や定理	orange

Quote

text text text

Note

text text text

Info

text text text

Important

text text text

Warn

text text text

Alert

text text text

Tip

text text text

Math

text text text

## 数式

$\KaTeX$ を使用しています。

Supported Functions · KaTeX

This is a list of TeX functions supported by KaTeX. It is sorted into logical groups.

katex.org

Support Table · KaTeX

This is a list of TeX functions, sorted alphabetically. This list includes functions that KaTeX supports and some that it doesn't support. There is a similar page, with functions [sorted by type](/docs/supported.html).

katex.org

### インライン数式

インライン

$ f(x) = e^x $ はインライン数式です。

$f(x) = e^x$ はインライン数式です。

### 別行立て数式

別行立て数式

$$
f(t) = \sum_{n = 0}^\infty \frac{t^n}{n!} \left. \frac{d^{n}f(t)}{dt^n}\right|_{t = 0}
$$

f(t) = \sum_{n = 0}^\infty \frac{t^n}{n!} \left. \frac{d^{n}f(t)}{dt^n}\right|_{t = 0}

## 埋め込み

URLが独立した行にある場合、かつURLの形式が以下に示す例の通りである場合に変換されます。

### YouTube

YouTubeの埋め込み

<!--https://www.youtube.com/watch?v=<query>-->
https://www.youtube.com/watch?v=sTxY93pA1zI

### Twitter (X)

Twitterの埋め込み

<!--https://x.com/<user>/status/<query>-->
https://x.com/astrodotbuild/status/1844403385375862824

<!-- or -->

<!--https://twitter.com/<user>/status/<query>-->
https://twitter.com/astrodotbuild/status/1844403385375862824

Astro v4.16.0 is here with concurrent builds.

Check out the toggle if you (con)currently have the need for speed. Thanks chaegumi 🏎️ pic.twitter.com/SkerULveAI↗
— Astro (@astrodotbuild) 2024年10月10日↗

### GitHub Gist

Gist

<!--https://gist.github.com/<user>/<query>-->
https://gist.github.com/s-inoue0108/6716e31de586f9f48fce1dbd0ea33899

## ZennのMarkdown記法

ZennのMarkdown記法一覧

zenn.dev

#### 脚注

ここに脚注がきます。 ↩

Tech

Astro

Solid

TypeScript

Tailwind CSS

Astro, SolidJS で個人ブログを制作しました

2024/10/05

12 min

DJプレイリストから動画制作用のアセットを生成するツールを作ってみた

Markdown記法の一覧

Contents

## フロントマター

## 見出し

## リスト

### 列挙

### 番号付き

## インラインスタイル

### 強調

### 取り消し線

### イタリック

## 文末脚注

## 区切り線

## リンク

### むき出しのリンク

### インラインリンク

## 画像

## 表

## コード

### インラインコード

### タイトル付きコードブロック

## 引用

### 通常の引用

### コールアウト

## 数式

### インライン数式

### 別行立て数式

## 埋め込み

### YouTube

### Twitter (X)

### GitHub Gist

## ZennのMarkdown記法

#### 脚注

Astro, SolidJS で個人ブログを制作しました

Share

Share

Markdown記法の一覧

Contents

## フロントマター

## 見出し

## リスト

### 列挙

### 番号付き

## インラインスタイル

### 強調

### 取り消し線

### イタリック

## 文末脚注

## 区切り線

## リンク

### むき出しのリンク

### インラインリンク

## 画像

## 表

## コード

### インラインコード

### タイトル付きコードブロック

## 引用

### 通常の引用

### コールアウト

## 数式

### インライン数式

### 別行立て数式

## 埋め込み

### YouTube

### Twitter (X)

### GitHub Gist

## ZennのMarkdown記法

#### 脚注

関連記事

Astro, SolidJS で個人ブログを制作しました

Share