math_cms/resources/views/examples/markdown-demo.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Markdown 渲染器演示
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <h1 class="text-3xl font-bold mb-6">Markdown 渲染器演示</h1>

                    <div class="mb-8">
                        <h2 class="text-2xl font-semibold mb-4">基础功能演示</h2>

                        <x-markdown-renderer :content="
'# 标题演示

## 二级标题
### 三级标题

这是普通段落文本，包含**粗体**、*斜体*和`行内代码`。

## 列表

### 无序列表
- 列表项 1
- 列表项 2
  - 嵌套项 2.1
  - 嵌套项 2.2
- 列表项 3

### 有序列表
1. 第一项
2. 第二项
3. 第三项

## 链接和图片

这是一个[链接示例](https://example.com)。

## 代码块

```javascript
function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet(\"World\");
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

## 表格

| 功能 | 支持 | 说明 |
|------|------|------|
| 标题 | ✅ | H1-H6 支持 |
| 列表 | ✅ | 有序和无序 |
| 代码 | ✅ | 语法高亮 |
| 表格 | ✅ | 完整表格 |

## 块引用

> 这是一个块引用。
> 可以包含多行文本。
>
> 嵌套引用也是支持的。

## 分隔线

---

## 数学公式

虽然默认不支持 LaTeX，但可以通过插件扩展支持。'" />
                    </div>

                    <div class="mt-12">
                        <h2 class="text-2xl font-semibold mb-4">LaTeX 数学公式支持</h2>

                        <div class="bg-gray-50 p-4 rounded-lg mb-4">
                            <p class="text-sm text-gray-600 mb-2">行内公式示例：</p>
                            <x-markdown-renderer :content="
'这个公式 \\(ax^2 + bx + c = 0\\) 是一个二次方程。

求根公式：\\(x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\)

三角函数：\\(\\sin^2\\theta + \\cos^2\\theta = 1\\)'" class="prose max-w-none" />
                        </div>

                        <div class="bg-gray-50 p-4 rounded-lg mb-4">
                            <p class="text-sm text-gray-600 mb-2">块级公式示例：</p>
                            <x-markdown-renderer :content="
'二次方程求根公式：

$$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$

欧拉公式：

$$e^{i\\pi} + 1 = 0$$

积分公式：

$$\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}$$'" class="prose max-w-none" />
                        </div>
                    </div>

                    <div class="mt-12">
                        <h2 class="text-2xl font-semibold mb-4">在候选题中使用</h2>

                        <div class="bg-gray-50 p-4 rounded-lg mb-4">
                            <p class="text-sm text-gray-600 mb-2">示例候选题内容（带 LaTeX 公式）：</p>
                            <x-markdown-renderer :content="
'1. 计算下列各式的值：

   (1) \\(2x + 3\\) 当 \\(x = 5\\) 时

   (2) \\(\\frac{x^2 - 1}{x + 1}\\) 当 \\(x = 3\\) 时

2. 解方程：

   $$x^2 - 5x + 6 = 0$$

3. 已知函数 \\(f(x) = 2x - 1\\)，求 \\(f(3)\\) 的值。

   A. 4
   B. 5
   C. 6
   D. 7'" class="prose max-w-none" />
                        </div>
                    </div>

                    <div class="mt-12">
                        <h2 class="text-2xl font-semibold mb-4">使用说明</h2>

                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4">
                            <p class="text-blue-800">
                                在 Blade 模板中使用：
                            </p>
                            <pre class="bg-gray-900 text-gray-100 p-4 rounded mt-2 overflow-x-auto text-sm"><code>&lt;x-markdown-renderer :content=\"$markdownText\" /&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>