<template>
  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2">
    <slot />
  </h2>
</template>

<script setup lang="ts">
import { parseId } from '#shared/general.util';
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>