Quick Reference Cheatsheet

Here's a style reference you can use on your Quick Reference cheat sheet!

Getting Started

Local compilation preview

Clone the repository to the local debug page. See the Contributing Guide for how to get started.

Clone repository

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

Install dependencies to generate HTML pages

npm i         # install dependencies
npm run build # Compile output HTML

The HTML is stored in the dist directory under the root directory of the warehouse, and the dist/index.html static page is opened in the browser for preview.

# Listen to the md file to compile and output HTML
npm run start

Directory Structure

.
├── CONTRIBUTING.md   # Contribution Note
├── Dockerfile
├── LICENSE
├── README.md  # 🌐 Home content
├── dist # 📦 Compiled static resource directory
├── docs # 👈 Markdown Documentation (cheatsheet)
│   ├── bash.md
│   ├── ....
│   └── yaml.md
├── package.json
├── .refsrc.json # refs configuration
└── assets  # LOGO icon file resource

Add a checklist

A simple checklist contains page headline <h1>, introduction text placed below the headline, <h2> category headings, <h3> content for cards

备忘清单 (页面大标题)
===

这是您可以在当前清单上使用的样式参考！备忘清单介绍

入门 (分类标题)
---

### Introduction (card)

卡片内容

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

Home Navigation

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

## Linux commands

[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--> 标识卡片样式

Home prompt configuration

[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

Command Help

Usage: refs-cli [output-dir] [--help|h]

  Displays help information.

Options:

  --version, -v   Show version number
  --help, -h      Displays help information.
  --watch, -w     Watch and compile Markdown files.
  --output, -o    Output directory. defalut(dist)
  --force, -f     Force file regeneration.

Example:

  $ npx refs-cli
  $ refs-cli --watch
  $ refs-cli --output website
  $ refs-cli

refs-cli@v0.0.1

Config

{
  "title": "Quick Reference",
  "description": "{{description}}. Sharing Quick Reference Cheat Sheets for Developers",
  "keywords": "reference-cli,reference,refs-cli,refs,cli",
  "data-info": "👆👆need your participation",
  "search": {
    "label": "Search",
    "placeholder": "Search for cheatsheet",
    "cancel": "Cancel"
  },
  "editor": {
    "label": "Edit"
  },
  "github": {
    "url": "https://github.com/jaywcjlove/refs-cli"
  },
  "home": {
    "label": "Home",
    "url": "https://jaywcjlove.github.io/refs-cli"
  },
  "footer": "<br />备案号：<a href=\"#\">沪ICP备202200000号-1</a>",
  "license": "支持 HTML 字符串"
}

Store .refsrc.json in the root directory of the project

Environment Variable

REF_URL=http://ref.ecdata.cn/
REF_LABEL=网站首页
; footer added
REF_FOOTER= <br/>备案号：沪ICP备20220000000号-1
LICENSE=Copyright (c) <b>2022</b> 支持 HTML 字符串

Create .env file in project root directory.

Markdown 语法注释

Introduce

在备忘清单采用 HTML 注释语法，标识网站布局和一些样式，目的是为了在 GitHub 中也是正常毫无瑕疵的预览 Markdown。

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

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

上面基础示例，使用 col-span-2 类标识，卡片占 2 列位置，参考现有备忘清单的源代码是一个好习惯！

An introduction to annotation syntax

  • 在某个 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

...

Card child

Each section can have the following subitems:

H4 subheading

  • pre
  • table
  • ul

H4 subheading

  • pre
  • table
  • ul

H3 部分

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

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

H3 部分背景颜色

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