blog/src/components/misc/Markdown.astro

---
import '@fontsource-variable/jetbrains-mono';
import '@fontsource-variable/jetbrains-mono/wght-italic.css';

interface Props {
    class: string;
}
const className = Astro.props.class;
---
<div data-pagefind-body class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
    <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
    <!--<div class="max-w-none custom-md">-->
    <slot />
</div>

<style lang="stylus" is:global>
  .custom-md
    h1,h2,h3,h4,h5,h6
      .anchor
        margin: -0.125rem
        margin-left: 0.2ch
        padding: 0.125rem
        user-select: none
        opacity: 0
        transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
        .anchor-icon
          margin-left: 0.45ch
          margin-right: 0.45ch
      &:hover
        .anchor
          opacity: 1
    a
      position: relative
      background: none
      margin: -0.25rem
      padding: 0.25rem
      border-radius: 0.375rem
      color: var(--primary)
      text-decoration-line: none;
      /*&:after*/
      /*  content: ''*/
      /*  position: absolute*/
      /*  left: 2px*/
      /*  right: 2px*/
      /*  bottom: 4px*/
      /*  height: 6px*/
      /*  border-radius: 3px*/
      /*  background: var(--link-hover)*/
      /*  transition: background 0.15s ease-in-out;*/
      /*  z-index: -1;*/
      &:hover
        background: var(--link-hover)
      &:active
        background: var(--link-active)
    /*&:after*/
    /*  background: var(--link-active)*/
    code
      font-family: 'JetBrains Mono Variable',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
      background: var(--inline-code-bg)
      color: var(--inline-code-color)
      padding: 0.125rem 0.25rem
      border-radius: 0.25rem
      overflow: hidden
      counter-reset: line
      &:before
        content: none
      &:after
        content: none
      span.line
        &:before
          content: counter(line)
          counter-increment: line
          direction: rtl
          display: inline-block
          margin-right: 1rem
          width: 1rem
          color: rgba(255, 255, 255, 0.25)
    pre
      background: var(--codeblock-bg) !important
      border-radius: 0.75rem
      padding-left: 1.25rem
      padding-right: 1.25rem
      code
        color: unset
        font-size: 0.875rem
        padding: 0
        background: none
        ::selection
          background: var(--codeblock-selection)
        span.br::selection
          background: var(--codeblock-selection)
    ul
      li
        &::marker
          color: var(--primary)
    ol
      li
        &::marker
          color: var(--primary)
    blockquote
      font-style: normal
      font-weight: inherit
      border-left-color: rgba(0,0,0,0)
      position: relative;
      &:before
        content: ''
        position: absolute
        left: -0.25rem
        display: block
        transition: background 0.15s ease-in-out;
        background: var(--btn-regular-bg)
        height: 100%
        width: 0.25rem
        border-radius: 1rem
      p
        &:before
          content: none
        &:after
          content: none
    img
      border-radius: 0.75rem
    hr
      border-color: var(--line-divider)
      border-style: dashed
    iframe
      border-radius: 0.75rem
      margin-left: auto
      margin-right: auto
      max-width: 100%
</style>

<style lang="css" is:global>
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .custom-md h1 {
        @apply text-3xl
    }
}

</style>