example | nextjs-particlex-theme

Markdown是一种轻量级的「标记语言」。

1 Markdown语法教程

1.1 标题

不同数量的#可以完成不同的标题.。

1.2 字体

粗体、斜体、粗体和斜体，删除线，需要在文字前后加不同的标记符号。如下：

这个是粗体

这个是斜体

这个是粗体加斜体

~~这里是删除线~~

注：如果想给字体换颜色、字体或者居中显示，需要使用内嵌HTML来实现。

1.3 无序列表

无序列表的使用，在符号-后加空格使用。如下：

无序列表 1
无序列表 2
无序列表 3

如果要控制列表的层级，则需要在符号-前使用空格。如下：

无序列表 1
无序列表 2
- 无序列表 2.1
- 无序列表 2.2

1.4 有序列表

有序列表的使用，在数字及符号.后加空格后输入内容，如下：

有序列表 1
有序列表 2
有序列表 3

1.5 引用

引用的格式是在符号>后面书写文字。如下：

读一本好书，就是在和高尚的人谈话。 ——歌德

雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰

1.6 链接

particlex

1.7 图片

1.8 分割线

可以在一行中用三个以上的减号来建立一个分隔线，同时需要在分隔线的上面空一行。如下：

1.9 表格

可以使用冒号来定义表格的对齐方式，如下：

| 姓名 | 年龄 | 工作 | | :--------- | :--: | -----------: | | 小可爱 | 18 | 吃可爱多 | | 小小勇敢 | 20 | 爬棵勇敢树 | | 小小小机智 | 22 | 看一本机智书 |

1.10 代码块

如果在一个行内需要引用代码，只要用反引号引起来就好，如下：

Use the printf() function.

在需要高亮的代码块的前一行及后一行使用三个反引号，同时第一行反引号后面表示代码块所使用的语言，如下：

// FileName: HelloWorld.java
public class HelloWorld {
  // Java 入口程序，程序从此入口
  public static void main(String[] args) {
    System.out.println("Hello,World!"); // 向控制台打印一条语句
  }
}
java

<hello>
	<world></world>
</hello>
xml

2 其他语法

2.1 HTML

支持原生 HTML 语法，请写内联样式，如下：

<span style="display: block; text-align: center; color: orangered">橙色居中</span>
md

效果(橙色居中)：

橙色居中

2.2 Mdx

Caution

在 mdx 中必须使用 React 语法，例如 class 需要写成 className, style需要提供一个对象而不是直接的字符串。

由于使用 SSR 渲染，所以无法绑定事件。

支持 mdx + tailwindcss.

基础使用

<dib className="text-orange-500 text-right">hello</dib>
html

效果(橙色居右)：

hello

图表

由于 mermaid 不支持 SSR，所以使用了支持 SSR 的 Pintor 来绘制流程图。

<PintoraDiagram code={`
activityDiagram
title: Activity Example
start
partition Init {
  :read config;
  :init internal services;
  note left: init themes
}
:Diagram requested;
if (diagram registered ?) then
  :get implementation;
else (no)
  :print error;
endif
switch ( renderer type )
case ( svg )
  :Generate svg;
case ( canvas )
  :Draw canvas;
case ( custom )
  :Custom renderer output;
endswitch
while (data available?) is (可用)
  :read data;
  :generate diagrams;
endwhile (no)
end
`}/>
html

效果：

2.3 Github 警告

Note

Note 123

Tip

TIP 123

Important

IMPORTANT 123

Warning

WARNING 123

Caution

CAUTION 123

> [!NOTE]
> Note 123

> [!TIP]
> TIP 123

> [!IMPORTANT]
> IMPORTANT 123

> [!WARNING]
> WARNING 123

> [!CAUTION]
> CAUTION 123
text