<template>
  <h4 :id="parseId(id)" class="text-xl font-semibold my-2" style="font-variant: small-caps;">
    <slot />
  </h4>
</template>

<script setup lang="ts">
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>