<code>
By raae for Semantic Advent |
If you are in the same timezone as me, this will find you on the next day in the calendar already 😬
<code>
is for code. It sounds simple enough but beware of a few reserved characters.
The
<code>
HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
MDN Docs
It can either be inline code:
<code><code></code> is for code.
displayed as "<code>
is for code."
or wrapped in <pre>
for multiline code:
<pre>
<code><p>
Semantic Advent post for <time datetime="2023-12-07">December 7th</time>,
estimated reading time <time datetime="PT22S">22 seconds</time>.
</p></code>
</pre>
displayed as
<p>
Semantic Advent post for <time datetime="2023-12-07">December 7th</time>,
estimated reading time <time datetime="PT22S">22 seconds</time>.
</p>
But why does the example code look so weird?
If your code uses reserved characters such as <, >, &, and " within the <pre>
tag, the characters must be escaped using their respective HTML entity.
For code that does not use these characters, it will look much cleaner:
<pre>
<code>const { title, slug, bodyHTML, publishOnDate, authors } = Astro.props;</code>
</pre>
Hopefully, your CMS will convert this for you!