Yuanjing 开发速查手册

这是您可以在 Yuanjing 备忘单上使用的样式参考，快速参与贡献！

入门本地编译预览克隆仓库安装依赖编译生成 HTML 页面目录结构添加一个开发速查手册首页导航首页提示配置Markdown 语法注释介绍注释语法介绍语法示例示例，三行占位，标题红色参数说明文字颜色文字大小强制换行展示表格表头代码行高亮TooltipsH3 部分(卡片)背景颜色红色标题快捷键样式代码行号内置类样式颜色标签HTML 代码预览隐藏卡片标题注释类配置KaTeX 数学渲染布局H2 部分占位布局 style 写法卡片栏布局 style 写法H3 部分卡片合并行布局 1卡片列合并布局 2卡片列合并布局 3卡片列合并布局 4卡片列合并布局 5卡片列合并布局 6卡片列合并布局 7卡片列合并布局 8卡片列合并布局 9表格基本表格DateTime快捷键展示标题列表样式展示表格列表箭头样式展示表格隐藏表头强制小尺寸自动换行表格末尾列左对齐列表一栏(默认)四列列表步骤没有标记圆圈标记箭头标记H2 部分 - 5列效果展示OneTwoThreeFourFiveH3 部分 - 占位效果展示row-span-2col-span-2红色标题黄色标题col-span-3卡片子项H4 子标题H4 子标题H3 部分H3 部分背景颜色

入门

本地编译预览

将仓库克隆到本地调试页面。请参阅贡献指南了解如何开始

克隆仓库

git clone git@github.com:jaywcjlove/reference.git

安装依赖编译生成 HTML 页面

npm i         # 安装依赖
npm run build # 编译输出 HTML

HTML 存放在仓库根目录下的 dist 目录中，将 dist/index.html 静态页面在浏览器中打开预览。

npm run start # 监听 md 文件编译输出 HTML

目录结构

.
├── CONTRIBUTING.md   # 贡献说明
├── Dockerfile
├── LICENSE
├── README.md  # 🌐 Home(首页)内容
├── dist       # 📦 编译后的静态资源目录
├── docs       # 👈 Markdown 文档(速查手册)
│   ├── bash.md
│   ├── ....
│   └── yaml.md
├── .refsrc.json # refs 配置
├── package.json
└── assets  # LOGO 图标文件资源

添加一个开发速查手册

一个简单的开发速查手册包含 页面大标题<h1>，放在大标题下面的 介绍 文本，<h2> 分类标题，<h3> 内容为 卡片

开发速查手册 (页面大标题)
===

这是您可以在当前清单上使用的样式参考！开发速查手册介绍

入门 (分类标题)
---

### 介绍 (卡片)

卡片内容

上面 markdown 内容存放到 docs 目录中，命名为 xxx.md

首页导航

首页(README.md)存放在仓库的根目录，通过这个 README.md 自动生成首页导航，下面是导航实例：

## Linux 命令

[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
<!--rehype:class=home-card-->

首页导航图标存放在 scripts/assets 目录中，如果你的开发速查手册定义为 docs/cron.md，那么你的图标就定义为 cron.svg 存放到 scripts/assets 目录中，重新编译首页当行菜单就拥有了图标。

  • 图标存放在 scripts/assets 目录中
  • 图片名称与清单名称保持一致 cron.md -> cron.svg (注意大小写)
  • SVG 图标尺寸 <svg height="1em" width="1em"
  • SVG 图标颜色使用继承颜色值 <svg fill="currentColor"
  • 使用 <!--rehype:class=home-card--> 标识卡片样式

首页提示配置

[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing-->

添加 contributing 类名，会在卡片下方默认添加 👆待完善需要您的参与

class=tag&data-info=👆看看还缺点儿什么？

上面示例将默认提示更改为： 👆看看还缺点儿什么？

[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=tag&data-lang=Python-->

添加 class=tag&data-lang=Python 类名和参数，会在卡片右上角标记 Python

Markdown 语法注释

介绍

在开发速查手册采用 HTML 注释语法，标识网站布局和一些样式，目的是为了在 GitHub 中也是正常毫无瑕疵的预览 Markdown。

### 卡片标题
<!--rehype:wrap-class=col-span-2-->

卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
<!--rehype:style=color: red;-->

上面基础示例，使用 col-span-2 类标识，卡片占 2 列位置，参考现有开发速查手册的源代码是一个好习惯！

注释语法介绍

  • 在某个 Markdown 语法下方或者后面，添加 HTML注释
  • 以 <!--rehype: 开始，--> 结束，包裹参数内容
  • 内容采用 URL 参数的字符拼接方式

语法

<!--rehype: + key=value + & + key=value + -->
标识开始 + 参数 + 分隔符(&) + 参数 + 标识结束

示例

## H2 部分
<!--rehype:body-class=cols-2-->

### H3 部分
<!--rehype:wrap-class=row-span-2-->

示例，三行占位，标题红色

### 标题
<!--rehype:wrap-class=row-span-3&style=color:red;-->

参数说明

类说明
body-style包裹所有卡片外壳的样式
body-class用于卡片栏布局，添加类名
wrap-style卡片栏添加 CSS 样式
wrap-class用于卡片占位，添加类名

文字颜色

_我是红色_<!--rehype:style=color: red;-->
**加粗红色**<!--rehype:style=color: red;-->

上面添加注释样式，文字 我是红色 文字变红了

文字大小

**加粗变大红色**
<!--rehype:style=color: red;font-size: 18px-->

上面添加注释样式，文字 加粗变大红色 变红并且大了

强制换行

\```js
function () {}
\```
<!--rehype:className=wrap-text-->

如果代码块内容太长，使用强制换行类(wrap-text)解决

展示表格表头

| Key  | value |
| ---- | ----- |
| `键` | 值    |
<!--rehype:className=show-header-->

注释配置添加 show-header 类，放置在表格下面，表头将被展示出来。

代码行高亮

import React from "react";
import "./Student.css";

export const Student = (
  <div className="Student"></div>
);

上面 {1,4-5} 行代码高亮，下面是 Markdown 代码示例

  ```jsx {1,4-5}

代码行高亮可以和代码行号一起使用。

Tooltips

鼠标移动到上面有提示Tooltips 的提示内容

添加注释配置 <!--rehype:tooltips--> 添加一个 Tooltips 提示。

H3 部分(卡片)背景颜色

### H3 部分(卡片)背景颜色
<!--rehype:wrap-style=background: #8dffd42e;-->

红色标题

### 红色标题
<!--rehype:style=background:#e91e63;-->

在 H3 标题下面添加样式标注 <!--rehype:style=background:#e91e63;-->

快捷键样式

Keyvalue
快捷键说明
快捷键说明

列表添加 <!--rehype:className=shortcuts--> 样式类，展示快捷键样式。

代码行号

export const Student = <div>学生</div>;
const school = <div>学校</div>;

下面是 Markdown 代码示例

  ```jsx showLineNumbers

标记语言后面添加 showLineNumbers 标识

内置类样式

:--
shortcuts快捷键样式
wrap-text超出换行
show-header展示表头
style-none隐藏 <ul> 列表样式
style-list<table> 单元格行展示

颜色标签

:--
<yel>黄色
<red>红色
<pur>紫色
<code> 或 ``绿色
<del> 或 ~~删除~~红色

HTML 代码预览

  ```html preview
  <b>这里是你的 HTML 代码</b>
  \```

这里是你的 HTML 代码

上面的 markdown 代码在 meta 位置添加 preview 标识，HTML 代码将被执行预览

隐藏卡片标题，在 H3 标题下面添加注释样式

### 隐藏卡片标题
<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->

注释类配置

类说明
<!--rehype:className=wrap-text-->强制换行
<!--rehype:className=show-header-->展示表格表头
<!--rehype:className=shortcuts-->快捷键样式
<!--rehype:className=auto-wrap-->隐藏表头强制小尺寸自动换行
<!--rehype:className=style-list-arrow-->列表箭头样式展示表格
<!--rehype:className=style-list-->列表样式展示表格
<!--rehype:className=left-align-->表格末尾列左对齐
<!--rehype:className=style-none--><li> 没有标记样式
<!--rehype:className=style-timeline-->时间轴样式
<!--rehype:className=style-arrow-->箭头标记

KaTeX 数学渲染

c=±a2+b2L=12ρv2SCLc = \pm\sqrt{a^2 + b^2}
L = \frac{1}{2} \rho v^2 S C_L

上面示例 Markdown 代码源码

  ```KaTeX
  c = \pm\sqrt{a^2 + b^2}
  L = \frac{1}{2} \rho v^2 S C_L

还可以单行展示 c=±a2+b2c = \pm\sqrt{a^2 + b^2}，需要标记 `KaTeX:数学公式` 将被显示成数学公式，这是基于 KaTeX 生成

布局

H2 部分

H2 部分
---

### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)

上面实例 H2 部分 标题下面有三个卡片，默认 3 栏布局。

H2 部分
---
<!--rehype:body-class=cols-2-->
### 卡片 1 (H3 部分)
### 卡片 2 (H3 部分)
### 卡片 3 (H3 部分)

使用注释配置为 H2 部分 添加 col-span-2 类，将 3 栏布局变成 2 栏布局。

类说明
cols-11 栏卡片布局
cols-22 栏卡片布局
cols-33 栏卡片布局
cols-44 栏卡片布局
cols-55 栏卡片布局
cols-{1~6}1~6 栏卡片布局

占位布局 style 写法

### H3 部分
<!--rehype:wrap-style=grid-row: span 2/span 2;-->

放在 ### H3 部分 下面的注释配置，与 <!--rehype:wrap-class=row-span-2--> 相同，设置 2 行占位布局。

卡片栏布局 style 写法

## H2 部分
<!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));-->

放在 ## H2 部分 下面的注释配置，与 <!--rehype:body-class=cols-2--> 相同，设置 2 栏布局。

H3 部分

### 卡片 1 (H3 部分)
<!--rehype:wrap-class=row-span-2-->
### 卡片 2 (H3 部分)
<!--rehype:wrap-class=col-span-3-->
### 卡片 3 (H3 部分)
:----
合并 列 布局
col-span-22 列占位
col-span-33 列占位
col-span-44 列占位
col-span-{2~10}{2~10} 列占位
合并 行 布局
row-span-22 行占位
row-span-33 行占位
row-span-44 行占位
row-span-{2~10}{2~10} 行占位

卡片合并行布局 1

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆   H3 Title 1  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### H3 Title 1
<!--rehype:wrap-class=col-span-3-->
### Title 2

### Title 3

### Title 4

第一标题添加 col-span-3 占位类

卡片列合并布局 2

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
┆   ┆ ╰┈┈┈╯ ╰┈┈┈╯
┆   ┆ ╭┈┈┈╮ ╭┈┈┈╮
┆   ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
<!--rehype:wrap-class=row-span-2-->
### Title 2
### Title 3
### Title 4
### Title 5

在 Title 1 标题添加 row-span-2 占位类

卡片列合并布局 3

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ┆   ┆ ╰┈┈┈╯
╭┈┈┈╮ ┆   ┆ ╭┈┈┈╮
┆ 4 ┆ ┆   ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
<!--rehype:wrap-class=row-span-2-->
### Title 3
### Title 4
### Title 5

在 Title 2 标题添加 row-span-2 占位类

卡片列合并布局 4

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ┆   ┆
╭┈┈┈╮ ╭┈┈┈╮ ┆   ┆
┆ 4 ┆ ┆ 5 ┆ ┆   ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
<!--rehype:wrap-class=row-span-2-->
### Title 4
### Title 5

在 Title 3 标题添加 row-span-2 占位类

卡片列合并布局 5

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ 
╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 4 ┆ ┆ 5       ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
### Title 4
### Title 5
<!--rehype:wrap-class=col-span-2-->

在 Title 5 标题添加 col-span-2 占位类

卡片列合并布局 6

╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 1 ┆ ┆ 2       ┆
╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
<!--rehype:wrap-class=col-span-2-->
### Title 3
### Title 4
### Title 5

在 Title 2 标题添加 col-span-2 占位类

卡片列合并布局 7

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 4       ┆ ┆ 5 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
### Title 2
### Title 3
### Title 4
<!--rehype:wrap-class=col-span-2-->
### Title 5

在 Title 4 标题添加 col-span-2 占位类

卡片列合并布局 8

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆     H3 Title 1      ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

H2 部分
----
<!--rehype:body-class=cols-4-->
### Title 1
<!--rehype:wrap-class=col-span-4-->
### Title 2
### Title 3
### Title 4
### Title 5

在 H2 部分 标题添加 cols-4，和 Title 1 添加 col-span-4 合并栏

卡片列合并布局 9

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 1       ┆ ┆ 2 ┆
┆         ┆ ╰┈┈┈╯
┆         ┆ ╭┈┈┈╮
┆         ┆ ┆ 3 ┆
╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 4 ┆ ┆ 5 ┆ ┆ 6 ┆
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯

上面布局效果 Markdown 源码：

### Title 1
<!--rehype:wrap-class=col-span-2 row-span-2-->
### Title 2
### Title 3
### Title 4
### Title 5
### Title 6

在 Title 1 标题添加 col-span-2 和 row-span-2 占位类，使用 空格 间隔。

表格

基本表格

Date

:-:-
%m/%d/%Y06/05/2013
%A, %B %e, %YSunday, June 5, 2013
%b %e %aJun 5 Sun

Time

:-:-
%H:%M23:05
%I:%M %p11:05 PM

标题为 H4 的基本表格。

快捷键

:-:-
VVector
PPencil
TText
LLine
RRectangle
OOval
URounded

展示标题

PrefixExampleWhat
////hr[@class='edge']Anywhere
././aRelative
//html/body/divRoot

<!--rehype:className=show-header-->

列表样式展示表格

:-:-
visualEffectState.inactive后台应一直显示为非激活状态。
titleBarStyle string (win/mac)窗口标题栏样式。默认值 (default)
titleBarStyle.default分别返回 mac 或者 win 的标准标题栏

<!--rehype:className=style-list-->

列表箭头样式展示表格

:-:-
visualEffectState.inactive后台应一直显示为非激活状态。
titleBarStyle string (win/mac)窗口标题栏样式。默认值 (default)
titleBarStyle.default分别返回 mac 或者 win 的标准标题栏

<!--rehype:className=style-list-arrow-->

隐藏表头强制小尺寸自动换行

:-:-
visualEffectState.inactive后台应一直显示为非激活状态。
titleBarStyle string (win/mac)窗口标题栏样式。默认值 (default)
titleBarStyle.default分别返回 mac 或者 win 的标准标题栏

<!--rehype:className=auto-wrap-->

表格末尾列左对齐

PrefixWhat
//Anywhere
./Relative

默认表格末尾列右对齐，添加 <!--rehype:className=left-align--> 类让其左对齐

列表

一栏(默认)

  • Item 1
  • Item 2
  • Item 3

四列

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

<!--rehype:className=cols-4-->

列表步骤

  • 重命名为 new_name

    $ git branch -m <new_name>

  • 推送和重置

    $ git push origin -u <new_name>

  • 删除远程分支

    $ git push origin --delete <old>

<!--rehype:className=style-timeline-->

没有标记

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9

<!--rehype:className=cols-3 style-none-->

圆圈标记

  • Item 1
  • Item 2
  • Item 3

<!--rehype:className=style-round-->

箭头标记

  • Item 1
  • Item 2
  • Item 3

<!--rehype:className=style-arrow-->

H2 部分 - 5列效果展示

One

...

Two

...

Three

...

Four

...

Five

...

H3 部分 - 占位效果展示

row-span-2

...合并两行

<!--rehype:wrap-class=row-span-2-->

col-span-2

...合并两列

<!--rehype:wrap-class=col-span-2-->

红色标题

...红色标题配置

<!--rehype:style=background:#e91e63;-->

黄色标题

...黄色标题配置

<!--rehype:style=background:#d7a100;-->

col-span-3

...

卡片子项

每个部分可以有以下子项：

H4 子标题

  • pre
  • table
  • ul

H4 子标题

  • pre
  • table
  • ul

H3 部分

每个盒子(卡片)都是一个 H3 部分。 盒子将包含 H3 自身内的所有东西。

这是一个包含段落的基本部分。

H3 部分背景颜色

注释配置：
`<!--rehype:wrap-style=background: #1b5064;-->`