国产成人精品999视频&日本一区二区亚洲人妻精品&久久久精品国产99久久精&99热这里只有成人精品国产&精品国产剧情av一区二区&成人亚洲精品久久久久app&国产精品美女高潮抽搐A片

Quick Reference 備忘清單

這是您可以在 Quick Reference 備忘單上使用的樣式參考，快速參與貢獻！

入門

本地編譯預(yù)覽

將倉庫克隆到本地調(diào)試頁面。請參閱貢獻指南了解如何開始

克隆倉庫

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

安裝依賴編譯生成 HTML 頁面

npm i         # 安裝依賴
npm run build # 編譯輸出 HTML

HTML 存放在倉庫根目錄下的 dist 目錄中，將 dist/index.html 靜態(tài)頁面在瀏覽器中打開預(yù)覽。

npm run start # 監(jiān)聽 md 文件編譯輸出 HTML

目錄結(jié)構(gòu)

.
├── CONTRIBUTING.md   # 貢獻說明
├── Dockerfile
├── LICENSE
├── README.md  # ?? Home(首頁)內(nèi)容
├── dist       # ?? 編譯后的靜態(tài)資源目錄
├── docs       # ?? Markdown 文檔(速查表)
│?? ├── bash.md
│?? ├── ....
│?? └── yaml.md
├── .refsrc.json # refs 配置
├── package.json
└── assets  # LOGO 圖標(biāo)文件資源

添加一個備忘清單

一個簡單的備忘清單包含 頁面大標(biāo)題<h1>，放在大標(biāo)題下面的 介紹 文本，<h2> 分類標(biāo)題，<h3> 內(nèi)容為 卡片

備忘清單 (頁面大標(biāo)題)
===

這是您可以在當(dāng)前清單上使用的樣式參考！備忘清單介紹

入門 (分類標(biāo)題)
---

### 介紹 (卡片)

卡片內(nèi)容

上面 markdown 內(nèi)容存放到 docs 目錄中，命名為 xxx.md

首頁導(dǎo)航

首頁(README.md)存放在倉庫的根目錄，通過這個 README.md 自動生成首頁導(dǎo)航，下面是導(dǎo)航實例：

## Linux 命令

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

首頁導(dǎo)航圖標(biāo)存放在 scripts/assets 目錄中，如果你的備忘清單定義為 docs/cron.md，那么你的圖標(biāo)就定義為 cron.svg 存放到 scripts/assets 目錄中，重新編譯首頁當(dāng)行菜單就擁有了圖標(biāo)。

  • 圖標(biāo)存放在 scripts/assets 目錄中
  • 圖片名稱與清單名稱保持一致 cron.md -> cron.svg (注意大小寫)
  • SVG 圖標(biāo)尺寸 <svg height="1em" width="1em"
  • SVG 圖標(biāo)顏色使用繼承顏色值 <svg fill="currentColor"
  • 使用 <!--rehype:class=home-card--> 標(biāo)識卡片樣式

首頁提示配置

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

添加 contributing 類名，會在卡片下方默認(rèn)添加 ??待完善需要您的參與

class=tag&data-info=??看看還缺點兒什么？

上面示例將默認(rèn)提示更改為： ??看看還缺點兒什么？

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

添加 class=tag&data-lang=Python 類名和參數(shù)，會在卡片右上角標(biāo)記 Python

Command Help

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

  顯示幫助信息

Options:

  --version, -v 顯示版本號
  --help, -h    顯示幫助信息
  --watch, -w   觀看并編譯 Markdown 文件
  --output, -o  輸出目錄。默認(rèn)（分布）
  --force, -f   強制文件重新生成

Example:

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

refs-cli@v0.0.1

Config

{
  "title": "文檔網(wǎng)站名稱",
  "description": "{{description}} 網(wǎng)站說明",
  "keywords": "關(guān)鍵字,refs-cli,refs,cli",
  "data-info": "??需要你的參與",
  "search": {
    "label": "搜索",
    "placeholder": "搜索備忘清單",
    "cancel": "取消"
  },
  "editor": {
    "label": "編輯"
  },
  "github": {
    "url": "https://<github url>"
  },
  "home": {
    "label": "首頁",
    "url": "https://<你的網(wǎng)站>"
  },
  "footer": "<br />備案號：支持HTML字符串",
  "license": "支持 HTML 字符串"
}

將 .refsrc.json 存放在項目的根目錄下

環(huán)境變量

導(dǎo)航菜單

REF_URL=http://ref.ecdata.cn/
REF_LABEL=網(wǎng)站首頁

頁腳添加 (支持 HTML 字符串)

REF_FOOTER=備案號：滬ICP備20220000000號-1

修改版權(quán)信息 (支持 HTML 字符串)

LICENSE=Copyright (c) <b>2022</b> 小弟調(diào)調(diào)?

在項目根目錄中創(chuàng)建 .env 文件

Markdown 語法注釋

介紹

在備忘清單采用 HTML 注釋語法，標(biāo)識網(wǎng)站布局和一些樣式，目的是為了在 GitHub 中也是正常毫無瑕疵的預(yù)覽 Markdown。

### 卡片標(biāo)題
<!--rehype:wrap-class=col-span-2-->

卡片 Markdown 內(nèi)容展示，下面注釋語法為文字內(nèi)容改變樣式
<!--rehype:style=color: red;-->

上面基礎(chǔ)示例，使用 col-span-2 類標(biāo)識，卡片占 2 列位置，參考現(xiàn)有備忘清單的源代碼是一個好習(xí)慣！

注釋語法介紹

  • 在某個 Markdown 語法下方或者后面，添加 HTML注釋
  • 以 <!--rehype: 開始，--> 結(jié)束，包裹參數(shù)內(nèi)容
  • 內(nèi)容采用 URL 參數(shù)的字符拼接方式

語法

<!--rehype: + key=value + & + key=value + -->
標(biāo)識開始 + 參數(shù) + 分隔符(&) + 參數(shù) + 標(biāo)識結(jié)束

示例

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

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

示例，三行占位，標(biāo)題紅色

### 標(biāo)題
<!--rehype:wrap-class=row-span-3&style=color:red;-->

參數(shù)說明

類說明
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-->

如果代碼塊內(nèi)容太長，使用強制換行類(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

鼠標(biāo)移動到上面有提示Tooltips 的提示內(nèi)容

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

H3 部分(卡片)背景顏色

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

紅色標(biāo)題

### 紅色標(biāo)題
<!--rehype:style=background:#e91e63;-->

在 H3 標(biāo)題下面添加樣式標(biāo)注 <!--rehype:style=background:#e91e63;-->

快捷鍵樣式

Keyvalue
快捷鍵說明
快捷鍵說明

列表添加 <!--rehype:className=shortcuts--> 樣式類，展示快捷鍵樣式。

代碼行號

export const Student = <div>學(xué)生</div>;
const school = <div>學(xué)校</div>;

下面是 Markdown 代碼示例

  ```jsx showLineNumbers

標(biāo)記語言后面添加 showLineNumbers 標(biāo)識

內(nèi)置類樣式

:--
shortcuts快捷鍵樣式
wrap-text超出換行
show-header展示表頭
style-none隱藏 <ul> 列表樣式
style-list<table> 單元格行展示

顏色標(biāo)簽

:--
<yel>黃色
<red>紅色
<pur>紫色
<code> 或 ``綠色
<del> 或 ~~刪除~~紅色

HTML 代碼預(yù)覽

  ```html preview
  <b>這里是你的 HTML 代碼</b>
  \```

這里是你的 HTML 代碼

上面的 markdown 代碼在 meta 位置添加 preview 標(biāo)識，HTML 代碼將被執(zhí)行預(yù)覽

隱藏卡片標(biāo)題，在 H3 標(biāo)題下面添加注釋樣式

### 隱藏卡片標(biāo)題
<!--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> 沒有標(biāo)記樣式
<!--rehype:className=style-timeline-->時間軸樣式
<!--rehype:className=style-arrow-->箭頭標(biāo)記

KaTeX 數(shù)學(xué)渲染

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}，需要標(biāo)記 `KaTeX:數(shù)學(xué)公式` 將被顯示成數(shù)學(xué)公式，這是基于 KaTeX 生成

布局

H2 部分

H2 部分
---

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

上面實例 H2 部分 標(biāo)題下面有三個卡片，默認(rèn) 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--> 相同，設(shè)置 2 行占位布局。

卡片欄布局 style 寫法

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

放在 ## H2 部分 下面的注釋配置，與 <!--rehype:body-class=cols-2--> 相同，設(shè)置 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

第一標(biāo)題添加 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 標(biāo)題添加 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 標(biāo)題添加 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 標(biāo)題添加 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 標(biāo)題添加 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 標(biāo)題添加 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 標(biāo)題添加 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 部分 標(biāo)題添加 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 標(biāo)題添加 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

標(biāo)題為 H4 的基本表格。

快捷鍵

:-:-
VVector
PPencil
TText
LLine
RRectangle
OOval
URounded

展示標(biāo)題

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

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

列表樣式展示表格

:-:-
visualEffectState.inactive后臺應(yīng)一直顯示為非激活狀態(tài)。
titleBarStyle string (win/mac)窗口標(biāo)題欄樣式。默認(rèn)值 (default)
titleBarStyle.default分別返回 mac 或者 win 的標(biāo)準(zhǔn)標(biāo)題欄

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

列表箭頭樣式展示表格

:-:-
visualEffectState.inactive后臺應(yīng)一直顯示為非激活狀態(tài)。
titleBarStyle string (win/mac)窗口標(biāo)題欄樣式。默認(rèn)值 (default)
titleBarStyle.default分別返回 mac 或者 win 的標(biāo)準(zhǔn)標(biāo)題欄

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

隱藏表頭強制小尺寸自動換行

:-:-
visualEffectState.inactive后臺應(yīng)一直顯示為非激活狀態(tài)。
titleBarStyle string (win/mac)窗口標(biāo)題欄樣式。默認(rèn)值 (default)
titleBarStyle.default分別返回 mac 或者 win 的標(biāo)準(zhǔn)標(biāo)題欄

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

表格末尾列左對齊

PrefixWhat
//Anywhere
./Relative

默認(rèn)表格末尾列右對齊，添加 <!--rehype:className=left-align--> 類讓其左對齊

強制 code 不換行

CommandDescription
adb remountRemounts file system with read/write access
adb reboot bootloaderReboots the device into fastboot

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

列表

一欄(默認(rèn))

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

沒有標(biāo)記

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

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

圓圈標(biāo)記

  • Item 1
  • Item 2
  • Item 3

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

箭頭標(biāo)記

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

紅色標(biāo)題

...紅色標(biāo)題配置

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

黃色標(biāo)題

...黃色標(biāo)題配置

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

col-span-3

...

卡片子項

每個部分可以有以下子項：

H4 子標(biāo)題

  • pre
  • table
  • ul

H4 子標(biāo)題

  • pre
  • table
  • ul

H3 部分

每個盒子(卡片)都是一個 H3 部分。 盒子將包含 H3 自身內(nèi)的所有東西。

這是一個包含段落的基本部分。

H3 部分背景顏色

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