SUNwiki SUN的wiki 2024-03-12T10:23:07.577Z https://wiki.yuchen.icu/ YuChenSUN Hexo 测试 https://wiki.yuchen.icu/1970/01/01/aaa/ 1970-01-01T00:00:00.000Z 2024-03-12T10:23:07.577Z 教程

这是一篇讲解如何正确使用 Markdown 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。

引用文本：Markdown is a text formatting syntax.

语法指导

普通内容

这段内容展示了在内容里面一些排版格式，比如：

  • 加粗 - **加粗**
  • 倾斜 - *倾斜*
  • 删除线 - ~~删除线~~
  • Code 标记 - `Code 标记`
  • 超级链接 - [超级链接](https://lddgo.net)
  • username@gmail.com - [username@gmail.com](mailto:username@gmail.com)

大标题 - Heading 3

你可以选择使用 H1 至 H6，使用 ##(N) 打头。

NOTE: 别忘了 # 后面需要有空格！

Heading 4

Heading 5
Heading 6

图片

1
2
![alt 文本](http://image-path.png)
![alt 文本](http://image-path.png "图片 Title 值")

代码块

普通

1
2
3
*emphasize*    **strong**
_emphasize_    __strong__
var a = 1

语法高亮支持

如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:

演示 Go 代码高亮
1
2
3
4
5
6
7
package main

import "fmt"

func main() {
fmt.Println("Hello, 世界")
}
演示 Java 高亮
1
2
3
4
5
6
7
public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello World!");
    }

}

Tip: 语言名称支持下面这些: ruby, python, js, html, erb, css, coffee, bash, json, yml, xml …

有序、无序、任务列表

无序列表

  • Java
    • Spring
      • IoC
      • AOP
  • Go
    • gofmt
    • Wide
  • Node.js
    • Koa
    • Express

有序列表

  1. Node.js
    1. Express
    2. Koa
    3. Sails
  2. Go
    1. gofmt
    2. Wide
  3. Java
    1. Latke
    2. IDEA

任务列表

  • [X] 发布 Sym
  • [X] 发布 Solo
  • [ ] 预约牙医

表格

如果需要展示数据什么的，可以选择使用表格。

header 1header 2
cell 1cell 2
cell 3cell 4
cell 5cell 6

隐藏细节

这里是摘要部分。这里是细节部分。

段落

空行可以将内容进行分段，便于阅读。（这是第一段）

使用空行在 Markdown 排版中相当重要。（这是第二段）

链接引用

链接文本

LDDGO.NET

1
[链接文本](链接地址)

数学公式

多行公式块：

$$
\frac{1}{
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}}{1+\cdots}}
}
}

$$

行内公式：

公式 $a^2 + b^2 = color{red}c^2$ 是行内。

脑图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
- 教程
- 语法指导
  - 普通内容
  - 大标题 - Heading 3
    - Heading 4
      - Heading 5
        - Heading 6
  - 图片
  - 代码块
    - 普通
    - 语法高亮支持
      - 演示 Go 代码高亮
      - 演示 Java 高亮
  - 有序、无序、任务列表
    - 无序列表
    - 有序列表
    - 任务列表
  - 表格
  - 隐藏细节
  - 段落
  - 链接引用
  - 数学公式
  - 脑图
  - 流程图
  - 时序图
  - 甘特图
  - 图表
  - 五线谱
  - Graphviz
  - 脚注

流程图

1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

时序图

1
2
3
4
5
sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Every minute
        John-->>Alice: Great!
    end

甘特图

1
2
3
4
5
6
7
8
9
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2019-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2019-01-12  , 12d
    another task      : 24d

图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "title": { "text": "最近 30 天" },
  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
  "legend": { "data": ["帖子", "用户", "回帖"] },
  "xAxis": [{
      "type": "category",
      "boundaryGap": false,
      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
      "axisTick": { "show": false },
      "axisLine": { "show": false }
  }],
  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
  "series": [
    {
      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
    },
    {
      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
    },
    {
      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
    }
  ]
}

五线谱

1
2
3
4
5
6
7
8
9
10
11
12
X: 24
T: Clouds Thicken
C: Paul Rosen
S: Copyright 2005, Paul Rosen
M: 6/8
L: 1/8
Q: 3/8=116
R: Creepy Jig
K: Em
|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|"C7"_B2A "B7"=B3|"Em"EEE E2G|
"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|

Graphviz

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
digraph finite_state_machine {
    rankdir=LR;
    size="8,5"
    node [shape = doublecircle]; S;
    node [shape = point ]; qi

    node [shape = circle];
    qi -> S;
    S  -> q1 [ label = "a" ];
    S  -> S  [ label = "a" ];
    q1 -> S  [ label = "a" ];
    q1 -> q2 [ label = "ddb" ];
    q2 -> q1 [ label = "b" ];
    q2 -> q2 [ label = "b" ];
}

Flowchart

1
2
3
4
5
6
7
8
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

脚注

这里是一个脚注引用^1，这里是另一个脚注引用^bignote。

缩进对齐的段落包含在这个脚注定义内。

1
可以使用代码块。

还有其他行级排版语法，比如加粗和链接。

1
2
3
4
5
6
这里是一个脚注引用[^1]，这里是另一个脚注引用[^bignote]。
[^1]: 第一个脚注定义。
[^bignote]: 脚注定义可使用多段内容。

    缩进对齐的段落包含在这个脚注定义内。

可以使用代码块。
1
2

还有其他行级排版语法，比如**加粗**和[链接](https://lddgo.net)。
]]> <h2 id="教程">教程</h2> <p>这是一篇讲解如何正确使用 <strong>Markdown</strong> 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。</p> <blockquote> <p>引用文本：Markdown is a text for YuChenSUN Blog https://wiki.yuchen.icu/1970/01/01/hello-world/ 1970-01-01T00:00:00.000Z 2024-03-12T10:23:07.578Z 主要特性
  • 支持“标准”markdown / commonmark和github风格的语法，也可变身为代码编辑器；
  • 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
  • 支持toc（table of contents）、emoji表情、task lists、@链接等markdown扩展语法；
  • 支持tex科学公式（基于katex）、流程图 flowchart 和 时序图 sequence diagram;
  • 支持识别和解析html标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
  • 支持 amd / cmd 模块化加载（支持 require.js & sea.js），并且支持自定义扩展插件；
  • 兼容主流的浏览器（ie8+）和zepto.js，且支持ipad等平板设备；
  • 支持自定义主题样式；

editor.md

目录 (table of contents)

[tocm]

[toc]

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

heading 1 link heading link

标题（用底线的形式）heading (underline)

this is an h1

this is an h2

字符效果和横线等

删除线 删除线（开启识别html标签时）
斜体字 斜体字
粗体 粗体
粗斜体 粗斜体

上标：x2，下标：o2

缩写(同html的abbr标签)

即更长的单词或短语的缩写形式，前提是开启识别html标签时，已默认开启

the html specification is maintained by the w3c.

引用 blockquotes

引用文本 blockquotes

引用的行内混合 blockquotes

引用：如果想要插入空白换行即<br />标签，在插入处先键入两个以上的空格然后回车即可，普通链接。

普通链接

普通链接带标题

直接链接：https://github.com

锚点链接

gfm a-tail link @pandao

@pandao

多语言代码高亮 codes

行内代码 inline code

执行命令：npm install marked

缩进风格

即缩进四个空格，也做为实现类似<pre>预格式化文本(preformatted text)的功能。

<?php    echo "hello world!";?>

预格式化文本：

| first header  | second header || ------------- | ------------- || content cell  | content cell  || content cell  | content cell  |

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>hello world!</title>
    </head>
    <body>
        <h1>hello world!</h1>
    </body>
</html>

图片 images

image:

follow your heart.

图为：厦门白城沙滩

图片加链接 (image + link)：

图为：李健首张专辑《似水流年》封面

列表 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

项目价格数量
计算机$16005
手机$1212
管线$1234
first headersecond header
content cellcontent cell
content cellcontent cell
first headersecond header
content cellcontent cell
content cellcontent cell
function namedescription
help()display the help window.
destroy()destroy your computer!
left-alignedcenter alignedright aligned
col 3 issome wordy text$1600
col 2 iscentered$12
zebra stripesare neat$1
itemvalue
computer$1600
phone$12
pipe$1

特殊符号 html entities codes

© & ¨ ™ ¡ £
& < > ¥ € ® ± ¶ § ¦ ¯ « ·

x² y³ ¾ ¼ × ÷ »

18ºc " '

emoji表情 :smiley:

blockquotes :star:

gfm task lists & emoji & fontawesome icon emoji & editormd logo emoji :editormd-logo-5x:

  • [x] :smiley: @mentions, :smiley: #refs, links, formatting, and tags supported :editormd-logo:;
  • [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
  • [x] [ ] :smiley: this is a complete item :smiley:;
  • [ ] []this is an incomplete item test link :fa-star: @pandao;
  • [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
    • [ ] :smiley: this is an incomplete item test link :fa-star: :fa-gear:;
    • [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item test link;

反斜杠 escape

*literal asterisks*

科学公式 tex(katex)

$$e=mc^2$$

行内的公式$$e=mc^2$$行内的公式，行内的$$e=mc^2$$公式。

$$(\sqrt{3x-1}+(1+x)^2)$$

$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

多行公式：

1
2
3
4
5
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
1
2
3
4
5
6
7
8
9
\displaystyle 
    \frac{1}{
        \bigl(\sqrt{\phi \sqrt{5}}-\phi\bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        } 
    }
1
2
3
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi

绘制流程图 flowchart

1
2
3
4
5
6
7
8
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 yes or no?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op

绘制序列图 sequence diagram

1
2
3
4
andrew->china: says hello 
note right of china: china thinks\nabout it 
china-->andrew: how are you? 
andrew->>china: i am good thanks!

end

]]> <h3 id="主要特性">主要特性</h3> <ul> <li>支持“标准”markdown / commonmark和github风格的语法，也可变身为代码编辑器；</li> <li>支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自 成功在cloudflare部署hexo https://wiki.yuchen.icu/1970/01/01/success/ 1970-01-01T00:00:00.000Z 2024-03-12T10:23:07.578Z YuChen Hexo 部署指南

一个 [Hexo] 的样例，以便于在CloudFlare Pages部署

在CloudFlare Pages部署所用到的配置

环境变量值
NODE_VERSION16.17.1
NPM_VERSION8.15.0

构建框架：None

构建命令：bash sunbuild.sh

输出目录：public

然后点击构建就行了

唯一的想法就是真TM不容易啊

]]> <h1>YuChen Hexo 部署指南</h1> <p>一个 [Hexo] 的样例，以便于在CloudFlare Pages部署</p> <h2 id="在CloudFlare-Pages部署所用到的配置">在CloudFlare Pages部署所用到的配置</h2> <tab