前言
博客园一直推荐Markdown编写文章，然后试着用Markdown语法写了一篇文章，感觉确实挺方便。其实Markdown的应用还是比较广泛的，比如我们经常用的github项目的*.md*文件其实就是Markdown的缩写。所以写下这篇文章，方便记录自己写作的时候进行参考。由于本博客使用了Halo中的Joe2.0主题，所以本文还参考了M酷大佬的Joe2.0 样式指南这篇文章，再次感谢M酷大佬开源了如此优秀好看的博客样式😊。
Markdown简介
Markdown 是一种轻量级的「标记语言」，创始人为约翰·格鲁伯，用简洁的语法代替排版，目前被越来越多的知识工作者、写作爱好者、程序员或研究员广泛使用。其常用的标记符号不超过十个，相对于更为复杂的 HTML 标记语言来说，Markdown 十分的轻量，学习成本也不需要太多，且一旦熟悉这种语法规则，会有沉浸式编辑的效果。
Markdown特点
- 语法简单，能快速编写;
- 能直接阅读，没有HTML的各种标签的干扰;
- 使你更多的专注于写作，而不是排版样式。
Markdown语法
标题
以#开头，会转化为html的h1~h6标签
H1 :# Header 1
H2 :## Header 2
H3 :### Header 3
H4 :#### Header 4
H5 :##### Header 5
H6 :###### Header 6
文本样式
*斜体*
**粗体**
***加粗斜体***
~~删除线~~
<u>下划线</u>
<joe-mtitle title="居中标题"></joe-mtitle>
斜体
粗体
加粗斜体
删除线
下划线
列表
无序列表
使用+ , - , 或者 * 空格接文字，列表可以嵌套。
+ 学习是一种习惯
+ 学习本是一个不断抄袭、模仿、练习、创新的过程。
- 虽然，园中已有本人无法超越的同主题博文，为什么还是要写。
* 对于自己，博文只是总结。在总结的过程发现问题，解决问题。
+ 对于他人，在此过程如果还能附带帮助他人，那就再好不过了。
- 学习是一种习惯
- 学习本是一个不断抄袭、模仿、练习、创新的过程。
- 虽然，园中已有本人无法超越的同主题博文，为什么还是要写。
- 对于自己，博文只是总结。在总结的过程发现问题，解决问题。
- 对于他人，在此过程如果还能附带帮助他人，那就再好不过了。
有序列表
和word习惯相同，序号+点
1.学习本是一个不断抄袭、模仿、练习、创新的过程。
2.虽然，园中已有本人无法超越的同主题博文，为什么还是要写。
3.对于自己，博文只是总结。在总结的过程发现问题，解决问题。
4.对于他人，在此过程如果还能附带帮助他人，那就再好不过了。
1.学习本是一个不断抄袭、模仿、练习、创新的过程。
2.虽然，园中已有本人无法超越的同主题博文，为什么还是要写。
3.对于自己，博文只是总结。在总结的过程发现问题，解决问题。
4.对于他人，在此过程如果还能附带帮助他人，那就再好不过了。
任务列表
- [x] 吃饭
- [x] 睡觉
- [x] 打游戏
- [] 工作
- [] 锻炼
- [] 学习
- 吃饭
- 睡觉
- 打游戏
- 工作
- 锻炼
- 学习
代码
行内代码
`Markdown`是一种轻量级的「标记语言」
Markdown是一种轻量级的「标记语言」
代码块
使用三个`包含代码，使用时括号省略，为了反编译
(```)
我是一块代码块🐷~
(```)
我是一块代码块🐷~
(```)css|自定义标题
#Joe {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
(```)
#Joe {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
引用
>接文字，可多层嵌套
> 醉后不知天在水，满船清梦压星河。
> ——唐温如 《题龙阳县青草湖》
>> 冲天香阵透长安，满城尽带黄金甲。
>> ——黄巢《不第后赋菊》
>>> 黄沙百战穿金甲，不破楼兰终不还。
>>> ——王昌龄《从军行七首·其四》
醉后不知天在水，满船清梦压星河。
——唐温如 《题龙阳县青草湖》冲天香阵透长安，满城尽带黄金甲。
——黄巢《不第后赋菊》黄沙百战穿金甲，不破楼兰终不还。
——王昌龄《从军行七首·其四》
外链
使用 [描述](链接地址) 为文字增加外链接。
[搬砖的杰先生](https://www.cnblogs.com/codexj/)
图片
表格
- 有一个就行
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右
注：原生的语法两边都要用 | 包起来。此处省略
姓名|技能|排行
-|:-:|-:
师傅|念经|老大
孙悟空|打妖怪|大师兄
猪八戒|吃|二师兄
沙僧|沉默|三师弟
| 姓名 | 技能 | 排行 |
|---|---|---|
| 师傅 | 念经 | 老大 |
| 孙悟空 | 打妖怪 | 大师兄 |
| 猪八戒 | 吃 | 二师兄 |
| 沙僧 | 沉默 | 三师弟 |
按钮元素
多彩按钮
自定义自己想要的颜色
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>
自定义图标，达 6000+ 图标任你使用
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
自定义圆角度数，最大 18px
<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>
装饰元素
分割线
跑马灯
<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
{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>
渲染原始内容
主题默认对常用的 HTML 标签进行了样式美化，但有时候你可能不想应用这些样式。比如你想富文本内容中的样式能够原样展示，那么就需要用到这个标签来承载你的内容，该标签内的内容将 不会被外部样式和脚本污染，反之亦然。
俺是个3级标题，我有自己的样式
我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的
<joe-raw-content>
<div id="_raw">
<div
style="padding: 1px 10px;background: linear-gradient(45deg, #329891, #ffe266);"
>
<h3 style="color:blue;font-style:italic">
俺是个3级标题，我有自己的样式
</h3>
<p>我是原始内容，可以是任何合法的文本或HTML，我的样式和外界是隔离的</p>
</div>
</div>
</joe-raw-content>
头像框
列出了当前主题包含的头像框，方便大家进行选择
emoji 表情
列出一些通用表情元素，更多请参见这里
😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🤐🤑🤒🤓🤔🤕🤠🤡🤢🤣🤤🤥🤧🤨🤩🤪🤫🤬🤭🤮🤯🧐😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷😸😹😺😻😼😽😾😿🙀🙁🙂🙃🙄
媒体元素
图片预览
视频播放器
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
Bilibili 视频
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
PDF 预览
<joe-pdf src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0\-0a7b571b1a5b4a0d8f810a253afe7077.pdf"></joe-pdf>
网易云歌单
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
<joe-music id="1303046498"></joe-music>
音频播放器
<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="red" cover="https://bbchin.com/upload/2022/04/cgts.png" autoplay></joe-mp3>
提示元素
消息提示
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>
注意事项！！！
以上大部分为 webcomponents 组件，且仅在使用 halo-theme-joe2.0 主题时才能生效，请根据实际情况使用。
组件定义文件见主题目录下的 source/js/custom.js。
写在最后的话
for (int i = 0; i < 3; i++) {
System.out.print("6");
}
main方法执行以上代码，谢谢。🙃
评论区