New HyperMD implementation with custom behaviour.

components/prose/ProseA.vue

@@ -27,4 +27,10 @@ const { hash, pathname } = parseURL(href);
 
 const { content } = useContent();
 const overview = computed(() => content.value.find(e => e.path === pathname));
-</script>
+</script>
+
+<style>
+.cm-link {
+	@apply text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85;
+}
+</style>

components/prose/ProseBlockquote.vue

@@ -2,4 +2,27 @@
   <blockquote class="empty:before:hidden ps-4 my-4 relative before:absolute before:-top-1 before:-bottom-1 before:left-0 before:w-1 before:bg-light-30 dark:before:bg-dark-30" ref="el">
     <slot />
   </blockquote>
-</template>
+</template>
+
+<style>
+.HyperMD-quote
+{
+  @apply before:hidden;
+}
+.HyperMD-quote.hmd-inactive-line
+{
+  @apply before:block empty:before:!hidden !pb-2 !ps-4 !relative before:!absolute before:!-top-1 before:!-bottom-1 before:!left-0 before:!w-1 before:!bg-none before:!bg-light-30 dark:before:!bg-dark-30;
+}
+.HyperMD-quote.HyperMD-header
+{
+  @apply before:!hidden;
+}
+.hmd-inactive-line .cm-formatting-quote
+{
+  @apply !hidden;
+}
+.cm-quote 
+{
+  @apply text-light-100 dark:text-dark-100;
+}
+</style>

components/prose/ProseCode.vue

@@ -1,3 +1,10 @@
 <template>
   <code><slot /></code>
 </template>
+
+<style>
+.cm-inline-code
+{
+  @apply !border-none !bg-transparent !text-light-100 dark:!text-dark-100 !p-0;
+}
+</style>

components/prose/ProseH1.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2 relative lg:right-8 sm:right-4 right-2">
+  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2">
     <slot />
   </h1>
 </template>
@@ -8,3 +8,14 @@
 import { parseId } from '#shared/general.util';
 const props = defineProps<{ id?: string }>()
 </script>
+
+<style>
+.HyperMD-header-1
+{
+  @apply text-5xl pt-4 pb-2 after:hidden;
+}
+.HyperMD-header-1 .cm-header
+{
+  @apply font-thin;
+}
+</style>

components/prose/ProseH2.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-4 right-2">
+  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2">
     <slot />
   </h2>
 </template>
@@ -10,3 +10,14 @@ const props = defineProps<{ id?: string }>()
 
 const generate = computed(() => props.id)
 </script>
+
+<style>
+.HyperMD-header-2
+{
+  @apply !text-4xl !pt-4 !pb-2 !ps-1 leading-loose after:hidden;
+}
+.HyperMD-header-2 .cm-header
+{
+  @apply font-semibold;
+}
+</style>

components/prose/ProseH3.vue

@@ -10,3 +10,14 @@ const props = defineProps<{ id?: string }>()
 
 const generate = computed(() => props.id)
 </script>
+
+<style>
+.HyperMD-header-3
+{
+  @apply !text-2xl !font-bold !pt-1 after:!hidden;
+}
+.HyperMD-header-3 .cm-header
+{
+  @apply font-bold;
+}
+</style>

components/prose/ProseH4.vue

@@ -8,3 +8,15 @@
 import { parseId } from '#shared/general.util';
 const props = defineProps<{ id?: string }>()
 </script>
+
+<style>
+.HyperMD-header-4
+{
+  @apply !text-xl font-semibold pt-1 after:hidden;
+  font-variant: small-caps;
+}
+.HyperMD-header-4 .cm-header
+{
+  @apply font-semibold;
+}
+</style>

components/prose/ProseHr.vue

@@ -1,3 +1,10 @@
 <template>
   <Separator class="border-b border-light-35 dark:border-dark-35 m-4" />
 </template>
+
+<style>
+.HyperMD-hr
+{
+  @apply bg-light-35 dark:bg-dark-35 h-px;
+}
+</style>

components/prose/ProseLi.vue

@@ -1,3 +1,22 @@
 <template>
   <li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
 </template>
+
+<style>
+.HyperMD-list-line
+{
+  @apply  !py-1;
+}
+.HyperMD-list-line.hmd-inactive-line > span
+{
+  @apply before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4;
+}
+.hmd-inactive-line .cm-formatting-list
+{
+  @apply hidden;
+}
+.cm-hmd-list-indent
+{
+  @apply !hidden;
+}
+</style>

components/prose/ProseTag.vue

@@ -2,4 +2,15 @@
     <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
         <slot></slot>
     </span>
-</template>
+</template>
+
+<style>
+.cm-hashtag.cm-hashtag-begin
+{
+    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 ps-1 rounded-l-[12px]  border border-r-0 border-accent-blue border-opacity-30;
+}
+.cm-hashtag.cm-hashtag-end
+{
+    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 pe-1 rounded-r-[12px] !rounded-se-none border border-l-0 border-accent-blue border-opacity-30;
+}
+</style>