Markdown 記法の一覧

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

    Loading...

## フロントマター

記事のメタデータを管理します。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
  1. ol-1
  2. ol-2
    1. ol-3-1
    2. ol-3-2

## インラインスタイル

### 強調

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

これは 強調 されます。

### 取り消し線

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

<!--or-->

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

取り消し線 がつきます。

### イタリック

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

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

## 脚注

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

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

これは脚注です1

## 区切り線

区切り線
-----

## リンク

### むき出しのリンク

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

むき出しのリンク
https://siwl.dev/blog/articles/renewal-note

<!--or-->

<https://siwl.dev/blog/articles/renewal-note>
Astro, SolidJS で個人ブログを制作しました | SIWL.dev
Astro, SolidJS を使用してブログサイトをリニューアルしました。このエントリでは、使用した技術やライブラリについてまとめます。
Astro, SolidJS で個人ブログを制作しました | SIWL.dev favicon 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  |

テーブルの例

abcd
aaaaabbbbbcccccddddd
aaaabbbbccccdddd
aaabbbcccddd

## コード

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

Shiki
A beautiful yet powerful syntax highlighter
Shiki favicon shiki.matsu.io
Shiki

### インラインコード

インラインコード
`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");
}

## 引用

### 通常の引用

通常の引用
> 通常の引用

通常の引用

### コールアウト

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

コールアウト
> [!type:fold] title
>
> text text text

利用可能な type

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

text text text

Note

text text text

Remark

text text text

Info

text text text

Todo

text text text

Important

text text text

Example

text text text

Warn

text text text

Question

text text text

Alert

text text text

Attention

text text text

Tip

text text text

Break

text text text

## 数式

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

Supported Functions · KaTeX
This is a list of TeX functions supported by KaTeX. It is sorted into logical groups.
Supported Functions · KaTeX favicon katex.org
Supported Functions · KaTeX
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).
Support Table · KaTeX favicon katex.org
Support Table · KaTeX

### インライン数式

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

f(x)=exf(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)=n=0tnn!dnf(t)dtnt=0f(t) = \sum_{n = 0}^\infty \frac{t^n}{n!} \left. \frac{d^{n}f(t)}{dt^n}\right|_{t = 0}

## 埋め込み

いくつかの Web サービスは oEmbed API をはじめとする外部 API を利用した特殊な埋め込みに対応しています。

対応済みの Web サービス

サービス名サービス形態URL
GitHub Gistソースコード共有https://gist.github.com
CodePenソースコード共有https://codepen.io
Speaker Deckスライド共有https://speakerdeck.com
Docswellスライド共有https://docswell.com
Spotify音楽配信https://open.spotify.com
SoundCloud音楽配信https://soundcloud.com
YouTube動画配信https://youtube.com
Twitter (X)SNShttps://x.com
MisskeySNShttps://misskey.io ほか
Wikipedia百科事典https://ja.wikipedia.org
noteブログhttps://note.com
Hatena Blogブログhttps://hatenablog.blog

### GitHub Gist

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

### CodePen

<!--https://codepen.io/<user>/pen/<query>-->
https://codepen.io/s-inoue0108/pen/PwYJOyv

### Speaker Deck

<!--https://speakerdeck.com/<user>/<query>-->
https://speakerdeck.com/panda_program/tips-for-indie-hackers-5e33891f-2054-4044-87da-623799f8d8bd

### Docswell

<!--https://docswell.com/s/<user>/<query>-->
https://docswell.com/s/ku-suke/LK7J5V-hello-docswell

### Spotify

<!--https://open.spotify.com/<locale?>/<category>/<query>-->
https://open.spotify.com/intl-ja/track/6Ug3vnQRk30sUrOvDWstgI
https://open.spotify.com/artist/5CxWZpW3bKbMiOC6jJ5r7i

### SoundCloud

<!--https://soundcloud.com/<user>/<query>-->
https://soundcloud.com/porter-robinson/porter-robinson-madeon-shelter-5

### YouTube

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

### Twitter (X)

<!--https://[x|twitter].com/<user>/status/<query>-->
https://x.com/astrodotbuild/status/1844403385375862824
https://twitter.com/astrodotbuild/status/1844403385375862824

### Misskey

<!--@{misskey}(id)-->
@{misskey:host}(a2r05zxp6u)

<!--":host" で参照するサーバーを設定できます(省略可)-->
<!--デフォルトは sushi.ski (https://sushi.ski) です-->

### Wikipedia

<!--@{wiki|wikimedia|wikipedia}(単語)-->
@{wiki:lang}(プログラミング)

<!--":lang" をつけるとそのロケールで検索します(省略可)-->
<!--デフォルトは ja(https://ja.wikipedia.org)です-->

プログラミング
プログラミング

プログラミング とは、コンピューター上で、ある特定のコンピューティングの結果を得るために、実行可能なコンピュータープログラムを作成することである。

Wikipedia - プログラミング↗ より引用

### note

<!--https://note.com/<user>/n/<query>-->
https://note.com/notemag/n/na07e3bae0d15

### Hatena Blog

<!--https://<user>.hatenablog.com/entry/<yyyy>/<mm>/<dd>/<query>-->
https://staff.hatenablog.com/entry/2014/09/03/153938

#### 脚注

  1. ここに脚注がきます。

Discussions