121 lines
1.6 KiB
Vue
121 lines
1.6 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 示例
|
|
|
|
## 标题示例
|
|
|
|
### 三级标题
|
|
#### 四级标题
|
|
##### 五级标题
|
|
###### 六级标题
|
|
|
|
## 文本格式化
|
|
|
|
**这是加粗的文字**
|
|
|
|
*这是倾斜的文字*
|
|
|
|
***这是斜体加粗的文字***
|
|
|
|
~~这是加删除线的文字~~
|
|
|
|
## 引用
|
|
|
|
> 这是引用的内容
|
|
>
|
|
> 这是引用的内容
|
|
>> 这是引用的内容
|
|
|
|
## 分割线
|
|
|
|
---
|
|
|
|
## 图片
|
|
|
|
|
|
|
|
## 超链接
|
|
|
|
[百度](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> |