以下内容均使用Vditor编辑器编辑
以下内容均使用Vditor编辑器编辑（强烈推荐），想要实现以下样式如何非Vditor编辑器请配合Tool-Bench使用。
居中标题
<joe-mtitle title="XW"></joe-mtitle>
halo-theme-joe3
halo-theme-joe3
代码块
\```html
<html>
<head>
<title>标题</title>
</head>
<body>
<p>远上寒山石径斜，白云生处有人家。</p>
</body>
</html>
\```
表格元素
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
| :----: | :----: | :----: |
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
| -----: | -----: | -----: |
| 内容 1 | 内容 2 | 内容 3 |
按钮元素
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>
<joe-abtn
color="#409eff"
icon="fa-bell"
href="#"
radius="3px"
content="搭配在一起"></joe-abtn>
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
<joe-copy
title="点击复制"
content="这是一段美好的鸡汤文"
color="green"
bold></joe-copy>
<joe-anote
icon="fa-download"
href="#"
type="success"
content="标签按钮"></joe-anote>
<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="gitee" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>
<joe-cloud type="ad" url="" password=""></joe-cloud>
装饰元素
<span class="joe_lamp"></span>
<joe-progress percentage="50%" color="#6ce766"></joe-progress>
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
{tabs-pane 第一个}单身狗的故事{/tabs-pane}
{tabs-pane 第二个}小说家的故事{/tabs-pane}
<joe-tabs>
<div class="_tpl">
{tabs-pane 第一个}单身狗的故事{/tabs-pane}
{tabs-pane 第二个}小说家的故事{/tabs-pane}
</div>
</joe-tabs>
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
<joe-timeline>
<div class="_tpl">
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
</div>
</joe-timeline>
<joe-dplayer src="https://52he.cc/usr/themes/Brave/base/img/shiping/Train.webm"></joe-dplyer>
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
<joe-pdf src="/upload/Chinese%20Simplified%20-%20Siemens-SW-Heatsinks-here-there-everywhere-White%20Paper.pdf"></joe-pdf>
<joe-mlist id="6800335663"></joe-mlist>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>
以上大部分为 webcomponents 组件，且仅在使用 halo-theme-joe3.0 主题时才能生效，请根据实际情况使用。
组件定义文件见主题目录下的 assets/js/custom.js。
文章出自： Jiewen
评论区