@cutexiaocai/astro-markdown-render
v1.0.3
Published
Render any Markdown content in Astro
Maintainers
cutexiaocaiReadme
Astro Markdown
[!NOTE] 这是我为了消除依赖冲突而自制的 npm 包，没有任何新功能。
Astro Markdown 允许您在 Astro 中渲染任何 Markdown 内容，并可选择与任何现有配置集成。
---
import { Markdown } from '@cutexiaocai/astro-markdown-render'
---
<Markdown of={`# Hi, there!`} /* Renders `<h1>Hi, there!</h1>` */ />---
import { markdown } from '@cutexiaocai/astro-markdown-render'
---
{
/* Renders `<h1>Hi, there!</h1>` */
await markdown(`# Hi, there!`)
}用法
将 Astro Markdown 添加到您的项目中。
pnpm add @cutexiaocai/astro-markdown-render在您的项目中使用 Astro Markdown。
---
import { markdown } from '@cutexiaocai/astro-markdown-render'
---
<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 Markdown 与您现有的 Astro 配置集成。
// astro.config.js
import { defineConfig } from 'astro/config'
import markdownIntegration from '@cutexiaocai/astro-markdown-render'
export default defineConfig({
integrations: [
markdownIntegration(),
],
markdown: {
remarkPlugins: [],
rehypePlugins: [],
// syntaxHighlight: 'shiki'
// syntaxHighlight: 'prism'
}
})现在 markdown 配置会自动应用于 <Markdown> 组件和 markdown() 函数。
使用 markdown.inline() 或 <Markdown.Inline> 来处理不带段落包围的短文本字符串。
---
import { Markdown } from '@cutexiaocai/astro-markdown-render'
---
<Markdown.Inline of={
/* Renders `Welcome to my <em>website</em>.` */
`Welcome to my _website_.`
} />---
import { markdown } from '@cutexiaocai/astro-markdown-render'
---
{await markdown.inline(
/* Renders `Welcome to my <em>website</em>.` */
`Welcome to my _website_.`
)}尽情享用吧！
想了解更多？ 请阅读 Astro 文档 或加入 Astro Discord。