Astro + Svelte MDX 演示#

基础 Markdown 功能#

这是粗体和斜体文本。

代码块#

1
function greet(name) {
2
  return `Hello, ${name}!`;
3
}

列表#

项目 1
项目 2
项目 3

在 MDX 中使用 Svelte 组件#

由于你的项目是 Astro + Svelte，你可以这样使用 Svelte 组件：

1
<!-- 这是 Svelte 组件语法，不是 JSX -->
2
<script>
3
  let count = 0;
4

5
  function increment() {
6
    count += 1;
7
  }
8
</script>
9

10
<button on:click={increment}>
11
  点击了 {count} 次
12
</button>

使用 Astro 组件#

你也可以在 MDX 中嵌入 Astro 组件：

1
---
2
// 这是 Astro 组件
3
const message = "Hello from Astro!";
4
---
5
<div>{message}</div>

重要区别总结#

特性	普通 Markdown	MDX (你的项目)
文件扩展名	`.md`	`.mdx`
Svelte 组件	❌ 不支持	✅ 支持 `.svelte`
Astro 组件	❌ 不支持	✅ 支持 `.astro`
React/JSX 组件	❌ 不支持	❌ 不支持 (需要 React 集成)
JavaScript 表达式	❌ 不支持	✅ 支持