Quick Reference Cheatsheet

.
├── 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

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

Cheatsheet (page title)
===

Here's a style reference you can use on your current listing! Cheat Sheet Introduction

Getting Started (Category Title)
---

### Introduction (card)

card content

The above markdown content is stored in the docs directory, named xxx.md

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

Add contributing class name, it will add 👆needs your participation to be perfected by default at the bottom of the card

class=tag&data-info=👆See what's missing?

The above example changes the default prompt to:👆See what's missing?

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

Add class=tag&data-lang=Python class name and parameters, it will be marked Python in the upper right corner of the card

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

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

{
  "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": "Support for HTML strings"
}

Support JSON, JSONC, JSON5, YAML, TOML, INI, CJS, Typescript, and ESM config load.

title = "Refs CLI"
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"

.refsrc                .refsrc.json
.refsrc.json5          .refsrc.jsonc
.refsrc.yaml           .refsrc.yml
.refsrc.toml           .refsrc.ini
.refsrc.js             .refsrc.ts
.refsrc.cjs            .refsrc.mjs
.config/refsrc         .config/refsrc.json
.config/refsrc.json5   .config/refsrc.jsonc
.config/refsrc.yaml    .config/refsrc.yml
.config/refsrc.toml    .config/refsrc.ini
.config/refsrc.js      .config/refsrc.ts
.config/refsrc.cjs     .config/refsrc.mjs
refs.config.js         refs.config.ts
refs.config.cjs        refs.config.mjs

Custom navigation menu

REF_URL=http://ref.ecdata.cn/
REF_LABEL=网站首页

Footer added (Support for HTML strings)

REF_FOOTER= <br/>备案号：沪ICP备20220000000号-1

Modify copyright information (HTML strings are supported)

LICENSE=Copyright (c) <b>2022</b> Support for HTML strings

Create .env file in project root directory.

_I am red_<!--rehype:style=color: red;-->
**bold red**<!--rehype:style=color: red;-->

Add a comment style above, the text I am red the text becomes red

**bold red**
<!--rehype:style=color: red;font-size: 18px-->

Add a comment style above, the text bold becomes bigger red becomes red and big

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

If the content of the code block is too long, use the forced line break class (wrap-text) to solve

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

The annotation configuration adds the show-header class, placed under the table, the header will be displayed.

When the mouse moves over it, there is a hintTip content of Tooltips

Add annotation configuration <!--rehype:tooltips--> to add a Tooltips hint.

### H3 section (card) background color
<!--rehype:wrap-style=background: #8dffd42e;-->

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

Add a style annotation <!--rehype:style=background:#e91e63;--> below the H3 heading

Key	value
Shortcuts	directions
Shortcuts	directions

Add the <!--rehype:className=shortcuts--> style class to the list to display the shortcut key style.

export const Student = <div>Student</div>;
const school = <div>School</div>;

Here is a Markdown code example

  ```jsx showLineNumbers

Add the showLineNumbers flag after the markup language

:-	-
shortcuts	shortcut key style
wrap-text	beyond newline
show-header	display header
style-none	Hide <ul> list styles
style-list	<table> cell row display

:-	-
<yel>	Yellow
<red>	Red
<pur>	Purple
<code> Or ``	GreenColor
<del> Or ~~delete~~	Red Color

  ```html preview
  <b>Here is your HTML code</b>
  \```

---

Here is your HTML code

The above markdown code adds the preview flag in the meta position, and the HTML code will be executed to preview

Hide card title, add comment style below H3 title

### Hide card title
<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->

$$c = \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 = \pm\sqrt{a^2 + b^2}$，需要标记 `KaTeX:数学公式` 将被显示成数学公式，这是基于 KaTeX 生成

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

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

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

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

### 卡片 1 (H3 部分)
<!--rehype:wrap-class=row-span-2-->
### 卡片 2 (H3 部分)
<!--rehype:wrap-class=col-span-3-->
### 卡片 3 (H3 部分)

---

:--	--
合并 列 布局
col-span-2	2 列占位
col-span-3	3 列占位
col-span-4	4 列占位
col-span-{2~10}	{2~10} 列占位
合并 行 布局
row-span-2	2 行占位
row-span-3	3 行占位
row-span-4	4 行占位
row-span-{2~10}	{2~10} 行占位

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆   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 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 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 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 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 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 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 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 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 占位类

╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ 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 占位类

╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
┆ 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 占位类

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆     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 合并栏

:-	:-
V	Vector
P	Pencil
T	Text
L	Line
R	Rectangle
O	Oval
U	Rounded

Prefix	Example	What
//	//hr[@class='edge']	Anywhere
./	./a	Relative
/	/html/body/div	Root

<!--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-->

Command	Description
adb remount	Remounts file system with read/write access
adb reboot bootloader	Reboots the device into fastboot

添加 <!--rehype:className=code-nowrap--> 注释

• 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-->

• 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-->

...红色标题配置

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

...黄色标题配置

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

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

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

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