70 lines
1.0 KiB
Vue
70 lines
1.0 KiB
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渲染
|
|
|
|
## 基本格式
|
|
|
|
**加粗文本** 和 *斜体文本*
|
|
|
|
## 代码高亮
|
|
|
|
\`\`\`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> |