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

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

Home Navigation

The homepage (README.md) is stored in the root directory of the warehouse, and the homepage navigation is automatically generated through this README.md. The following is a navigation example:

## Linux commands

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

The home navigation icon is stored in the scripts/assets directory. If your cheat list is defined as docs/cron.md, then your icon is defined as cron.svg and stored in the scripts/assets directory , recompile the home page when the row menu has icons.

Icons are stored in the scripts/assets directory
The name of the image is consistent with the name of the manifest cron.md -> cron.svg (note capitalization)
SVG icon size <svg height="1em" width="1em"
SVG icon color uses inherited color value <svg fill="currentColor"
Use  to identify the card style

Home prompt configuration

[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

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

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.

`TOML` config example:

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"

Support for more config loading

.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

Environment Variable

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.

Markdown Comments Syntax

Introduce

The HTML comment syntax is used in the cheat list to identify the website layout and some styles, the purpose is to preview normally and flawlessly in GitHub Markdown.

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

Card Markdown content display, the following comment syntax changes the style for the text content
<!--rehype:style=color: red;-->

The basic example above uses the col-span-2 class logo, and the card occupies the 2 column position. It is a good habit to refer to the source code of the existing cheat list!

An introduction to annotation syntax

Add HTML comments below or after a Markdown syntax
Start with , wrap the parameter content
The content adopts the character splicing method of the URL parameter

Syntax


Mark Start + parameter:value + Delimiter(&) + parameter:value + Mark End

Example

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

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

Example, three placeholders, title red

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

Parameter Description

className	description
`body-style`	Wraps all card `Warpper` styles
`body-class`	For card bar layout, add `class` name
`wrap-style`	Add CSS style to card bar
`wrap-class`	For card placeholder, add `class` name

Text Color

_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

Forced line break

\```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

Show table header

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.

Code line highlighting

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

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

The lines above {1,4-5} are highlighted, and the following is Markdown code example

  ```jsx {1,4-5}

Code line highlighting can be used together with code line numbers.

Tooltips

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

Add annotation configuration  to add a Tooltips hint.

H3 section (card) background color

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

Red title

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

Add a style annotation  below the H3 heading

Shortcut key style

Key	value
`Shortcuts`	directions
`Shortcuts`	directions

Add the  style class to the list to display the shortcut key style.

Key	value
directions	`Shortcuts`
directions	`Shortcuts`

Add the  style class to the list to display the shortcut key style.

Code line number

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

Built-in class style

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

Color Element

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

HTML code preview

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

<b>Here is your HTML code</b>

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

Hide card title

Hide card title, add comment style below H3 title

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

注释类配置

类	说明
`<!--rehype:className=wrap-text-->`	强制`换行`
`<!--rehype:className=show-header-->`	展示表格`表头`
`<!--rehype:className=shortcuts-->`	表首列`快捷键`样式
`<!--rehype:className=shortcuts-last-->`	表尾列`快捷键`样式
`<!--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 = \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

还可以单行展示 KaTeX:c = \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-1`	`1` 栏卡片布局
`cols-2`	`2` 栏卡片布局
`cols-3`	`3` 栏卡片布局
`cols-4`	`4` 栏卡片布局
`cols-5`	`5` 栏卡片布局
`cols-{1~6}`	`1~6` 栏卡片布局

占位布局 style 写法

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

放在 ### H3 部分 下面的注释配置，与  相同，设置 2 行占位布局。

卡片栏布局 style 写法

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

放在 ## H2 部分 下面的注释配置，与  相同，设置 2 栏布局。

H3 部分

### 卡片 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}` 行占位

卡片合并行布局 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/%Y`	06/05/2013
`%A, %B %e, %Y`	Sunday, June 5, 2013
`%b %e %a`	Jun 5 Sun

Time

:-	:-
`%H:%M`	23:05
`%I:%M %p`	11:05 PM

标题为 H4 的基本表格。

快捷键

:-	:-
`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

列表样式展示表格

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

列表箭头样式展示表格

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

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

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

表格末尾列左对齐

Prefix	What
`//`	Anywhere
`./`	Relative

默认表格末尾列右对齐，添加  类让其左对齐

强制 code 不换行

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

添加  注释

列表

一栏(默认)

Item 1
Item 2
Item 3

四列

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

列表步骤

重命名为 new_name
```
$ git branch -m <new_name>
```
推送和重置
```
$ git push origin -u <new_name>
```
删除远程分支
```
$ git push origin --delete <old>
```

没有标记

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

圆圈标记

Item 1
Item 2
Item 3

箭头标记

Item 1
Item 2
Item 3

H2 部分 - 5列效果展示

One

...

Two

...

Three

...

Four

...

Five

...

H3 部分 - 占位效果展示

row-span-2

...合并两行

col-span-2

...合并两列

红色标题

...红色标题配置

黄色标题

...黄色标题配置

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;-->`

Files

quickreference.md

Latest commit

History

quickreference.md

File metadata and controls

Quick Reference Cheatsheet

Getting Started

Local compilation preview

Clone repository

Install dependencies to generate HTML pages

Directory Structure

Add a checklist

Home Navigation

Home prompt configuration

Command Help

Config

TOML config example:

Support for more config loading

Environment Variable

Markdown Comments Syntax

Introduce

An introduction to annotation syntax

Syntax

Example

Example, three placeholders, title red

Parameter Description

Text Color

Font Size

Forced line break

Show table header

Code line highlighting

Tooltips

H3 section (card) background color

Red title

Shortcut key style

Code line number

Built-in class style

Color Element

HTML code preview

Hide card title

注释类配置

KaTeX 数学渲染

布局

H2 部分

占位布局 style 写法

卡片栏布局 style 写法

H3 部分

卡片合并行布局 1

卡片列合并布局 2

卡片列合并布局 3

卡片列合并布局 4

卡片列合并布局 5

卡片列合并布局 6

卡片列合并布局 7

卡片列合并布局 8

卡片列合并布局 9

表格

基本表格

Date

Time

快捷键

展示标题

列表样式展示表格

列表箭头样式展示表格

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

表格末尾列左对齐

强制 code 不换行

列表

一栏(默认)

四列

列表步骤

没有标记

圆圈标记

箭头标记

H2 部分 - 5列效果展示

One

Two

Three

Four

`TOML` config example: