You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
docs/versioned_docs/version-1.4/user-guide/markdown.md

212 lines
4.6 KiB

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

---
title: Markdown 语法
description: Halo 编辑器中所支持的 Markdown 语法说明
---
## 基础语法
Halo 使用的 `Markdown` 解析器为 [flexmark-java](https://github.com/vsch/flexmark-java),基于 [CommonMark (spec 0.28)](https://spec.commonmark.org/0.28/) 标准开发,语法参考:[https://spec.commonmark.org/0.28/](https://spec.commonmark.org/0.28/)。
## 代码块
````markdown
```language
代码块
```
````
其中language 为必填,如果不填写,很可能主题的代码高亮插件无法识别代码的语言,导致样式异常。举几个例子:
````markdown
```java
public static void main(String[] args){
    System.out.println("Hello World!");
}
```
````
````markdown
```javascript
console.log("Hello World!")
```
````
## TOC
在文章的最前面加上 `[TOC]` 即可。
## 自动链接
支持自动将一个链接解析为可点击的格式,如下:
```markdown
https://halo.run
```
将被解析为:
```html
<a href="https://halo.run">https://halo.run</a>
```
## Emoji
支持将 Emoji 的文字形式转化为图片形式,如下:
```markdown
:100:
```
将被解析为:
```html
💯
```
更多 Emoji 表情可访问:[https://emoji.svend.cc](https://emoji.svend.cc)
## 数学公式
行内公式:
```markdown
$a \ne 0$
```
段落公式:
```markdown
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$
```
> 需要注意的是,并不是每一款主题都支持显示数学公式,你可以先到你使用的主题设置中查看是否支持,如不支持,请看下面的解决方案。
首先,登陆到后台,进入 `系统 -> 博客设置 -> 其他设置`。将下面的代码复制到 `自定义内容页面 head`
```html
<script src="//cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
MathJax.Hub.Config({
'HTML-CSS': {
matchFontHeight: false
},
SVG: {
matchFontHeight: false
},
CommonHTML: {
matchFontHeight: false
},
tex2jax: {
inlineMath: [
['$','$'],
['\\(','\\)']
],
displayMath: [["$$", "$$"], ["\\[", "\\]"]]
}
});
});
</script>
```
## 图表
饼图:
````markdown
```mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
````
更多用法查看:[https://mermaidjs.github.io/#/](https://mermaidjs.github.io/#/)
> 需要注意的是,并不是每一款主题都支持显示图表,你可以先到你使用的主题设置中查看是否支持,如不支持,请看下面的解决方案。
首先,登陆到后台,进入 `系统 -> 博客设置 -> 其他设置`。将下面的代码复制到 `自定义内容页面 head`
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.4/dist/mermaid.min.js"></script>
```
## 短连接
:::tip
这属于实验性特性,也许我们将在未来的版本移除这个特性。
:::
Halo 内置一些短连接以更好地支持一些 HTML 语法,但是编辑器目前并不能解析,只能发布之后才可以看到效果,如下:
### 网易云音乐
#### 语法
```markdown
[music:id]
```
#### 示例
```markdown
[music:32507038]
```
#### 解析结果
```html
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32507038&auto=1&height=66"></iframe>
```
### 哔哩哔哩动画
#### 语法
```markdown
[bilibili:aid,width,height]
```
#### 示例
```markdown
[bilibili:65898131,256,256]
```
#### 解析结果
```html
<iframe height="256" width="256" src="//player.bilibili.com/player.html?aid=65898131" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
```
## 脚注
语法:
```markdown
[^脚注名]
[^脚注名]: 脚注内容
```
示例:
```markdown
驿外[^1]断桥边,寂寞开无主。已是黄昏独自愁,更着风和雨
[^1]: 驿指荒僻、冷清之地。驿驿站。
```
解析结果:
```html
<p>驿外<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>断桥边,寂寞开无主。已是黄昏独自愁,更着风和雨</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>驿指荒僻、冷清之地。驿驿站。 <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
```