Skip to content

Basic Syntax

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

John Gruber

References


Section Heading <h1> - <h6>

h1

h2

h3

h4

h5
h6
Markdown:
# h1
## h2
### h3
#### h4
##### h5
###### h6
HTML output:
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
<h3 id="h3">h3</h3>
<h4 id="h4">h4</h4>
<h5 id="h5">h5</h5>
<h6 id="h6">h6</h6>

Inline Code <code>

A fragment of computer code: element name (code), filename (index.html), computer program (cat), or any string a computer would recognize (~, if, else).

Markdown:
a fragment of computer code:
element name (`code`),
filename (`index.html`),
computer program (`cat`),
or any string a computer would recognize (`~`,`if`,`else`).
HTML output:
<p>
a fragment of computer code: element name (<code>code</code>), filename (<code>index.html</code>), computer program (<code>cat</code>), or any string a computer would recognize (<code>~</code>,
<code>if</code>, <code>else</code>).
</p>

Emphasis <em>

Stress emphasis on the right syllable.

Markdown:
stress _emphasis_ on the right _syllable_.
HTML output:
<p>
Stress <em>emphasis</em> on the right <em>syllable</em>.
</p>

Strong Importance <strong>

Strong importance: it should not be used to apply bold styling, use css for that. Don’t use <b> for styling either!

Markdown:
**Strong importance:**
it should not be used to apply **bold styling**, use **`css`** for that.
**Don't use** `<b>` for styling either!
HTML output:
<p>
<strong>strong importance:</strong> it should not be used to apply
<strong>bold styling</strong>, use <strong><code>css</code></strong> for that. <strong>don't use</strong>
<code>&lt;b&gt;</code> for styling either!
</p>

Block Quotation <blockquote>

The blockquote element represents a section that is quoted from another source.

Example

<blockquote>
<p>[Jane] then said she liked [...] fish.</p>
</blockquote>
Markdown:
> The `blockquote` element represents a section that is quoted from _another source_.
>
>> **Example**
>>
>> ```html
>> <blockquote>
>> <p>[Jane] then said she liked [...] fish.</p>
>> </blockquote>
>> ```
HTML output:
<blockquote>
<p>
The <code>blockquote</code> element represents a section that is quoted from <em>another source</em>.
</p>
<blockquote>
<p><strong>Example</strong></p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html">
<code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">blockquote</span><span class="dt">&gt;</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>[Jane] then said she liked [...] fish.<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">blockquote</span><span class="dt">&gt;</span></span></code></pre></div>
</blockquote>
</blockquote>

Image <img>

Astro mascot with a hard hat full moon face, twitter emoji replacement text if the image isn't available

Markdown:
![Astro mascot with a hard hat](../../../../assets/images/houston.webp)
![full moon face, twitter emoji](../../../../assets/images/twemoji/full-moon-face-1f31d.svg "tooltip: full moon face")
![replacement text if the image isn't available](/lucero/images/not-available.png)
HTML output:
<p>
<img src="../../../../assets/images/houston.webp" alt="Astro mascot with a hard hat" />
<img
src="../../../../assets/images/twemoji/full-moon-face-1f31d.svg"
title="tooltip: full moon face"
alt="full moon face, twitter emoji"
/>
<img
src="/lucero/images/not-available.png"
alt="replacement text if the image isn&#39;t available"
/>
</p>

link to usage, astro, anchor to code section

Markdown:
link to [usage](../../usage/),
[astro](https://docs.astro.build/en/getting-started/),
anchor to [code section](#inline-code-code)
HTML output:
<p>
link to <a href="../../usage/">usage</a>, <a href="https://docs.astro.build/en/getting-started/">astro</a>, anchor to
<a href="#inline-code-code">code section</a>
</p>

Unordered List <ul>

Markdown:
- apple
- dog
- number
HTML output:
<ul>
<li>apple</li>
<li>dog</li>
<li>number</li>
</ul>

Ordered List <ol>

  1. item 01
  2. item 02
  3. item 03
Markdown:
1. item 01
1. item 02
1. item 03
HTML output:
<ol type="1">
<li>item 01</li>
<li>item 02</li>
<li>item 03</li>
</ol>

Thematic Break <hr>

This is topic 1.


This is topic 2.


This is topic 3.


This is topic 4.

Markdown:
This is topic 1.
---
This is topic 2.
***
This is topic 3.
___
This is topic 4.
HTML output:
<p>This is topic 1.</p>
<hr>
<p>This is topic 2.</p>
<hr>
<p>This is topic 3.</p>
<hr>
<p>This is topic 4.</p>