fix: use <output> and <pre> to format errors

Use the `<output>` and `<pre>` HTML elements to format mermaid errors,
instead just adding the error message as HTML.

Using `<pre>` avoids the need for sanitizing any HTML (or using a
`monospace` font in CSS, since `<pre>` does this automatically).

Using `<output>` means that users using screenreaders should have a
better experience when using the mermaid live editor.

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

src/lib/components/Editor.svelte

@@ -139,10 +139,9 @@
         <i class="fa fa-exclamation-circle w-4" aria-hidden="true" />
         <p>Diagram syntax error</p>
       </div>
-      <div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-        {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
-      </div>
+      <output class="max-h-32 overflow-auto bg-red-600 p-2" name="mermaid-error" for="editor">
+        <pre>{$stateStore.error?.toString()}</pre>
+      </output>
     </div>
   {/if}
 </div>