マークダウン&Zenn記法の出力確認サンプル
Zennライブラリ 0.1.160 テスト
ZennのMarkdown記法のSpeaker Deckスライド埋め込みで、ページ番号を指定できるようになりました。以下のように記入することで指定したページをあらかじめ表示した状態にできます。
@[speakerdeck](4d38ba718577441bb8c97392c3cdb0cd)
@[speakerdeck](4d38ba718577441bb8c97392c3cdb0cd?slide=21)
1. 見出し
見出し1（H1）: 使わない
見出し2（H2）
見出し3（H3）
見出し4（H4）
2. テキスト装飾
太字
イタリック
取り消し線
インラインコード
3. 段落と改行
これは最初の段落です。
これは2つ目の段落です。上との間に空行があります。
または<br>HTMLタグを使うこともできます。
ここに→
←br つかう
4. リスト
箇条書き
- アイテム1
- アイテム2
- サブアイテム2.1
- サブアイテム2.2
- サブサブアイテム2.2.1
- アイテム3
別の記号も使えます：
- アスタリスク
*
- プラス記号
+
番号付きリスト（Ordered Lists）
- 最初のアイテム
- 2番目のアイテム
- サブアイテム2.1
- サブアイテム2.2
- 3番目のアイテム
番号は自動でインクリメント：
- 番号は何でも (1)
- 入力しても (1)
- 正しく表示されます (1)
タスクリスト（Task Lists）
- 完了したタスク
- 未完了のタスク
- 優先度高：重要なタスク
- サブタスク
- サブタスク1完了
- サブタスク2未完了
5. 引用（Blockquotes）
これは引用です。
引用内に複数の段落を含めることができます。
ネストされた引用もサポートされています。
さらに深くネストすることも可能です。
3段階のネスト
引用内の見出し
- 引用内のリスト
- 別のアイテム
引用内のコードブロック引用内の装飾テキスト
6. コード
インラインコード
これは const message = "Hello"; というインラインコードです。
コードブロック
これはシンプルなコードブロックです。
言語指定がありません。
言語指定付きコードブロック（シンタックスハイライト）
// JavaScript
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("World"));
# Python
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
/* CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
<!-- HTML -->
<div class="container">
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</div>
# Bash
echo "Hello World"
mkdir new-directory
cd new-directory
JSON
{
"name": "John Doe",
"age": 30,
"isStudent": false,
"courses": ["Math", "Science", "History"]
}
7. 表（Tables）
| 名前 | 年齢 | 職業 |
|---|---|---|
| 山田太郎 | 30 | エンジニア |
| 佐藤花子 | 25 | デザイナー |
| 鈴木一郎 | 40 | マネージャー |
8. 埋め込み/リンクカード/SNS
最もシンプル
https://zenn.dev/
タイトルを指定したテキストリンク
[Zennのウェブサイト](https://zenn.dev/)
参照リンク
内部リンク（アンカー）
ポストのURLだけの行（前後に改行が必要です）
https://twitter.com/jack/status/20
x.comドメインの場合
https://x.com/jack/status/20
codesandbox
https://codesandbox.io/embed/ ~ から始まる
@[codesandbox](embed用のURL)
@[codesandbox](https://codesandbox.io/embed/react-simple-counter-demo-f4v92)
mermaidタグ
blueprintueタグ
youtube
https://www.youtube.com/watch?v=WRVsOCh907o
Github
https://github.com/octocat/Hello-World/blob/master/README
gist
@[gist](https://gist.github.com/kzyplus/bba248f6edce3908549d4ca1f0195b63)
codepen
@[codepen](https://codepen.io/rcyou/pen/QEObEZ)
slideshare
@[slideshare](AQDphT6ZFgBleJ)
9. 画像
基本的な画像
リンク付き画像
[](https://zenn.dev/)
参照形式の画像
![参照形式の画像][img1]
[img1]: https://placehold.jp/150x150.png "参照形式の画像タイトル"
10. 水平線
3種類の書き方があります：
***
---
アンスコ
___
11. エスケープ文字
特殊文字をエスケープするには、その前にバックスラッシュ（\）を付けます：
* これはアスタリスクです（リストにはなりません）
# これはハッシュ記号です（見出しにはなりません）
- これはハイフンです（リストアイテムにはなりません）
\ バックスラッシュ自体を表示
` バッククォート
* _ { } [ ] ( ) # + - . !
12. 脚注（Footnotes）
長い名前の脚注も定義できます[3]。
13. 数式
インライン数式
この式 $E=mc^2$ はアインシュタインの有名な質量とエネルギーの等価性を表す式です。
この式
ブロック数式
$$
\begin{aligned}
\frac{d}{dx}e^x &= e^x \\
\int_{0}^{1} x^2 dx &= \frac{1}{3} \\
\sum_{i=1}^{n} i &= \frac{n(n+1)}{2}
\end{aligned}
$$
14. HTMLの直接使用
無理です。
15. Zenn 独自の記法
:::message
これはメッセージアラートです（Zenn専用）
:::
:::message alert
これは警告メッセージです（Zenn専用）
:::
:::details アコーディオン タイトル
詳細を表示/非表示できるコンポーネントです（Zenn専用）
:::
アコーディオン タイトル
詳細を表示/非表示できるコンポーネントです（Zenn専用）
