Skip to content
Lucero

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](/no-directory/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="/no-directory/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>