<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

<p><strong>Bold text</strong><br><em>Italic text</em><br><del>Strikethrough text</del><br><code>Inline code</code><br><strong><em>Bold + Italic</em></strong></p>

<h3>Unordered List</h3>
<ul>
<li>Item 1</li>
<li>Item 2<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step one</li>
<li>Step two<ol>
<li>Substep A</li>
<li>Substep B</li>
</ol>
</li>
<li>Step three</li>
</ol>

<h3>Links</h3>
<p><a href="https://github.com">GitHub</a><br><a href="https://www.google.com" title="Google Search">Link with title</a><br><a href="https://www.example.com">https://www.example.com</a></p>
<h3>Images</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" style="display:block;margin-bottom:8px;border-radius:8px;">
  <rect width="100%" height="100%" fill="#1e40af" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ffffff" font-size="20" font-family="monospace">Sample Image</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" style="display:block;border-radius:8px;">
  <defs>
    <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#3b82f6" />
      <stop offset="100%" stop-color="#1e40af" />
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#g1)" />
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ffffff" font-size="20" font-family="monospace">Sample Image</text>
</svg>

<pre><code class="hljs language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">greet</span>(<span class="hljs-params">name</span>) {
  <span class="hljs-keyword">return</span> <span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>!`</span>;
}

<span class="hljs-comment">// Call function</span>
<span class="hljs-keyword">const</span> message = <span class="hljs-title function_">greet</span>(<span class="hljs-string">&#x27;World&#x27;</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message);</code></pre><pre><code class="hljs language-python"><span class="hljs-keyword">def</span> <span class="hljs-title function_">fibonacci</span>(<span class="hljs-params">n</span>):
    <span class="hljs-keyword">if</span> n &lt;= <span class="hljs-number">1</span>:
        <span class="hljs-keyword">return</span> n
    <span class="hljs-keyword">return</span> fibonacci(n-<span class="hljs-number">1</span>) + fibonacci(n-<span class="hljs-number">2</span>)

<span class="hljs-comment"># Test function</span>
<span class="hljs-built_in">print</span>(fibonacci(<span class="hljs-number">10</span>))</code></pre><pre><code class="hljs language-css"><span class="hljs-selector-class">.container</span> {
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">justify-content</span>: center;
  <span class="hljs-attribute">align-items</span>: center;
  <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100vh</span>;
  <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(<span class="hljs-number">135deg</span>, <span class="hljs-number">#667eea</span> <span class="hljs-number">0%</span>, <span class="hljs-number">#764ba2</span> <span class="hljs-number">100%</span>);
}</code></pre>

<table>
<thead>
<tr>
<th align="left">Feature</th>
<th align="left">Status</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Preview</td>
<td align="left">✅</td>
<td align="left">Real-time HTML preview</td>
</tr>
<tr>
<td align="left">Syntax</td>
<td align="left">✅</td>
<td align="left">Code block highlighting</td>
</tr>
<tr>
<td align="left">i18n</td>
<td align="left">✅</td>
<td align="left">7 languages supported</td>
</tr>
<tr>
<td align="left">Responsive</td>
<td align="left">✅</td>
<td align="left">Mobile-friendly</td>
</tr>
<tr>
<td align="left">Free</td>
<td align="left">✅</td>
<td align="left">Completely free</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th align="left">Left</th>
<th align="center">Center</th>
<th align="right">Right</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Left text</td>
<td align="center">Center text</td>
<td align="right">Right text</td>
</tr>
<tr>
<td align="left">Left align</td>
<td align="center">Center align</td>
<td align="right">Right align</td>
</tr>
</tbody></table>

<blockquote>
<p>This is a quote block<br>It can contain multiple lines</p>
<p>Second paragraph</p>
</blockquote>
<blockquote>
<p>Outer quote</p>
<blockquote>
<p>Nested quote</p>
<blockquote>
<p>Deeper nested quote</p>
</blockquote>
</blockquote>
<p>Back to outer</p>
</blockquote>

<h3>Today</h3>
<ul>
<li><input checked="" disabled="" type="checkbox"> Write project documentation</li>
<li><input checked="" disabled="" type="checkbox"> Code review and tests</li>
<li><input disabled="" type="checkbox"> Deploy to production</li>
<li><input disabled="" type="checkbox"> Collect user feedback</li>
</ul>
<h3>Progress</h3>
<ul>
<li><input checked="" disabled="" type="checkbox"> Requirements</li>
<li><input checked="" disabled="" type="checkbox"> System design</li>
<li><input disabled="" type="checkbox"> Frontend</li>
<li><input disabled="" type="checkbox"> Backend</li>
<li><input disabled="" type="checkbox"> Integration tests</li>
</ul>

<p>Above</p>
<hr>
<p>Middle</p>
<hr>
<p>Another</p>
<hr>
<p>Below</p>
<h3>Special Characters</h3>
<p>* not italic *<br>** not bold **<br># not heading #<br>[ not link [<br>\<code> not code \\\</code></p>

<h3>Custom Styling</h3>
<p style="color: #1e40af; font-size: 18px; font-weight: bold;">
  This is text with custom style
</p>

<div style="background-color: #f3f4f6; padding: 16px; border-radius: 8px; border-left: 4px solid #1e40af;">
  <h4 style="margin-top: 0; color: #1e40af;">Custom Block</h4>
  <p>This is a block element with custom style</p>
</div>

<h3>Button Example</h3>
<button style="background-color: #1e40af; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
  Click Button
</button>