MarkdownCodeFence

2 variants. Open one in isolation: use the link on each card.

Default

Open alone → 
const greeting = 'hello'
console.log(greeting)

WithTitleAndLineNumbers

Open alone →
example.ts
const greeting = 'hello'
console.log(greeting)
src/ui/2_organisms/MarkdownCodeFence.astro
---
import { Code } from 'astro-expressive-code/components'
import '../../styles/markdown-code-fence.css'


interface Props {
  code: string
  lang: string
  meta?: string
  title?: string
  wrap?: boolean
  showLineNumbers?: boolean
}


const { code, lang, meta, title, wrap, showLineNumbers } = Astro.props
---


<div class="not-prose markdown-code-fence">
  <Code
    code={code}
    lang={lang}
    meta={meta}
    title={title}
    wrap={wrap}
    showLineNumbers={showLineNumbers}
  />
</div>