<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渲染

## 基本格式

**加粗文本** 和 *斜体文本*

## 代码高亮

\`\`\`javascript
// 测试代码高亮
function hello() {
  console.log('Hello World!');
}
\`\`\`

## 表格

| 姓名 | 年龄 | 职业 |
| ---- | ---- | ---- |
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |

`
    };
  }
};
</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> 