## フロントマター
記事のメタデータを管理します。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
---
## 見出し
## レベル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
-
- ol-3-1
- ol-3-2
## インラインスタイル
### 強調
これは **強調** されます。
これは 強調 されます。
### 取り消し線
~取り消し線~ がつきます。
<!--or-->
~~取り消し線~~ がつきます。
取り消し線 がつきます。
### イタリック
これは *イタリック* になります。
これは イタリック になります。
## 脚注
これは脚注です[^1]。
<!--脚注はレベル3の見出しになります-->
[^1]: ここに脚注がきます。
これは脚注です1。
## 区切り線
-----
## リンク
### むき出しのリンク
URLが独立した行にある場合にのみ変換されます。
https://siwl.dev/blog/articles/renewal-note
<!--or-->
<https://siwl.dev/blog/articles/renewal-note>
### インラインリンク
[リニューアルノート](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 を使用しています。
### インラインコード
`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");
}
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 | 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
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
## 数式
を使用しています。
### インライン数式
$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}
$$
## 埋め込み
いくつかの Web サービスは oEmbed API をはじめとする外部 API を利用した特殊な埋め込みに対応しています。
サービス名 | サービス形態 | 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) | SNS | https://x.com |
Misskey | SNS | https://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
Astro v4.16.0 is here with concurrent builds.
— Astro (@astrodotbuild) 2024年10月10日↗
Check out the toggle if you (con)currently have the need for speed. Thanks chaegumi 🏎️ pic.twitter.com/SkerULveAI↗
### 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
#### 脚注
-
ここに脚注がきます。 ↩