前言
默认编辑器使用自定义标签需配合 Tool-Bench(1.0.4版本) 插件一起使用才会生效
Tool-Bench 1.0.4版本以下使用自定义标签只有 ByteMD 编辑器才会生效
标注
<joe-callout color="#f0ad4e" content="标注内容"></joe-callout>
<joe-callout color="#f0ad4e" content="标注内容"></joe-callout>
居中标题
<joe-title title="Hello JavaScript"></joe-title>
<joe-title title="Hello JavaScript"></joe-title>
多彩按钮
<joe-btn color="#50bfff" content="多彩按钮"></joe-btn>
<joe-btn color="#50bfff" content="多彩按钮"></joe-btn>
<joe-btn color="#409eff" content="圆角按钮" radius="6px"></joe-btn>
<joe-btn color="#409eff" content="圆角按钮" radius="6px"></joe-btn>
<joe-btn icon="joe-font joe-icon-yumao" color="#50bfff" content="带图标按钮"></joe-btn>
<joe-btn icon="joe-font joe-icon-yumao" color="#50bfff" content="带图标按钮"></joe-btn>
更多icon图标类名请查看:joe iconfont
<joe-btn color="#409eff" content="带链接按钮" href="#"></joe-btn>
<joe-btn color="#409eff" content="带链接按钮" href="#"></joe-btn>
标签按钮
<joe-note icon="joe-font joe-icon-tag" type="secondary" content="标签按钮" href="#" ></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="info" content="标签按钮" href="#" ></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="success" content="标签按钮" href="#" ></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="warning" content="标签按钮" href="#" ></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="error" content="标签按钮" href="#" ></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="secondary" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="info" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="success" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="warning" content="标签按钮" href="#"></joe-note>
<joe-note icon="joe-font joe-icon-tag" type="error" content="标签按钮" href="#"></joe-note>
消息提示
<joe-message type="info" content="信息"></joe-message>
<joe-message type="success" content="成功"></joe-message>
<joe-message type="warning" content="警告"></joe-message>
<joe-message type="error" content="错误"></joe-message>
<joe-message type="info" content="信息"></joe-message>
<joe-message type="success" content="成功"></joe-message>
<joe-message type="warning" content="警告"></joe-message>
<joe-message type="error" content="错误"></joe-message>
提示方框
<joe-alert type="info" content="信息"></joe-alert>
<joe-alert type="success" content="成功"></joe-alert>
<joe-alert type="warning" content="警告"></joe-alert>
<joe-alert type="error" content="错误"></joe-alert>
<joe-alert type="info" content="信息"></joe-alert>
<joe-alert type="success" content="成功"></joe-alert>
<joe-alert type="warning" content="警告"></joe-alert>
<joe-alert type="error" content="错误"></joe-alert>
彩色虚线
<joe-dotted startcolor="#409eff" endcolor="#4cd327"></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#ffbb76"></joe-dotted>
进度条
<joe-progress percentage="50%" color="#409eff"></joe-progress>
<joe-progress percentage="50%" color="#2bde3f"></joe-progress>
卡片
<joe-card-default width="100%" title="卡片标题" content="<p class='_temp'>卡片内容</p>"></joe-card-default>
<joe-card-default width="100%" title="卡片标题"></joe-card-default>
<joe-card-describe title="卡片标题" content="<p class='_temp'>卡片内容</p>"></joe-card-describe>
<joe-card-describe title="卡片标题" content="<p class='_temp'卡片内容</p>"></joe-card-describe>
网盘按钮
<joe-cloud type="default" title="" url="" password=""></joe-cloud>
<joe-cloud type="360" title="" url="" password=""></joe-cloud>
<joe-cloud type="bd" title="" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" title="" url="" password=""></joe-cloud>
<joe-cloud type="ct" title="" url="" password=""></joe-cloud>
<joe-cloud type="wy" title="" url="" password=""></joe-cloud>
<joe-cloud type="github" title="" url="" password=""></joe-cloud>
<joe-cloud type="gitee" title="" url="" password=""></joe-cloud>
<joe-cloud type="lz" title="" url="" password=""></joe-cloud>
<joe-cloud type="default" title="" url="" password=""></joe-cloud>
<joe-cloud type="360" title="" url="" password=""></joe-cloud>
<joe-cloud type="bd" title="" url="" password="bn6f"></joe-cloud>
<joe-cloud type="ty" title="" url="" password=""></joe-cloud>
<joe-cloud type="ct" title="" url="" password=""></joe-cloud>
<joe-cloud type="wy" title="" url="" password=""></joe-cloud>
<joe-cloud type="github" title="" url="" password=""></joe-cloud>
<joe-cloud type="gitee" title="" url="" password=""></joe-cloud>
<joe-cloud type="lz" title="" url="" password=""></joe-cloud>
音频
<joe-mp3 name="天生狂野-柴古唐斯主题曲" url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3" theme="#1989fa" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>
<joe-mp3 name="天生狂野-柴古唐斯主题曲" url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3" theme="#1989fa" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>
网易云单曲
<joe-music id="188432" color="#1989fa" autoplay="false"></joe-music>
<joe-music id="188432" color="#1989fa" autoplay="false"></joe-music>
网易云歌单
<joe-music-list id="737535139" color="#1989fa" autoplay="false"></joe-music-list>
<joe-music-list id="737535139" color="#1989fa" autoplay="false"></joe-music-list>
视频
<joe-dplayer width="100%" height="500px" src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4" ></joe-dplyer>
<joe-dplayer width="100%" height="500px" src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4" ></joe-dplyer>
哔哩哔哩视频
<joe-bilibili width="100%" height="500px" bvid="BV12h411k7vr"></joe-bilibili>
<joe-bilibili width="100%" height="500px" bvid="BV12h411k7vr"></joe-bilibili>
Tabs(不支持默认、StackEdit编辑器,支持ByteMD编辑器)
<joe-tabs>
<div class="_temp">
{tabs-pane Tab 1}Content of Tab Pane 1{/tabs-pane}
{tabs-pane Tab 2}Content of Tab Pane 2{/tabs-pane}
</div>
</joe-tabs>
时间线(不支持默认、StackEdit编辑器,支持ByteMD编辑器)
<joe-timeline>
<div class="_temp">
{timeline-item color="#1d72f3"}2023-07-07{/timeline-item}
{timeline-item color="#2bde3f"}2023-08-08{/timeline-item}
{timeline-item color="#ffc007"}2023-09-09{/timeline-item}
</div>
</joe-timeline>
评论区