Make use of vuetify for prose elems

components/content/ProseH1.vue

 <template>
-  <div class="text-h1" :id="id">
-    <a v-if="id && generate" :href="`#${id}`">
+  <h1 class="text-h3 font-weight-bold" :id="id">
+    <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
       <slot />
     </a>
     <slot v-else />
-  </div>
+  </h1>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,13 @@ import { useRuntimeConfig } from "#imports";
 defineProps<{ id?: string }>();
 const heading = 1;
 const { anchorLinks } = useRuntimeConfig().public.content;
+console.log(anchorLinks);
+
 const generate =
   anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
 </script>
+<style scoped>
+a {
+  color: inherit;
+}
+</style>

components/content/ProseH2.vue

+<template>
+  <h2 class="text-h4 font-weight-bold" :id="id">
+    <a v-if="id && generate" :href="`#${id}`" class="text-decoration-none">
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from "#imports";
+defineProps<{ id?: string }>();
+const heading = 2;
+const { anchorLinks } = useRuntimeConfig().public.content;
+const generate =
+  anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading);
+</script>
+<style scoped>
+a {
+  color: inherit;
+}
+</style>

components/content/ProseOl.vue

+<template>
+  <v-card flat color="transparent">
+    <v-card-text>
+      <ol>
+        <slot />
+      </ol>
+    </v-card-text>
+  </v-card>
+</template>

components/content/ProseP.vue

 <template>
-  <v-card-text><slot /></v-card-text>
+  <v-card flat color="transparent">
+    <v-card-text class="px-0 py-2"><slot /></v-card-text>
+  </v-card>
 </template>