Quick Reference 备忘清单 === 这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与[贡献](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)！ 入门 --- ### 本地编译预览 简单的将仓库克隆下来本地调试页面展示。 #### 克隆仓库 ```shell git clone git@github.com:jaywcjlove/reference.git ``` #### 安装依赖编译生成 HTML 页面 ```shell npm i # 安装依赖 npm run build # 编译输出 HTML npm run start # 监听 md 文件编译输出 HTML ``` HTML 存放在仓库根目录下的 `dist` 目录中，将 `dist/index.html` 静态页面在浏览器中打开预览。 ### 介绍 在备忘清单采用 `HTML 注释语法`，标识网站布局和一些样式，目的是为了在 `GitHub` 中也是正常毫无瑕疵的预览 `Markdown`。 ```markdown ### 卡片标题 卡片 Markdown 内容展示，下面注释语法为文字内容改变样式 ``` 使用 `col-span-2` 类标识，卡片占 `2` 列位置 ### 注释语法介绍 - 在某个 Markdown 语法下方或者后面，添加 HTML注释 - 以 `` 结束，包裹参数内容 - 内容采用 URL 参数的字符拼接方式 #### 语法 `` `标识开始` + `参数` + `分隔符(&)` + `参数` + `标识结束` #### 示例 ```markdown ### H2 部分 ### H3 部分 ``` #### 示例，三行占位，标题红色 ```markdown ### 标题 ``` #### 参数说明 类 | 说明 ---- | ---- `body-style` | 包裹所有卡片`外壳`的样式 `body-class` | 用于卡片栏布局，添加`类`名 `wrap-style` | 卡片栏添加 CSS 样式 `wrap-class` | 用于卡片占位，添加`类`名 ### 文字颜色 ```markdown _我是红色_ **加粗红色** ``` 上面添加注释样式，文字 _我是红色_ 文字变`红`了 ### 文字大小 ```markdown **加粗变大红色** ``` 上面添加注释样式，文字 _加粗变大红色_ 变`红`并且`大`了 ### 强制换行 ```markdown \```js function () {} \``` ``` 如果代码块内容太长，使用强制换行类解决 ### 展示表格表头 ```markdown | Key | value | | ---- | ---- | | `键` | 值 | ``` 注释配置添加 `show-header` 类，放置在表格下面，表头将被展示出来。 ### 代码行高亮 ```jsx {1,4-5} import React from "react"; import "./Student.css"; export const Student = (
); ``` 上面 `{1,4-5}` 行代码高亮，下面是 `Markdown` 代码示例 ```markdown ```jsx {1,4-5} ``` 代码行高亮可以和代码行号一起使用。 ### Tooltips [鼠标移动到上面有提示](https://github.com/jaywcjlove/reference) _Tooltips 的提示内容_ 添加注释配置 `` 添加一个 Tooltips 提示。 ### H3 部分(卡片)背景颜色 ```markdown ### H3 部分(卡片)背景颜色 ``` ### 红色标题 ```markdown ### 红色标题 ``` 在 H3 标题下面添加样式标注 `` ### 快捷键样式 | Key | value | | ---- | ---- | | `快捷键` | 说明 | | `快捷键` | 说明 | 列表添加 `` 样式类，展示快捷键样式。 ### 代码行号 ```jsx showLineNumbers export const Student =
学生
; const school =
学校
; ``` 下面是 `Markdown` 代码示例 ```markdown ```jsx showLineNumbers ``` 标记语言后面添加 `showLineNumbers` 标识 ### 内置类样式 :- | - :- | - `shortcuts` | 快捷键样式 `wrap-text` | 超出换行 `show-header` | 展示表头 `style-none` | 隐藏 `