Quick Reference 备忘清单

这是您可以在 Quick Reference 备忘单上使用的样式参考,快速参与贡献

入门

本地编译预览

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

克隆仓库

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
├── package.json
└── scripts     # MD 转 HTML 的编译脚本
    ├── assets  # LOGO 图标文件资源
    ├── ....
    └── watch.mjs

添加一个备忘清单

一个简单的备忘清单包含 页面大标题<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-2row-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;-->`