return home

H1: Markdown Formatting in Astro

Connecting.fyi

the genesis for this blog

H2

H3

H4

Paragraph:

This first post is a testbed for markdown formatting in Astro. It aligns with shadcn Typography.

Here’s that code:

<div
  class="
    prose prose-slate
  prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl
  prose-h2:scroll-m-20 prose-h2:text-3xl prose-h2:font-semibold prose-h2:tracking-tight
  prose-h3:scroll-m-20 prose-h3:text-2xl prose-h3:font-semibold prose-h3:tracking-tight
  prose-h4:scroll-m-20 prose-h4:text-xl prose-h4:font-semibold prose-h4:tracking-tight
  prose-lead:text-xl prose-lead:text-muted-foreground
  prose-p:leading-7 prose-p:[&:not(:first-child)]:mt-6
  prose-a:leading-7 prose-a:text-slate-500 prose-a:underline hover:prose-a:text-slate-700
  prose-code:relative prose-code:rounded prose-code:font-mono prose-code:text-sm prose-code:font-semibold prose-code:overflow-x-auto
  prose-ul:my-6 prose-ul:ml-6 prose-ul:list-square prose-ul:[&>li]:mt-2
  prose-ol:my-6 prose-ol:ml-6 prose-ol:list-roman prose-ol:[&>li]:mt-2
  prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:text-muted-foreground
  prose-img:my-6 prose-img:rounded-lg prose-img:w-full
  prose-figcaption:text-sm prose-figcaption:text-muted-foreground prose-figcaption:mt-2 prose-figcaption:text-center
  "
>
  <content />
</div>

Link:

Connecting.fyi

Numbered list:

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list:

Todo list:

Blockquote

By John Doe