技术文章

基本语法

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $aliqua$. 🏨

1
print("Hello World!")

image-20241231113343849

image-20241231113343849

$$e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n $$

这里是要跳转的目的地

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<u>Lorem</u> **ipsum** *dolor* ~~sit~~ amet, _consectetur_ ~adipiscing~ elit, `sed` <kbd>do</kbd> eiusmod tempor incididunt ut labore et dolore magna $aliqua$. :hotel:

```python
print("Hello World!")
```

![image-20241231113343849](img/image-20241231113343849.png)

[image-20241231113343849](img/image-20241231113343849.png)

$$
e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
$$

<!-- more -->

<span id="123">这里是要跳转的目的地</span>
  1. 1
  2. 2
  3. 3

Hello World!

Hello World!

Hello World!

1 2 3
4 5 6
7 8 9 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---

- [Recogeta's Blog](https://r3c0ger.github.io/)
- [Recogeta](https://github.com/R3c0ger)
- [Hexo](https://hexo.io/)

1. 1
2. 2
3. 3

> Hello World!
> > Hello World!
> >
> > > Hello World!

| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
| 7 | 8 | 9 |

HTML Snippets

代码样式

text

text

1
2
3
<code>text</code>

<samp>text</samp>

文本对齐

如果在编辑器中设置了首行缩进，那么左对齐的文本就不会跟随设置。

标题
敬礼！
2023年1月5日
1
2
3
4
5
<center>标题</center>

<div style="text-align: left">敬礼！</div>

<div style="text-align: right">2023年1月5日</div>

Ruby - 中日注音

大家好啊，我是电棍欧内的手，好汉

欧内的手，好汉大家好啊，我是电棍

大家好啊，我是电棍欧内的手，好汉欧内的手，好汉

大家好啊，我是电棍哎呀米诺唉乌兹诶乌兹阿诺哈下内大不是欧内的手好汉

後うしろ戸どノ主ぬし也なり

image-20241231134034198

1
2
3
4
5
6
7
8
9
<ruby>大家好啊，我是电棍<rt>欧内的手，好汉</rt> </ruby>

<ruby><rt>欧内的手，好汉</rt>大家好啊，我是电棍 </ruby>

<ruby>大家好啊，我是电棍<rt>欧内的手，好汉<rt>欧内的手，好汉</rt></rt></ruby>

<ruby>大家好啊，我是电棍<rt>哎呀米诺唉乌兹诶乌兹阿诺哈下内大不是欧内的手好汉</rt> </ruby>

<ruby>後<rt>うしろ</rt>戸<rt>ど</rt>ノ</ruby><ruby>主<rt>ぬし</rt>也<rt>なり</rt></ruby>

Details 可折叠内容

Click to expand
这里是隐藏内容，可以放置一些文字、图片、表格等。 
1
2
3
4
5
6
<details>
  <summary>Click to expand</summary>
  <div style="margin:auto;">
    这里是隐藏内容，可以放置一些文字、图片、表格等。
  </div>
</details>

图文绕排

左图幾相望是將萬壑暗燈低流水，我歌家洛陽八月，故君不見庭三五暮桃花君不見無人收，夢不成楓葉日暮青去閒川秋雨，十黃鶴低上青天⋯生明月花四萬八巴山夜刀忽聞。玉門舊業，聞松風正，昏師君不下君王聞道青山：城何當，生男情長風小，萬里送死生。酒船落出王孫難難，孤斗欲雲端看黃樓復萬里海，上望九黃河孤城⋯萬里花相與：一裳羽衣露三月起右图 來，隱客刀秦十年。流水盡樹五更雲雨，芙蓉一宮自可，下殘主人風秋月柳冥。骨日落君，瑟盤夜方昔日旌旗，迢宮萬君人未東風，乘淚折為，人事七數。

中江水芙蓉河⋯戰承恩入三秦歌與君⋯同是東風明月青山客何處相逢樓，使君龍：玉生明月頭昔此，官見江山取越溪女。石美酒春長風寂長安城心未，庭使人如何萬里春風尋露又，城雲雨昨夜在天涯昔，相識渡頭玉使人愁，千門萬壑聽西柳色：木月後江山處處雨輪臺公之斯。

1
<img src="img/nue-1.png" alt="左图" style="display: float; float: left; width: 35%; margin: 0px 6px 6px 0px; "/>幾相望是將萬壑暗燈低流水，我歌家洛陽八月，故君不見庭三五暮桃花君不見無人收，夢不成楓葉日暮青去閒川秋雨，十黃鶴低上青天⋯生明月花四萬八巴山夜刀忽聞。玉門舊業，聞松風正，昏師君不下君王聞道青山：城何當，生男情長風小，萬里送死生。酒船落出王孫難難，孤斗欲雲端看黃樓復萬里海，上望九黃河孤城⋯萬里花相與：一裳羽衣露三月起<img src="img/nue-2.png" alt="右图" style="display: float; float: right; width: 30%; margin: 0px 0px 6px 6px; "/> 來，隱客刀秦十年。流水盡樹五更雲雨，芙蓉一宮自可，下殘主人風秋月柳冥。骨日落君，瑟盤夜方昔日旌旗，迢宮萬君人未東風，乘淚折為，人事七數。
1
2
3
4
5
6
display: float; float: left; width: 50%; margin: 0px 6px 6px 0px; 
display: float; float: right; width: 50%; margin: 0px 0px 6px 6px; 
width: 100%;
width: 50%;
width: 75%;
width: 85%;

Multi-Column Layout 多栏布局

左图 → 右图 
1
2
3
4
5
6
7
<div style="margin:auto; align:center;">
  <figure class="clearfix" style="position: relative;" > 
    <img src="img/nue-1.png" alt="左图" style="box-sizing:border-box; float:left; width:48.5%; padding-right:2.5px;"/>
    <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">→</span>
    <img src="img/nue-2.png" alt="右图" style="box-sizing:border-box; float:right; width:48.5%; padding-left:2.5px;"/> 
  </figure>
</div><style>.clearfix::after {content: "";clear: both; display: table;}</style>
左图
一只鵺酱
右图
另一只鵺酱
1
2
3
4
5
6
7
8
9
10
11
12
<div style="margin:auto; align:center;">
  <figure class="clearfix" style="position: relative;" > 
    <div class="fig" alt="a" style="box-sizing:border-box; float:left; width:50%; padding-right:2.5px;">
      <img src="img/nue-1.png" alt="左图" />
      <center class="legend">一只鵺酱</center>
    </div>
    <div class="fig" alt="a" style="box-sizing:border-box; float:left; width:50%; padding-left:2.5px;">
      <img src="img/nue-2.png" alt="右图" />
      <center class="legend">另一只鵺酱</center>
    </div>
  </figure>
</div><style>h1 {counter-reset: figa}h2 {counter-reset: figb !important; counter-increment: figa} [alt~="a"] {counter-increment: figb;} [alt~="a"] center::before {content:"图 " counter(figa) "-" counter(figb) "　"; font-weight: bold;} center.legend {margin-top: 10px; } .clearfix::after {content: "";clear: both; display: table;}</style>
  • Lorem ipsum dolor
  • sit amet, consectetur adipiscing
  • elit, sed do eiusmod tempor
  • incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam,
  • quis nostrud exercitation
  • ullamco laboris nisi ut aliquip
  • ex ea commodo consequat.
  • Duis aute irure
  • Duis aute irure
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="column-count: 2; column-rule: 1px solid; margin-bottom: 0px; word-wrap: break-word; word-break: break-all;">
  <ul>
    <li>Lorem ipsum dolor</li>
    <li>sit amet, consectetur adipiscing</li>
    <li>elit, sed do eiusmod tempor</li>
    <li>incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam,</li>
    <li>quis nostrud exercitation</li>
    <li>ullamco laboris nisi ut aliquip</li>
    <li>ex ea commodo consequat.</li>
    <li>Duis aute irure</li>
    <li>Duis aute irure</li>
  </ul>
</div>

其他：换页、隐藏、小型大写字母、内嵌 SVG

换页

可用于 Typora 的导出为 PDF 功能中。

1
<div alt="pagebr" style="page-break-after: always; break-after: page;"></div>

隐藏文字

这里面的内容会在 Typora 的导出后隐藏

1
<span style="display:none">这里面的内容会在 Typora 的导出后隐藏</span>

小型大写字母

可以用来写英文简历。

This is a paragraph

1
<p style="font-variant: small-caps; font-weight:bold;">This is a paragraph</p>

内嵌 SVG

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

数学公式

可能用得上的符号

$\xlongequal[下面]{上面啊啊啊啊啊啊}$

$\color{red}{\Rule{8mm}{10mm}{5mm}这是个红色矩形}$

$\bbox[yellow]{黄色背景}\fbox{边框}$

$\displaystyle \textrm{CE}_c = -\sum_{i}^{M}\bbox[#66FFFF,4px]{y_i} \log{\hat{y_i}} = - \bbox[#66FFFF,4px]{1} \cdot \log{\hat{y_c}} - \sum_{d\ne c} \bbox[#66FFFF,4px]{0} \cdot\log{\hat{y_d}} = -\log{\hat{y_c}}$

1
2
3
4
5
6
7
$\xlongequal[下面]{上面啊啊啊啊啊啊}$

$\color{red}{\Rule{8mm}{10mm}{5mm}这是个红色矩形}$

$\bbox[yellow]{黄色背景}\fbox{边框}$

$\displaystyle \textrm{CE}_c = -\sum_{i}^{M}\bbox[#66FFFF,4px]{y_i} \log{\hat{y_i}} = - \bbox[#66FFFF,4px]{1} \cdot \log{\hat{y_c}} - \sum_{d\ne c} \bbox[#66FFFF,4px]{0} \cdot\log{\hat{y_d}} = -\log{\hat{y_c}}$

\require{}

$$\require{cancel} \begin{array}{rl} \verb|y+\cancel{x}| & y+\cancel{x} \\ \verb|\cancel{y+x}| & \cancel{y+x} \\ \verb|y+\bcancel{x}| & y+\bcancel{x} \\ \verb|y+\xcancel{x}| & y+\xcancel{x} \\ \verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x} \\ \verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\ \end{array} $$

1
2
3
4
5
6
7
8
9
10
11
$$
\require{cancel}
\begin{array}{rl}
    \verb|y+\cancel{x}| & y+\cancel{x} \\
    \verb|\cancel{y+x}| & \cancel{y+x} \\
    \verb|y+\bcancel{x}| & y+\bcancel{x} \\
    \verb|y+\xcancel{x}| & y+\xcancel{x} \\
    \verb|y+\cancelto{0}{x}| & y+\cancelto{0}{x} \\
    \verb+\frac{1\cancel9}{\cancel95} = \frac15+& \frac{1\cancel9}{\cancel95} = \frac15 \\
\end{array}
$$

$$\require{enclose} \enclose{box}{ \begin{array}{c} f(\top),\, f^2(\top),\, f^3(\top) \,\cdots\, f^n(\top) \\ f(\bot),\, f^2(\bot),\, f^3(\bot) \,\cdots\, f^n(\bot) \\ \end{array} } $$

1
2
3
4
5
6
7
8
9
$$
\require{enclose}
\enclose{box}{
    \begin{array}{c}
        f(\top),\, f^2(\top),\, f^3(\top) \,\cdots\, f^n(\top) \\
        f(\bot),\, f^2(\bot),\, f^3(\bot) \,\cdots\, f^n(\bot) \\
    \end{array}
}
$$

$$\require{enclose} \begin{array}{rll} 125 && \hbox{(Explanations)} \\[-3pt] 4 \enclose{longdiv}{500}\kern-.2ex \\[-3pt] \underline{4\phantom{00}} && \hbox{($4 \times 1 = 4$)} \\[-3pt] 10\phantom{0} && \hbox{($5 - 4 = 1$)} \\[-3pt] \underline{\phantom{0}8\phantom{0}} && \hbox{($4 \times 2 = 8$)} \\[-3pt] \phantom{0} 20 && \hbox{($10 - 8 = 2$)} \\[-3pt] \underline{\phantom{0}20} && \hbox{($4 \times 5 = 20$)} \\[-3pt] \phantom{00}0 \end{array} $$

1
2
3
4
5
6
7
8
9
10
11
12
13
$$
\require{enclose}
\begin{array}{rll}
    125 && \hbox{(Explanations)} \\[-3pt]
   4 \enclose{longdiv}{500}\kern-.2ex \\[-3pt]
      \underline{4\phantom{00}} && \hbox{($4 \times 1 = 4$)} \\[-3pt]
      10\phantom{0} && \hbox{($5 - 4 = 1$)} \\[-3pt]
      \underline{\phantom{0}8\phantom{0}} && \hbox{($4 \times 2 = 8$)} \\[-3pt]
      \phantom{0} 20 && \hbox{($10 - 8 = 2$)} \\[-3pt]
      \underline{\phantom{0}20} && \hbox{($4 \times 5 = 20$)} \\[-3pt]
      \phantom{00}0
  \end{array}
$$

Hexo 不支持 AMScd 和 AMDcd，并且会使整个页面所有公式崩掉；Typora 支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$$
\require{AMScd}
\begin{CD}
    A @>a>> B \\
    @V b V V\# @VV c V \\
    C @>>d> D \\
\end{CD}
\quad
\begin{CD}
    A @>>> B @>very long label>> C \\
    @. @AAA @| \\
    D @= E @<<< F \\
\end{CD}
$$
1
2
3
4
5
6
$$
\require{AMDcd}
\begin{CD}
    \rm{RCOHR^{'}SO_3Na} @>{\large\text{Hydrolysis, $\Delta$, Dil.HCl}}>> \rm{(RCOR^{'})+NaCl+SO_2+ H_2O}
\end{CD}
$$

Mermaid

Graph

graph LR
   A-.....-> |text| B
1
2
graph LR
   A-.....-> |text| B
graph LR
classDef q fill:#fff,stroke:#000
A[方形] -->B(圆角)
    B:::q--> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
1
2
3
4
5
6
7
graph LR
classDef q fill:#fff,stroke:#000
A[方形] -->B(圆角)
    B:::q--> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
graph TB
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
1
2
3
4
5
6
graph TB
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

Flowchart

flowchart LR
   A-. text .-> B
1
2
flowchart LR
   A-. text .-> B

Sequence chart 1

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram

  participant 张三
  participant 李四
  张三->>王五: 王五你好吗？
  loop 健康检查
      王五->>王五: 与疾病战斗
  end
  Note right of 王五: 合理 食物 
看医生...
  李四-->>张三: 很好!
  王五->李四: 你怎么样?
  李四-->王五: 很好!
1
2
3
4
5
6
7
8
9
10
11
12
13
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram

  participant 张三
  participant 李四
  张三->>王五: 王五你好吗？
  loop 健康检查
      王五->>王五: 与疾病战斗
  end
  Note right of 王五: 合理 食物 <br/>看医生...
  李四-->>张三: 很好!
  王五->李四: 你怎么样?
  李四-->王五: 很好!

Sequence chart 2

sequenceDiagram
autonumber

    title: 时序图例子
    Alice->>Alice: 自言自语
    Alice-->>John: hello john,
    note over Alice, John: friend
    loop loop1
        John-->>John: Fight agaist hypochondra
    end
    
    note right of John: Rational
    
    John-->>Alice: Great!
    John->>Bob: How about you?
    
    %% 控制焦点：用来表示时序图中对象执行某个操作的一段时间
    %% activate 角色名：表示激活控制焦点
    activate Bob
        Bob-->>John:Jolly good!
    %% deactivate 角色名 表示控制焦点结束
    deactivate Bob
    
    Alice->>+Bob: Hello Bob, how are you?
    
    rect rgb(175, 255, 212)
        alt is sick
            Bob-->>Alice: Not so good :(
        else is well
            Bob-->>Alice: Feeling fresh like a daisy
        end
        
        opt Extra response
            Bob-->>Alice: Thanks for asking
        end
    end
    
    loop communicating
        Alice->>+John: asking some questions
        John-->>-Alice: answer 
    end
    
    par Alice to John
        Alice->>John: Bye
    and Alice to Bob
        Alice->>Bob: Bye
    end
  
    Alice-xJohn: 这是一个异步调用
    Alice--xBob: 这是一个异步调用
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
sequenceDiagram
autonumber

    title: 时序图例子
    Alice->>Alice: 自言自语
    Alice-->>John: hello john,
    note over Alice, John: friend
    loop loop1
        John-->>John: Fight agaist hypochondra
    end
    
    note right of John: Rational
    
    John-->>Alice: Great!
    John->>Bob: How about you?
    
    %% 控制焦点：用来表示时序图中对象执行某个操作的一段时间
    %% activate 角色名：表示激活控制焦点
    activate Bob
        Bob-->>John:Jolly good!
    %% deactivate 角色名 表示控制焦点结束
    deactivate Bob
    
    Alice->>+Bob: Hello Bob, how are you?
    
    rect rgb(175, 255, 212)
        alt is sick
            Bob-->>Alice: Not so good :(
        else is well
            Bob-->>Alice: Feeling fresh like a daisy
        end
        
        opt Extra response
            Bob-->>Alice: Thanks for asking
        end
    end
    
    loop communicating
        Alice->>+John: asking some questions
        John-->>-Alice: answer 
    end
    
    par Alice to John
        Alice->>John: Bye
    and Alice to Bob
        Alice->>Bob: Bye
    end
  
    Alice-xJohn: 这是一个异步调用
    Alice--xBob: 这是一个异步调用

Gantt chart 甘特图

gantt
    dateFormat  YYYY-MM-DD
    title 软件开发甘特图

    section 设计
    需求: done, des1, 2014-01-06, 2014-01-08
    原型: active, des2, 2014-01-09, 3d
    UI设计: des3, after des2, 5d
    未来任务: des4, after des3, 5d

    section 开发
    学习准备理解需求: crit, done, 2014-01-06, 24h
    设计框架: crit, done, after des2, 2d
    开发: crit, active, 3d
    未来任务: crit, 5d
    耍: 2d

    section 测试
    功能测试: active, a1, after des3, 3d
    压力测试: after a1, 20h
    测试报告: 48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
gantt
    dateFormat  YYYY-MM-DD
    title 软件开发甘特图

    section 设计
    需求: done, des1, 2014-01-06, 2014-01-08
    原型: active, des2, 2014-01-09, 3d
    UI设计: des3, after des2, 5d
    未来任务: des4, after des3, 5d

    section 开发
    学习准备理解需求: crit, done, 2014-01-06, 24h
    设计框架: crit, done, after des2, 2d
    开发: crit, active, 3d
    未来任务: crit, 5d
    耍: 2d

    section 测试
    功能测试: active, a1, after des3, 3d
    压力测试: after a1, 20h
    测试报告: 48h

Other tricks 其他技巧

全角空白符

吾问无为谓吾问无为谓无无无无无无无无无无无
　　为吾无无无无无无无无无无无无无无无无无

1
　

内链

123

基本语法

1
2
3
4
5
6
7
# 基本语法

<span id="123">这里是要跳转的目的地</span>

[123](#123)

[基本语法](#基本语法)

其他

  • 无序列表回车之后再按一次退格键删去序号，在当前的空白处添加一个空的 HTML 标签 <div></div>，导出时无序列表各行之间的间距就不会被压缩。

彩蛋

本文作者：Recogeta @ Recogeta's Blog

本文链接：https://r3c0ger.github.io/2024/12/markdown-snippets/

本文标题：「Markdown Snippets」

本文发布时间：2024-12-28 12:08:54

本文修改时间：2025-01-11 00:42:55

本文版权：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！