天体标记

天体标记 让您将任何 Markdown 内容输入 天体,可选择与任何现有配置相融合.

---
import { Markdown } from '@astropub/md'
---
<Markdown of={`# Hi, there!` /* Renders `<h1>Hi, there!</h1>` */} />

---
import { markdown } from '@astropub/md'
---
{
  /* Renders `<h1>Hi, there!</h1>` */
  await markdown(`# Hi, there!`)
}

使用量

添加 天体标记 你的项目.

npm install @astropub/md

使用 天体标记 在你的项目.

---
import { markdown } from '@astropub/md'
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    {await markdown(
`# Hi, there!

Welcome to my _website_.`
    )}
  </body>
</html>

选择性地整合 天体标记 使用您的 Astro 配置 .

// astro.config.js
import { defineConfig } from 'astro/config'
import markdownIntegration from '@astropub/md'

export default defineConfig({
  integrations: [
    markdownIntegration(),
  ],
  markdown: {
    remarkPlugins: [],
    rehypePlugins: [],
    // syntaxHighlight: 'shiki'
    // syntaxHighlight: 'prism'
  }
})

现在 markdown 配置自动应用到 <Markdown> 组件和组件 markdown() 函数.

使用 markdown.inline() 或者说 <Markdown.Inline> 用于处理文本的短串,而不包含相邻段落.

---
import { Markdown } from '@astropub/md'
---
<Markdown.Inline of={
  /* Renders `Welcome to my <em>website</em>.` */
  `Welcome to my _website_.`
} />

---
import { markdown } from '@astropub/md'
---
{await markdown.inline(
  /* Renders `Welcome to my <em>website</em>.` */
  `Welcome to my _website_.`
)}

慢慢来!

想多学点吗? 读取 Astro 文档 或跳入 Astro Discord (Astro Discord) 时尚主题 :。 。 。 .