blog-hexo/source/_posts/Markdown Sample.md
2024-04-05 11:14:12 +08:00

267 lines
6.0 KiB
Markdown
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Markdown Sample
description: A very simple way to add structured data to a page.
status: done
top: 0
categories:
- Hexo
keywords: >-
Markdown, 代码高亮 (Codes), 引用 (Blockquotes), 列表 (Lists), 图片 (Images), 表格
(Tables), Emoji, TeX(KaTeX), 流程图 (mermaid)
use: mermaid,katex,twikoo
abbrlink: 24908
---
# Linear Markdown Sample
![markdown](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
# 字符效果和横线等
----
~~删除线~~ <s>删除线开启识别HTML标签时</s>
*斜体字* _斜体字_
**粗体** __粗体__
***粗斜体*** ___粗斜体___
上标X<sub>2</sub>下标O<sup>2</sup>
**缩写(同HTML的abbr标签)**
> 即更长的单词或短语的缩写形式前提是开启识别HTML标签时已默认开启
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
# 引用 Blockquotes
> 引用文本 Blockquotes
引用的行内混合 Blockquotes
> 引用:如果想要插入空白换行`即<br />标签`,在插入处先键入两个以上的空格然后回车即可,[普通链接](http://localhost/)。
# 锚点与链接 Links
[普通链接](http://localhost/)
[普通链接带标题](http://localhost/ "普通链接带标题")
直接链接:<https://github.com>
https://baidu.com
[锚点链接][anchor-id]
[anchor-id]: http://www.this-anchor-link.com/
[mailto:test.test@gmail.com](mailto:test.test@gmail.com)
GFM a-tail link [@pandao](https://my.oschina.net/u/3691274) 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com
> @pandao
# 多语言代码高亮 Codes
## 行内代码 Inline code
执行命令:`npm install marked`
## JS代码 
```javascript
function test() {
console.log("Hello world!");
}
(function(){
var box = function() {
return box.fn.init();
};
box.prototype = box.fn = {
init : function(){
console.log('box.init()');
return this;
},
add : function(str) {
alert("add", str);
return this;
},
remove : function(str) {
alert("remove", str);
return this;
}
};
box.fn.init.prototype = box.fn;
window.box =box;
})();
var testBox = box();
testBox.add("jQuery").remove("jQuery");
```
## HTML 代码 HTML codes
```html
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<meta name="keywords" content="Editor.md, Markdown, Editor" />
<title>Hello world!</title>
<style type="text/css">
body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}
ul{list-style: none;}
img{border:none;vertical-align: middle;}
</style>
</head>
<body>
<h1 class="text-xxl">Hello world!</h1>
<p class="text-green">Plain text</p>
</body>
</html>
```
# 图片 Images
Image:
![](https://pandao.github.io/editor.md/examples/images/4.jpg)
> Follow your heart.
![](https://pandao.github.io/editor.md/examples/images/8.jpg)
> 图为:厦门白城沙滩
图片加链接 (Image + Link)
[![](https://pandao.github.io/editor.md/examples/images/7.jpg)](https://pandao.github.io/editor.md/images/7.jpg "李健首张专辑《似水流年》封面")
> 图为:李健首张专辑《似水流年》封面
----
# 列表 Lists
## 无序列表减号Unordered Lists (-)
- 列表一
- 列表二
- 列表三
## 无序列表星号Unordered Lists (*)
* 列表一
* 列表二
* 列表三
## 无序列表加号和嵌套Unordered Lists (+)
+ 列表一
+ 列表二
+ 列表二-1
+ 列表二-2
+ 列表二-3
+ 列表三
* 列表一
* 列表二
* 列表三
## 有序列表 Ordered Lists (-)
1. 第一行
2. 第二行
3. 第三行
## GFM task list
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
----
# 绘制表格 Tables
| 项目 | 价格 | 数量 |
| ------ | ----: | :---: |
| 计算机 | $1600 | 5 |
| 手机 | $12 | 12 |
| 管线 | $1 | 234 |
| First Header | Second Header |
| ------------ | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| First Header | Second Header |
| ------------ | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Function name | Description |
| ------------- | -------------------------- |
| `help()` | Display the help window. |
| `destroy()` | **Destroy your computer!** |
| Left-Aligned | Center Aligned | Right Aligned |
| :------------ | :-------------: | ------------: |
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Item | Value |
| -------- | ----: |
| Computer | $1600 |
| Phone | $12 |
| Pipe | $1 |
# 科学公式 TeX(KaTeX)
$$E=mc^2$$
$$x > y$$
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
# 绘制流程图 mermaid
{% mermaid %}
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
{% endmermaid %}
End