YingXingAI/pages/markdown-demo/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">Markdown渲染示例</text>
    </view>
    
    <view class="content">
      <markdown-viewer :content="markdownContent" />
    </view>
  </view>
</template>

<script>
import MarkdownViewer from '@/components/markdown-viewer/markdown-viewer';

export default {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      markdownContent: `# Markdown 示例

## 标题示例

### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

## 文本格式化

**这是加粗的文字**

*这是倾斜的文字*

***这是斜体加粗的文字***

~~这是加删除线的文字~~

## 引用

> 这是引用的内容
> 
> 这是引用的内容
>> 这是引用的内容

## 分割线

---

## 图片

![这是图片](https://placehold.co/600x400)

## 超链接

[百度](https://www.baidu.com)

## 列表

### 无序列表

- 列表内容
- 列表内容
- 列表内容

### 有序列表

1. 列表内容
2. 列表内容
3. 列表内容

## 表格

| 表头 | 表头 | 表头 |
| --- | --- | --- |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

## 代码

\`\`\`javascript
function sayHello() {
  console.log("Hello, World!");
}
\`\`\`

行内代码 \`const a = 1;\`

## 任务列表

- [x] 已完成任务
- [ ] 未完成任务
`
    };
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}

.header {
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
</style>