欢迎使用 DioxusPress

这是 DioxusPress 内置的 MDX 富排版能力全景演示文章。它位于 assets/posts/welcome/index.mdx。

我们已经成功集成了 @tailwindcss/typography 插件！现在，Markdown 内容会自动应用精美的排版样式。

排版演示 (Typography Demo)

1. 文本格式 (Text Formatting)

Markdown 支持多种文本格式，例如 加粗 (Bold)、斜体 (Italic)、删除线 (Strikethrough) 以及 行内代码 (Inline Code)。

这是一个引用块 (Blockquote)。它可以跨越多行。引用通常用于突出显示重要信息或引用他人的话。

2. 列表 (Lists)

无序列表

• 高性能：没有 GC，内存安全。
• 可靠性：丰富的类型系统和所有权模型。
• 生产力：优秀的文档和编译器。

有序列表

1. 初始化项目：cargo init
2. 添加依赖：cargo add dioxus
3. 运行项目：dx serve

3. 代码块 (Code Blocks)

我们可以使用代码块来展示 Rust 代码：

use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    let count = use_signal(|| 0);

    rsx! {
        div { class: "flex flex-col items-center gap-4 p-8",
            h1 { "Hello, Dioxus!" }
            button { 
                onclick: move |_| count.set(count() + 1),
                "Count: {count}" 
            }
        }
    }
}

还可以使用 :::code-tabs 将多份示例代码放在同一个标签组内对比（例如对比 Typst、LaTeX 与 Markdown 的语法）：

#set page(paper: "a4", margin: 2cm)
#set heading(numbering: "1.1")

= 现代排版引擎 <intro>
在 @intro 中，我们直接写 *粗体*、_斜体_ 与高斯积分：
$ integral_0^oo e^(-x^2) dif x = sqrt(pi) / 2 $

\documentclass[a4paper]{article}
\usepackage[margin=2cm]{geometry}
\begin{document}
\section{现代排版引擎}\label{sec:intro}
在 Section~\ref{sec:intro} 中，我们写 \textbf{粗体}、\emph{斜体} 与高斯积分：
\[ \int_0^\infty e^{-x^2}\,\mathrm{d}x = \frac{\sqrt{\pi}}{2} \]
\end{document}

# 现代排版引擎

在正文中，我们写 **粗体**、*斜体* 与高斯积分：

$$\int_0^\infty e^{-x^2}\,\mathrm{d}x = \frac{\sqrt{\pi}}{2}$$

4. 表格 (Tables)

5. 链接与图片 (Links & Images)

访问 Dioxus 官网 了解更多。

提示

嵌入组件演示 (Component Embedding)

除了标准的 Markdown，我们还支持嵌入 Dioxus 组件 (MDX 风格)：

祝你编码愉快！🚀

6. 数学公式 (Math Support)

现在我们的博客也支持数学公式了！

行内公式：爱因斯坦的质能方程是 $E=m{c}^2$，欧拉公式是 $e^{i\pi }+1=0$。

块级公式 (Display Math)：

麦克斯韦方程组：

7. 文字样式组件 (Text Style Components)

支持 Mac Preview 风格的彩色文字和文本装饰：

• 这里有 黄色重点 需要注意
• 测试结果：全部通过，零失败
• 更多详情请参考 官方文档
• 性能警告：请避免在热路径中使用
• 这是一个 实验性功能，API 可能变化
• 这段内容非常 重要，请务必阅读
• 该接口已 废弃，请使用新版本

8. Mermaid 图表支持 (Mermaid Diagrams)

我们还支持 Mermaid 图表了！

以下是一个流程图示例：

flowchart RL
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}

时间线图：

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter

9. 视频嵌入 (Video Embedding)

我们还可以嵌入 YouTube 视频：

10. Bilibili 视频嵌入

B站视频演示：