buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
68829382b369cb9401383cc3ab7d75a7c52a2e95
reference/docs/quickreference.html

535 lines
42 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Quick Reference 备忘清单
&#x26; quickreference cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,quickreference">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><path opacity=".5" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="white"></path><path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#cbd5e1"></path><path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#292D32"></path></svg><span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/quickreference.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1>Quick Reference 备忘清单</h1><div class="wrap-body">
<p>这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与贡献！</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>本地编译预览</h3><div class="wrap-body">
<p>简单的将仓库克隆下来本地调试页面展示。</p>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>克隆仓库</h4><div class="wrap-body">
<pre class="wrap-text "><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> clone git@github.com:jaywcjlove/reference.git
</span></code></pre><!--rehype:className=wrap-text -->
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>安装依赖编译生成 HTML 页面</h4><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> i <span class="token comment"># 安装依赖</span>
</span><span class="code-line line-number" line="2"><span class="token function">npm</span> run build <span class="token comment"># 编译输出 HTML</span>
</span></code></pre>
<p>HTML 存放在仓库根目录下的 <code>dist</code> 目录中，将 <code>dist/index.html</code> 静态页面在浏览器中打开预览。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
<p>在备忘清单采用 <code>HTML 注释语法</code>，标识网站布局和一些样式，目的是为了在 <code>GitHub</code> 中也是正常毫无瑕疵的预览 <code>Markdown</code>。</p>
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 卡片标题</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4">卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span></code></pre><!--rehype:className=wrap-text -->
<p>使用 <code>col-span-2</code> 类标识，卡片占 <code>2</code> 列位置</p>
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 style="color:black;background-color: #d7a100;">注释语法介绍</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
<ul>
<li>在某个 Markdown 语法下方或者后面，添加 HTML注释</li>
<li>以 <code>&#x3C;!--rehype:</code> 开始，<code>--></code> 结束，包裹参数内容</li>
<li>内容采用 URL 参数的字符拼接方式</li>
</ul>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>语法</h4><div class="wrap-body">
<p><code>&#x3C;!--rehype:</code> + <code>key=value</code> + <code>&#x26;</code> + <code>key=value</code> + <code>--></code><br><code>标识开始</code> + <code>参数</code> + <code>分隔符</code> + <code>参数</code> + <code>标识结束</code></p>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>示例</h4><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H2 部分</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>示例，三行占位，标题红色</h4><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 标题</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-3&#x26;style=color:red;--></span>
</span></code></pre><!--rehype:className=wrap-text -->
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>参数说明</h4><div class="wrap-body">
<table>
<thead>
<tr>
<th>类</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>body-style</code></td>
<td>包裹所有卡片<code>外壳</code>的样式</td>
</tr>
<tr>
<td><code>body-class</code></td>
<td>用于卡片栏布局，添加<code>类</code>名</td>
</tr>
<tr>
<td><code>wrap-style</code></td>
<td>卡片栏添加 CSS 样式</td>
</tr>
<tr>
<td><code>wrap-class</code></td>
<td>用于卡片占位，添加<code>类</code>名</td>
</tr>
</tbody>
</table>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>文字颜色</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token italic"><span class="token punctuation">_</span><span class="token content">我是红色</span><span class="token punctuation">_</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span><span class="code-line line-number" line="2"><span class="token bold"><span class="token punctuation">**</span><span class="token content">加粗红色</span><span class="token punctuation">**</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span></code></pre>
<p>上面添加注释样式，文字 <em style="color: red;">我是红色</em><!--rehype:style=color: red;--> 文字变<code>红</code>了</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>文字大小</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token bold"><span class="token punctuation">**</span><span class="token content">加粗变大红色</span><span class="token punctuation">**</span></span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:style=color: red;font-size: 18px--></span>
</span></code></pre><!--rehype:className=wrap-text -->
<p>上面添加注释样式，文字 <em style="color: red;font-size: 18px">加粗变大红色</em><!--rehype:style=color: red;font-size: 18px--> 变<code>红</code>并且<code>大</code>了</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>强制换行</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">\```js
</span><span class="code-line line-number" line="2">function () {}
</span><span class="code-line line-number" line="3">\```
</span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:className=wrap-text --></span>
</span></code></pre>
<p>如果代码块内容太长，使用强制换行类解决</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>展示表格表头</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> Key </span><span class="token punctuation">|</span><span class="token table-header important"> value </span><span class="token punctuation">|</span><span class="token table-header important"> </span>
</span></span></span><span class="code-line line-number" line="2"><span class="token table"><span class="token table-header-row"></span><span class="token table-line"><span class="token punctuation">|</span> <span class="token punctuation">----</span> <span class="token punctuation">|</span> <span class="token punctuation">----</span> <span class="token punctuation">|</span>
</span></span></span><span class="code-line line-number" line="3"><span class="token table"><span class="token table-line"></span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> <span class="token code-snippet code keyword">`键`</span> </span><span class="token punctuation">|</span><span class="token table-data"> 值 </span><span class="token punctuation">|</span>
</span></span></span><span class="code-line line-number" line="4"><span class="token table"><span class="token table-data-rows"></span></span><span class="token comment">&#x3C;!--rehype:className=show-header--></span>
</span></code></pre>
<p>注释配置添加 <code>show-header</code> 类，放置在表格下面，表头将被展示出来。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Tooltips</h3><div class="wrap-body">
<p><a href="https://github.com/jaywcjlove/reference" class="tooltip">鼠标移动到上面有提示<em class="tooltiptext">Tooltips 的提示内容</em></a></p>
<p>添加注释配置 <code>&#x3C;!--rehype:tooltips--></code> 添加一个 tooltips 提示。</p>
</div></div></div><div class="wrap" style="background: #00c69357;"><div class="wrap-header h3wrap"><h3>H3 部分(卡片)背景颜色</h3><div class="wrap-body"><!--rehype:wrap-style=background: #00c69357;-->
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H3 部分(卡片)背景颜色</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-style=background: #00c69357;--></span>
</span></code></pre><!--rehype:className=wrap-text -->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;">红色标题</h3><div class="wrap-body"><!--rehype:style=background:#e91e63;-->
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 红色标题</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:style=background:#e91e63;--></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>布局</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>H2 部分</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">H2 部分
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">---</span></span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<p>上面实例 <code>H2 部分</code> 标题下面有三个<code>卡片</code>，默认 <code>3</code> 栏布局。</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">H2 部分
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">---</span></span>
</span><span class="code-line line-number" line="3"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<p>使用注释配置为 H2 部分 添加 <code>col-span-2</code> 类，将 <del><code>3</code></del> 栏布局变成 <code>2</code> 栏布局。</p>
<table class="show-header ">
<thead>
<tr>
<th>类</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cols-1</code></td>
<td><code>1</code> 栏卡片布局</td>
</tr>
<tr>
<td><code>cols-2</code></td>
<td><code>2</code> 栏卡片布局</td>
</tr>
<tr>
<td><code>cols-3</code></td>
<td><code>3</code> 栏卡片布局</td>
</tr>
<tr>
<td><code>cols-4</code></td>
<td><code>4</code> 栏卡片布局</td>
</tr>
<tr>
<td><code>cols-5</code></td>
<td><code>5</code> 栏卡片布局</td>
</tr>
</tbody>
</table><!--rehype:className=show-header -->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>占位布局 style 写法</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-style=grid-row: span 2/span 2;--></span>
</span></code></pre><!--rehype:className=wrap-text -->
<p>放在 <code>### H3 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:wrap-class=row-span-2--></code> 相同，设置 2 行占位布局。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片栏布局 style 写法</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">##</span> H2 部分</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));--></span>
</span></code></pre><!--rehype:className=wrap-text -->
<p>放在 <code>## H2 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:body-class=cols-2--></code> 相同，设置 2 栏布局。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>H3 部分</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<table class="show-header ">
<thead>
<tr>
<th>类</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>col-span-2</code></td>
<td><code>2</code> 列占位</td>
</tr>
<tr>
<td><code>col-span-3</code></td>
<td><code>3</code> 列占位</td>
</tr>
<tr>
<td><code>col-span-4</code></td>
<td><code>4</code> 列占位</td>
</tr>
<tr>
<td><code>row-span-2</code></td>
<td><code>2</code> 行占位</td>
</tr>
<tr>
<td><code>row-span-3</code></td>
<td><code>3</code> 行占位</td>
</tr>
<tr>
<td><code>row-span-4</code></td>
<td><code>4</code> 行占位</td>
</tr>
</tbody>
</table><!--rehype:className=show-header -->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片合并行布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line line-number" line="2">┆ H3 Title <span class="token number">1</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="5">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> H3 Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="4">
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span></code></pre>
<p>第一标题添加 <code>col-span-3</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line line-number" line="3">┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line line-number" line="4">┆ ┆ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="5">┆ ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 1</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈╯ ┆ ┆ ╰┈┈┈╯
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ┆ ┆ ╭┈┈┈╮
</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="3"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 2</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ┆ ┆
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ┆ ┆
</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="4"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 3</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span><span class="code-line line-number" line="6"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span></code></pre>
<p>在 <code>Title 5</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="5">┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="3"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 5</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片列合并布局</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line line-number" line="3">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line line-number" line="4">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line line-number" line="5">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line line-number" line="6">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 5</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>表格</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>基本表格</h3><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>Date</h4><div class="wrap-body">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>%m/%d/%Y</code></td>
<td>06/05/2013</td>
</tr>
<tr>
<td><code>%A, %B %e, %Y</code></td>
<td>Sunday, June 5, 2013</td>
</tr>
<tr>
<td><code>%b %e %a</code></td>
<td>Jun 5 Sun</td>
</tr>
</tbody>
</table>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Time</h4><div class="wrap-body">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>%H:%M</code></td>
<td>23:05</td>
</tr>
<tr>
<td><code>%I:%M %p</code></td>
<td>11:05 PM</td>
</tr>
</tbody>
</table>
<p>标题为 <code>H4</code> 的基本表格。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>快捷键</h3><div class="wrap-body">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>V</code></td>
<td>Vector</td>
</tr>
<tr>
<td><code>P</code></td>
<td>Pencil</td>
</tr>
<tr>
<td><code>T</code></td>
<td>Text</td>
</tr>
<tr>
<td><code>L</code></td>
<td>Line</td>
</tr>
<tr>
<td><code>R</code></td>
<td>Rectangle</td>
</tr>
<tr>
<td><code>O</code></td>
<td>Oval</td>
</tr>
<tr>
<td><code>U</code></td>
<td>Rounded</td>
</tr>
</tbody>
</table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>展示标题</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Prefix</th>
<th>Example</th>
<th>What</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//</code></td>
<td><code>//hr[@class='edge']</code></td>
<td>Anywhere</td>
</tr>
<tr>
<td><code>./</code></td>
<td><code>./a</code></td>
<td>Relative</td>
</tr>
<tr>
<td><code>/</code></td>
<td><code>/html/body/div</code></td>
<td>Root</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
<p><code>&#x3C;!--rehype:className=show-header--></code></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>列表</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>一栏（默认）</h3><div class="wrap-body">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>四列</h3><div class="wrap-body">
<ul class="cols-4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul><!--rehype:className=cols-4-->
<p><code>&#x3C;!--rehype:className=cols-4--></code></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>没有标记</h3><div class="wrap-body">
<ul class="cols-3 style-none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul><!--rehype:className=cols-3 style-none-->
<p><code>&#x3C;!--rehype:className=cols-3 style-none--></code></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>H2 部分 - 5列效果展示</h2><div class="wrap-body"><!--rehype:body-class=cols-5-->
</div></div><div class="h2wrap-body cols-5"><div class="wrap" style="background:#dba300;"><div class="wrap-header h3wrap"><h3>One</h3><div class="wrap-body"><!--rehype:wrap-style=background:#dba300;-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Two</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Three</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Four</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Five</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>H3 部分 - 占位效果展示</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>row-span-2</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
<p><code>&#x3C;!--rehype:wrap-class=row-span-2--></code></p>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>col-span-2</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
<p><code>&#x3C;!--rehype:wrap-class=col-span-2--></code></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;">红色标题</h3><div class="wrap-body"><!--rehype:style=background:#e91e63;-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
<p><code>&#x3C;!--rehype:style=background:#e91e63;--></code></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;">黄色标题</h3><div class="wrap-body"><!--rehype:style=background:#d7a100;-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
<p><code>&#x3C;!--rehype:style=background:#d7a100;--></code></p>
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>col-span-3</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3-->
<pre><code class="code-highlight"><span class="code-line line-number" line="1">...
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>卡片子项</h3><div class="wrap-body">
<p>每个部分可以有以下子项：</p>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>H4 子标题</h4><div class="wrap-body">
<ul>
<li>pre</li>
<li>table</li>
<li>ul</li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>H4 子标题</h4><div class="wrap-body">
<ul>
<li>pre</li>
<li>table</li>
<li>ul</li>
</ul>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>H3 部分</h3><div class="wrap-body">
<p>每个盒子(卡片)都是一个 <code>H3</code> 部分。 盒子将包含 <code>H3</code> 自身内的所有东西。</p>
<p>这是一个包含段落的基本部分。</p>
</div></div></div><div class="wrap" style="background: #1b5064;"><div class="wrap-header h3wrap"><h3>H3 部分背景颜色</h3><div class="wrap-body"><!--rehype:wrap-style=background: #1b5064;-->
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">注释配置：
</span><span class="code-line line-number" line="2"><span class="token code-snippet code keyword">`&#x3C;!--rehype:wrap-style=background: #1b5064;-->`</span>
</span></code></pre><!--rehype:className=wrap-text -->
</div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>
Reference in New Issue View Git Blame Copy Permalink