extract markdown parse to its own function

resources/client/components/Markdown.vue

@@ -3,22 +3,12 @@
 </template>
 <script setup lang="ts">
 import { computed } from "vue";
-import { marked } from "marked";
-import markedKatex from "marked-katex-extension";
+import { markdownToHTML } from "@/lib/markdownToHTML";
 
 const props = defineProps<{
   content: string;
 }>();
 
-const options = {
-  throwOnError: false,
-};
-
-marked.use(markedKatex(options));
-
-const html = computed(() => {
-  const html = marked.parse(props.content);
-  return html;
-});
+const html = computed(() => markdownToHTML(props.content));
 </script>
 <style scoped></style>

resources/client/lib/markdownToHTML.ts

@@ -0,0 +1,15 @@
+import { marked, MarkedOptions } from "marked";
+import markedKatex, { MarkedKatexOptions } from "marked-katex-extension";
+
+const options: MarkedOptions & MarkedKatexOptions = {
+  throwOnError: false,
+  async: false,
+};
+
+marked.use(markedKatex(options));
+
+export function markdownToHTML(markdown: string): string {
+  // not using async so we can cast as string instead
+  // of Promise<string>
+  return marked.parse(markdown) as string;
+}