<code>

[raae]

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>&lt;code&gt;</code> is for code.

displayed as "<code> is for code."

or wrapped in <pre> for multiline code:

<pre>
<code>&lt;p&gt;
  Semantic Advent post for &lt;time datetime="2023-12-07"&gt;December 7th&lt;/time&gt;, 
  estimated reading time &lt;time datetime="PT22S"&gt;22 seconds&lt;/time&gt;.
&lt;/p&gt;</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!