The `Code` component simplifies displaying code with line numbers and letting people copy the code to their clipboard.  It will get the code from a URL, wrap it in a `<pre><code>..</code></pre>` block, and then convert each line to an inner `<span>` so it will receive a line number using CSS.

The CSS that makes this magic happen is:

<pre>
<code data-language="css">
pre code span::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  padding: 0 0.3rem;
  margin-right: 0.5rem;
  border-right: 1px solid var(--color-inactive);
  min-width: 3ch;
  text-align: right;
  color: var(--color-inactive);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}</code></pre>

This uses the `::before`` selector to add a line number counter to the front of each span, and then create a thin line. This is why you can use your mouse to select the lines of code but the _line numbers_ won't be selected (even if some browsers show you they are being selected).

To make it easier on people it will also just copy the code when you click on it and then do a `Toast` alert.