<h2>見出し</h2>

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

<h2>段落・改行</h2>
<p>段落</p>
<p>スペース2個で<br />改行できます</p>

<h2>強調</h2>

<p>
  <strong>太字</strong><br />
  <em>イタリック</em><br />
  <s>打ち消し線</s><br />
</p>

<h2>引用</h2>

<blockquote>
  <p>
    引用文<br />
    引用文の中で改行
  </p>
</blockquote>
<blockquote>
  <p>引用文</p>
  <p>引用文の2つめの段落</p>
  <blockquote>
    <p>引用文のネスト</p>
  </blockquote>
</blockquote>

<h2>リスト</h2>

<h3>箇条書きリスト</h3>

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>
    Third item
    <ul>
      <li>Indented item</li>
      <li>Indented item</li>
    </ul>
  </li>
  <li>Fourth item</li>
</ul>

<h3>番号付きリスト</h3>

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>
    Third item
    <ol>
      <li>Indented item</li>
      <li>Indented item</li>
    </ol>
  </li>
  <li>Fourth item</li>
</ol>

<h2>コード</h2>

<p><code>インラインコード</code></p>

<pre><code>{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
</code></pre>

<h2>区切り線</h2>

<hr />

<h2>テキストリンク</h2>

<p><a href="https://zenn.dev" target="_blank">リンクテキスト</a></p>

<h2>画像</h2>

<p>※ Chrome, Edge でのみ確認</p>

<p>
  <img
    src="https://placehold.jp/150x150.png"
    alt="alt text"
  />
</p>

<h2>テーブル</h2>

<table>
  <thead>
    <tr>
      <th>Syntax</th>
      <th>Description</th>
      <th>Test Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Header</td>
      <td>Title</td>
      <td>Here’s this</td>
    </tr>
    <tr>
      <td>Paragraph</td>
      <td>Text</td>
      <td>And more</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th style="text-align: left">Syntax</th>
      <th style="text-align: center">Description</th>
      <th style="text-align: right">Test Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: left">Header</td>
      <td style="text-align: center">Title</td>
      <td style="text-align: right">Here’s this</td>
    </tr>
    <tr>
      <td style="text-align: left">Paragraph</td>
      <td style="text-align: center">Text</td>
      <td style="text-align: right">And more</td>
    </tr>
  </tbody>
</table>

<h2>チェックリスト</h2>

<ul>
  <li><input type="checkbox" />未チェック</li>
  <li><input type="checkbox" checked />チェック済み</li>
</ul>

/* リセット */
* {
  margin: 0;
  font-size: 1rem;
}
:root {
  font-family: monospace;
}

body {
  padding: 1rem;
}
body > :not(:first-child) {
  margin-block-start: 1em;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* 見出し */
h1::before {
  content: "# ";
}
h2::before {
  content: "## ";
}
h3::before {
  content: "### ";
}
h4::before {
  content: "#### ";
}
h5::before {
  content: "##### ";
}
h6::before {
  content: "###### ";
}

/* 改行 */
br {
  content: "";
}
br::before {
  content: "  \a";
  white-space: pre;
}

/* 強調 */
em::before,
em::after {
  content: "*";
}
strong::before,
strong::after {
  content: "**";
}
s::before,
s::after {
  content: "~~";
}

/* 引用 */
blockquote {
  margin-block-start: 1em;
}
blockquote br::after {
  content: ">";
}
blockquote p::before {
  content: "> ";
}
blockquote p + p::before {
  content: "> \a> ";
  white-space: pre;
}
/* ネストに対応 */
blockquote blockquote {
  margin-block-start: 0;
}
blockquote blockquote p::before {
  content: "> \a>> ";
  white-space: pre;
}

/* リスト */
ul > li::before {
  content: "- ";
}
ol {
  counter-reset: ol-counter;
}
ol > li {
  counter-increment: ol-counter;
}
ol > li::before {
  content: counter(ol-counter) ". ";
}
/* ネストに対応 */
:where(ul, ol) ul > li::before {
  content: "  - ";
  white-space: pre;
}
:where(ul, ol) ol > li::before {
  content: "  " counter(ol-counter) ". ";
  white-space: pre;
}

/* コード */

code::before,
code::after {
  content: "`";
}

pre code::before,
pre code::after {
  content: "```";
  display: block;
}

/* 水平線 */
hr {
  /* リセット */
  border: none;
}
hr::before {
  content: "---";
}

/* リンク */
a::before {
  content: "[";
}
a::after {
  content: "](" attr(href) ")";
}

/* 画像（Chrome, Edgeのみ動作） */
img {
  content: url("not-found");
}
img::before {
  content: "![";
}
img::after {
  content: "](" attr(src) ")";
}

/* 表 */
th {
  text-align: start;
}
th::before,
td::before {
  content: "| ";
}
tr::after {
  content: " |";
}
thead th::after {
  content: "| -----";
  display: block;
}
thead th:last-child::after {
  content: "| ----- |";
}
thead th[style*="left"]::after {
  content: "| :--- ";
}
thead th[style*="left"]:last-child:after {
  content: "| :--- |";
}
thead th[style*="center"]::after {
  content: "| :---: ";
}
thead th[style*="center"]:last-child:after {
  content: "| :---: |";
}
thead th[style*="right"]::after {
  content: "| ---: ";
}
thead th[style*="right"]:last-child:after {
  content: "| ---: |";
}

/* チェックリスト */
input[type="checkbox"] {
  /* リセット */
  appearance: none;
}
input[type="checkbox"]::before {
  content: "[ ] ";
  white-space: pre;
}
input[type="checkbox"]:checked::before {
  content: "[x] ";
}