mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
914 lines
74 KiB
HTML
914 lines
74 KiB
HTML
<!doctype html><html lang="en" data-color-mode="dark"><head></head><body>
|
||
|
||
|
||
<meta charset="utf-8">
|
||
<title>Quick Reference 备忘清单
|
||
& quickreference cheatsheet & 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="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.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%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
|
||
<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 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="#c9d1d9"></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="#228e6c"></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="#228e6c"></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><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script>
|
||
const LOCAL_NANE = '_dark_mode_theme_'
|
||
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||
}
|
||
const button = document.querySelector('#darkMode');
|
||
button.onclick = () => {
|
||
const theme = document.documentElement.dataset.colorMode;
|
||
const mode = theme === 'light' ? 'dark' : 'light';
|
||
document.documentElement.setAttribute('data-color-mode', mode);
|
||
localStorage.setItem(LOCAL_NANE, mode);
|
||
}
|
||
</script><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 id="quick-reference-备忘清单"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path 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="#c9d1d9"></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="#228e6c"></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="#228e6c"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#quick-reference-备忘清单"><span class="icon icon-link"></span></a>Quick Reference 备忘清单</h1><div class="wrap-body">
|
||
<p>这是您可以在 Quick Reference 备忘单上使用的样式参考，快速参与<a href="https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md">贡献</a>！</p>
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#本地编译预览">本地编译预览</a><a aria-hidden="true" class="leve4 tocs-link" href="#克隆仓库">克隆仓库</a><a aria-hidden="true" class="leve4 tocs-link" href="#安装依赖编译生成-html-页面">安装依赖编译生成 HTML 页面</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#注释语法介绍">注释语法介绍</a><a aria-hidden="true" class="leve4 tocs-link" href="#语法">语法</a><a aria-hidden="true" class="leve4 tocs-link" href="#示例">示例</a><a aria-hidden="true" class="leve4 tocs-link" href="#示例三行占位标题红色">示例，三行占位，标题红色</a><a aria-hidden="true" class="leve4 tocs-link" href="#参数说明">参数说明</a><a aria-hidden="true" class="leve3 tocs-link" href="#文字颜色">文字颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#文字大小">文字大小</a><a aria-hidden="true" class="leve3 tocs-link" href="#强制换行">强制换行</a><a aria-hidden="true" class="leve3 tocs-link" href="#展示表格表头">展示表格表头</a><a aria-hidden="true" class="leve3 tocs-link" href="#代码行高亮">代码行高亮</a><a aria-hidden="true" class="leve3 tocs-link" href="#tooltips">Tooltips</a><a aria-hidden="true" class="leve3 tocs-link" href="#h3-部分卡片背景颜色">H3 部分(卡片)背景颜色</a><a aria-hidden="true" class="leve3 tocs-link" href="#红色标题">红色标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#快捷键样式">快捷键样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#代码行号">代码行号</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置类样式">内置类样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#颜色标签">颜色标签</a><a aria-hidden="true" class="leve3 tocs-link" href="#隐藏卡片标题">隐藏卡片标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#html-代码预览">HTML 代码预览</a><a aria-hidden="true" class="leve2 tocs-link" href="#布局">布局</a><a aria-hidden="true" class="leve3 tocs-link" href="#h2-部分">H2 部分</a><a aria-hidden="true" class="leve3 tocs-link" href="#占位布局-style-写法">占位布局 style 写法</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片栏布局-style-写法">卡片栏布局 style 写法</a><a aria-hidden="true" class="leve3 tocs-link" href="#h3-部分">H3 部分</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片合并行布局-1">卡片合并行布局 1</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-2">卡片列合并布局 2</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-3">卡片列合并布局 3</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-4">卡片列合并布局 4</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-5">卡片列合并布局 5</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-6">卡片列合并布局 6</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-7">卡片列合并布局 7</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-8">卡片列合并布局 8</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片列合并布局-9">卡片列合并布局 9</a><a aria-hidden="true" class="leve2 tocs-link" href="#表格">表格</a><a aria-hidden="true" class="leve3 tocs-link" href="#基本表格">基本表格</a><a aria-hidden="true" class="leve4 tocs-link" href="#date">Date</a><a aria-hidden="true" class="leve4 tocs-link" href="#time">Time</a><a aria-hidden="true" class="leve3 tocs-link" href="#快捷键">快捷键</a><a aria-hidden="true" class="leve3 tocs-link" href="#展示标题">展示标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#列表样式展示表格">列表样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" href="#列表箭头样式展示表格">列表箭头样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" href="#隐藏表头强制小尺寸自动换行">隐藏表头强制小尺寸自动换行</a><a aria-hidden="true" class="leve2 tocs-link" href="#列表">列表</a><a aria-hidden="true" class="leve3 tocs-link" href="#一栏默认">一栏（默认）</a><a aria-hidden="true" class="leve3 tocs-link" href="#四列">四列</a><a aria-hidden="true" class="leve3 tocs-link" href="#列表步骤">列表步骤</a><a aria-hidden="true" class="leve3 tocs-link" href="#没有标记">没有标记</a><a aria-hidden="true" class="leve3 tocs-link" href="#圆圈标记">圆圈标记</a><a aria-hidden="true" class="leve3 tocs-link" href="#箭头标记">箭头标记</a><a aria-hidden="true" class="leve2 tocs-link" href="#h2-部分---5列效果展示">H2 部分 - 5列效果展示</a><a aria-hidden="true" class="leve3 tocs-link" href="#one">One</a><a aria-hidden="true" class="leve3 tocs-link" href="#two">Two</a><a aria-hidden="true" class="leve3 tocs-link" href="#three">Three</a><a aria-hidden="true" class="leve3 tocs-link" href="#four">Four</a><a aria-hidden="true" class="leve3 tocs-link" href="#five">Five</a><a aria-hidden="true" class="leve2 tocs-link" href="#h3-部分---占位效果展示">H3 部分 - 占位效果展示</a><a aria-hidden="true" class="leve3 tocs-link" href="#row-span-2">row-span-2</a><a aria-hidden="true" class="leve3 tocs-link" href="#col-span-2">col-span-2</a><a aria-hidden="true" class="leve3 tocs-link" href="#红色标题-1">红色标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#黄色标题">黄色标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#col-span-3">col-span-3</a><a aria-hidden="true" class="leve3 tocs-link" href="#卡片子项">卡片子项</a><a aria-hidden="true" class="leve4 tocs-link" href="#h4-子标题">H4 子标题</a><a aria-hidden="true" class="leve4 tocs-link" href="#h4-子标题-1">H4 子标题</a><a aria-hidden="true" class="leve3 tocs-link" href="#h3-部分-1">H3 部分</a><a aria-hidden="true" class="leve3 tocs-link" href="#h3-部分背景颜色">H3 部分背景颜色</a></div></div><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="本地编译预览"><a aria-hidden="true" tabindex="-1" href="#本地编译预览"><span class="icon icon-link"></span></a>本地编译预览</h3><div class="wrap-body">
|
||
<p>简单的将仓库克隆下来本地调试页面展示。</p>
|
||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="克隆仓库"><a aria-hidden="true" tabindex="-1" href="#克隆仓库"><span class="icon icon-link"></span></a>克隆仓库</h4><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-shell code-highlight"><span class="code-line"><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 id="安装依赖编译生成-html-页面"><a aria-hidden="true" tabindex="-1" href="#安装依赖编译生成-html-页面"><span class="icon icon-link"></span></a>安装依赖编译生成 HTML 页面</h4><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">npm</span> i <span class="token comment"># 安装依赖</span>
|
||
</span><span class="code-line"><span class="token function">npm</span> run build <span class="token comment"># 编译输出 HTML</span>
|
||
</span><span class="code-line"><span class="token function">npm</span> run start <span class="token comment"># 监听 md 文件编译输出 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 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</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"><span class="token title important"><span class="token punctuation">###</span> 卡片标题</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-2--></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">卡片 Markdown 内容展示，下面注释语法为文字内容改变样式
|
||
</span><span class="code-line"><span class="token comment"><!--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;" id="注释语法介绍"><a aria-hidden="true" tabindex="-1" href="#注释语法介绍"><span class="icon icon-link"></span></a>注释语法介绍</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3&style=color:black;background-color: #d7a100;-->
|
||
<ul>
|
||
<li>在某个 Markdown 语法下方或者后面，添加 HTML注释</li>
|
||
<li>以 <code><!--rehype:</code> 开始，<code>--></code> 结束，包裹参数内容</li>
|
||
<li>内容采用 URL 参数的字符拼接方式</li>
|
||
</ul>
|
||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="语法"><a aria-hidden="true" tabindex="-1" href="#语法"><span class="icon icon-link"></span></a>语法</h4><div class="wrap-body">
|
||
<p><code><!--rehype:</code> <em>+</em> <code>key=value</code> <em>+</em> <strong><code>&</code></strong> <em>+</em> <code>key=value</code> <em>+</em> <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 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h4><div class="wrap-body">
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H2 部分</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:body-class=cols-2--></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-2--></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="示例三行占位标题红色"><a aria-hidden="true" tabindex="-1" href="#示例三行占位标题红色"><span class="icon icon-link"></span></a>示例，三行占位，标题红色</h4><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 标题</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-3&style=color:red;--></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="参数说明"><a aria-hidden="true" tabindex="-1" href="#参数说明"><span class="icon icon-link"></span></a>参数说明</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 id="文字颜色"><a aria-hidden="true" tabindex="-1" href="#文字颜色"><span class="icon icon-link"></span></a>文字颜色</h3><div class="wrap-body">
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token italic"><span class="token punctuation">_</span><span class="token content">我是红色</span><span class="token punctuation">_</span></span><span class="token comment"><!--rehype:style=color: red;--></span>
|
||
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">加粗红色</span><span class="token punctuation">**</span></span><span class="token comment"><!--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 id="文字大小"><a aria-hidden="true" tabindex="-1" href="#文字大小"><span class="icon icon-link"></span></a>文字大小</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><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"><span class="token comment"><!--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 id="强制换行"><a aria-hidden="true" tabindex="-1" href="#强制换行"><span class="icon icon-link"></span></a>强制换行</h3><div class="wrap-body">
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">\```js
|
||
</span><span class="code-line">function () {}
|
||
</span><span class="code-line">\```
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:className=wrap-text --></span>
|
||
</span></code></pre>
|
||
<p>如果代码块内容太长，使用强制换行类解决</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="展示表格表头"><a aria-hidden="true" tabindex="-1" href="#展示表格表头"><span class="icon icon-link"></span></a>展示表格表头</h3><div class="wrap-body">
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><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"><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"><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"><span class="token table"><span class="token table-data-rows"></span></span><span class="token comment"><!--rehype:className=show-header--></span>
|
||
</span></code></pre>
|
||
<p>注释配置添加 <code>show-header</code> 类，放置在表格下面，表头将被展示出来。</p>
|
||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="代码行高亮"><a aria-hidden="true" tabindex="-1" href="#代码行高亮"><span class="icon icon-link"></span></a>代码行高亮</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token string">"./Student.css"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>上面 <code>{1,4-5}</code> 行代码高亮，下面是 <code>Markdown</code> 代码示例</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"> ```jsx {1,4-5}
|
||
</span></code></pre>
|
||
<p>代码行高亮可以和代码行号一起使用。</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="tooltips"><a aria-hidden="true" tabindex="-1" href="#tooltips"><span class="icon icon-link"></span></a>Tooltips</h3><div class="wrap-body">
|
||
<p><a href="https://github.com/jaywcjlove/reference">鼠标移动到上面有提示</a> <em>Tooltips 的提示内容</em><!--rehype:tooltips--></p>
|
||
<p>添加注释配置 <code><!--rehype:tooltips--></code> 添加一个 Tooltips 提示。</p>
|
||
</div></div></div><div class="wrap" style="background: #00c69357;"><div class="wrap-header h3wrap"><h3 id="h3-部分卡片背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分卡片背景颜色"><span class="icon icon-link"></span></a>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"><span class="token title important"><span class="token punctuation">###</span> H3 部分(卡片)背景颜色</span>
|
||
</span><span class="code-line"><span class="token comment"><!--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;" id="红色标题"><a aria-hidden="true" tabindex="-1" href="#红色标题"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body">
|
||
<!--rehype:style=background:#e91e63;-->
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 红色标题</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:style=background:#e91e63;--></span>
|
||
</span></code></pre>
|
||
<p>在 H3 标题下面添加样式标注 <code><!--rehype:style=background:#e91e63;--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="快捷键样式"><a aria-hidden="true" tabindex="-1" href="#快捷键样式"><span class="icon icon-link"></span></a>快捷键样式</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="shortcuts"><thead><tr><th>Key</th><th>value</th></tr></thead><tbody><tr><td><code>快捷键</code></td><td>说明</td></tr><tr><td><code>快捷键</code></td><td>说明</td></tr></tbody></table>
|
||
<!--rehype:className=shortcuts-->
|
||
<p>列表添加 <code><!--rehype:className=shortcuts--></code> 样式类，展示快捷键样式。</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="代码行号"><a aria-hidden="true" tabindex="-1" href="#代码行号"><span class="icon icon-link"></span></a>代码行号</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">学生</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> school <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">学校</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>下面是 <code>Markdown</code> 代码示例</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"> ```jsx showLineNumbers
|
||
</span></code></pre>
|
||
<p>标记语言后面添加 <code>showLineNumbers</code> 标识</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="内置类样式"><a aria-hidden="true" tabindex="-1" href="#内置类样式"><span class="icon icon-link"></span></a>内置类样式</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>shortcuts</code></td><td>快捷键样式</td></tr><tr><td align="left"><code>wrap-text</code></td><td>超出换行</td></tr><tr><td align="left"><code>show-header</code></td><td>展示表头</td></tr><tr><td align="left"><code>style-none</code></td><td>隐藏 <code><ul></code> 列表样式</td></tr><tr><td align="left"><code>style-list</code></td><td><code><table></code> 单元格行展示</td></tr></tbody></table>
|
||
<!--rehype:className=shortcuts-->
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="颜色标签"><a aria-hidden="true" tabindex="-1" href="#颜色标签"><span class="icon icon-link"></span></a>颜色标签</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code><yel></code></td><td><yel>黄色</yel></td></tr><tr><td align="left"><code><pur></code></td><td><pur>紫色</pur></td></tr><tr><td align="left"><code><code></code> 或 <code>``</code></td><td><code>绿</code><code>色</code></td></tr><tr><td align="left"><code><del></code> 或 <code>~~删除~~</code></td><td><del><del>红色</del></del></td></tr></tbody></table>
|
||
<!--rehype:className=shortcuts-->
|
||
</div></div></div><div class="wrap" style="padding-top: 0;"><div class="wrap-header h3wrap"><h3 style="display:none;" id="隐藏卡片标题"><a aria-hidden="true" tabindex="-1" href="#隐藏卡片标题"><span class="icon icon-link"></span></a>隐藏卡片标题</h3><div class="wrap-body">
|
||
<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
|
||
<pre><code class="code-highlight"><span class="code-line">隐藏卡片标题，在 H3 标题下面添加注释样式
|
||
</span></code></pre>
|
||
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 隐藏卡片标题</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:style=display:none;&wrap-style=padding-top: 0;--></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="html-代码预览"><a aria-hidden="true" tabindex="-1" href="#html-代码预览"><span class="icon icon-link"></span></a>HTML 代码预览</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line"> ```html preview
|
||
</span><span class="code-line"> 这里是你的 HTML 代码
|
||
</span><span class="code-line"> \```
|
||
</span></code></pre>
|
||
<p>上面的 <code>markdown</code> 代码在 <code>meta</code> 位置添加 <code>preview</code> 标识，HTML 代码将被执行预览</p>
|
||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="布局"><a aria-hidden="true" tabindex="-1" href="#布局"><span class="icon icon-link"></span></a>布局</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="h2-部分"><a aria-hidden="true" tabindex="-1" href="#h2-部分"><span class="icon icon-link"></span></a>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"><span class="token title important">H2 部分
|
||
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
|
||
</span><span class="code-line"><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"><span class="token title important">H2 部分
|
||
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:body-class=cols-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
|
||
</span><span class="code-line"><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><tr><td><code>cols-{1~6}</code></td><td><code>1~6</code> 栏卡片布局</td></tr></tbody></table>
|
||
<!--rehype:className=show-header -->
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="占位布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#占位布局-style-写法"><span class="icon icon-link"></span></a>占位布局 style 写法</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-style=grid-row: span 2/span 2;--></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>放在 <code>### H3 部分</code> 下面的注释配置，与 <code><!--rehype:wrap-class=row-span-2--></code> 相同，设置 2 行占位布局。</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片栏布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#卡片栏布局-style-写法"><span class="icon icon-link"></span></a>卡片栏布局 style 写法</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> H2 部分</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));--></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text -->
|
||
<p>放在 <code>## H2 部分</code> 下面的注释配置，与 <code><!--rehype:body-class=cols-2--></code> 相同，设置 2 栏布局。</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="h3-部分"><a aria-hidden="true" tabindex="-1" href="#h3-部分"><span class="icon icon-link"></span></a>H3 部分</h3><div class="wrap-body">
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-3--></span>
|
||
</span><span class="code-line"><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>col-span-5</code></td><td><code>5</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><tr><td><code>row-span-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 id="卡片合并行布局-1"><a aria-hidden="true" tabindex="-1" href="#卡片合并行布局-1"><span class="icon icon-link"></span></a>卡片合并行布局 1</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ H3 Title <span class="token number">1</span> ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 Title 1</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-3--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><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 id="卡片列合并布局-2"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-2"><span class="icon icon-link"></span></a>卡片列合并布局 2</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span><span class="code-line">┆ ┆ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><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 id="卡片列合并布局-3"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-3"><span class="icon icon-link"></span></a>卡片列合并布局 3</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ┆ ┆ ╰┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ┆ ┆ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><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 id="卡片列合并布局-4"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-4"><span class="icon icon-link"></span></a>卡片列合并布局 4</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ┆ ┆
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ┆ ┆
|
||
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=row-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><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 id="卡片列合并布局-5"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-5"><span class="icon icon-link"></span></a>卡片列合并布局 5</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||
</span><span class="code-line"><span class="token comment"><!--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 id="卡片列合并布局-6"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-6"><span class="icon icon-link"></span></a>卡片列合并布局 6</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||
</span></code></pre>
|
||
<p>在 <code>Title 2</code> 标题添加 <code>col-span-2</code> 占位类</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-7"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-7"><span class="icon icon-link"></span></a>卡片列合并布局 7</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||
</span></code></pre>
|
||
<p>在 <code>Title 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body">
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||
</span><span class="code-line">┆ H3 Title <span class="token number">1</span> ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
|
||
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">----</span></span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:body-class=cols-4--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-4--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||
</span></code></pre>
|
||
<p>在 <code>H2 部分</code> 标题添加 <code>cols-4</code>，和 <code>Title 1</code> 添加 <code>col-span-4</code> 合并栏</p>
|
||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-9"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-9"><span class="icon icon-link"></span></a>卡片列合并布局 9</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆
|
||
</span><span class="code-line">┆ ┆ ╰┈┈┈╯
|
||
</span><span class="code-line">┆ ┆ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ ┆ ┆ <span class="token number">3</span> ┆
|
||
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
|
||
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ <span class="token number">6</span> ┆
|
||
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||
</span></code></pre>
|
||
<p>上面布局效果 Markdown 源码：</p>
|
||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||
</span><span class="code-line"><span class="token comment"><!--rehype:wrap-class=col-span-2 row-span-2--></span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 6</span>
|
||
</span></code></pre>
|
||
<p>在 <code>Title 1</code> 标题添加 <code>col-span-2</code> 和 <code>row-span-2</code> 占位类，使用 <code>空格</code> 间隔。</p>
|
||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="表格"><a aria-hidden="true" tabindex="-1" href="#表格"><span class="icon icon-link"></span></a>表格</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="基本表格"><a aria-hidden="true" tabindex="-1" href="#基本表格"><span class="icon icon-link"></span></a>基本表格</h3><div class="wrap-body">
|
||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="date"><a aria-hidden="true" tabindex="-1" href="#date"><span class="icon icon-link"></span></a>Date</h4><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>%m/%d/%Y</code></td><td align="left">06/05/2013</td></tr><tr><td align="left"><code>%A, %B %e, %Y</code></td><td align="left">Sunday, June 5, 2013</td></tr><tr><td align="left"><code>%b %e %a</code></td><td align="left">Jun 5 Sun</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="time"><a aria-hidden="true" tabindex="-1" href="#time"><span class="icon icon-link"></span></a>Time</h4><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>%H:%M</code></td><td align="left">23:05</td></tr><tr><td align="left"><code>%I:%M %p</code></td><td align="left">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 id="快捷键"><a aria-hidden="true" tabindex="-1" href="#快捷键"><span class="icon icon-link"></span></a>快捷键</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>V</code></td><td align="left">Vector</td></tr><tr><td align="left"><code>P</code></td><td align="left">Pencil</td></tr><tr><td align="left"><code>T</code></td><td align="left">Text</td></tr><tr><td align="left"><code>L</code></td><td align="left">Line</td></tr><tr><td align="left"><code>R</code></td><td align="left">Rectangle</td></tr><tr><td align="left"><code>O</code></td><td align="left">Oval</td></tr><tr><td align="left"><code>U</code></td><td align="left">Rounded</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="展示标题"><a aria-hidden="true" tabindex="-1" href="#展示标题"><span class="icon icon-link"></span></a>展示标题</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><!--rehype:className=show-header--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="列表样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表样式展示表格"><span class="icon icon-link"></span></a>列表样式展示表格</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-->
|
||
<p><code><!--rehype:className=style-list--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="列表箭头样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表箭头样式展示表格"><span class="icon icon-link"></span></a>列表箭头样式展示表格</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
|
||
<!--rehype:className=style-list-arrow-->
|
||
<p><code><!--rehype:className=style-list-arrow--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="隐藏表头强制小尺寸自动换行"><a aria-hidden="true" tabindex="-1" href="#隐藏表头强制小尺寸自动换行"><span class="icon icon-link"></span></a>隐藏表头强制小尺寸自动换行</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="auto-wrap"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
|
||
<!--rehype:className=auto-wrap-->
|
||
<p><code><!--rehype:className=auto-wrap--></code></p>
|
||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="列表"><a aria-hidden="true" tabindex="-1" href="#列表"><span class="icon icon-link"></span></a>列表</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="一栏默认"><a aria-hidden="true" tabindex="-1" href="#一栏默认"><span class="icon icon-link"></span></a>一栏（默认）</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 id="四列"><a aria-hidden="true" tabindex="-1" href="#四列"><span class="icon icon-link"></span></a>四列</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><!--rehype:className=cols-4--></code></p>
|
||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="列表步骤"><a aria-hidden="true" tabindex="-1" href="#列表步骤"><span class="icon icon-link"></span></a>列表步骤</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<ul class="style-timeline">
|
||
<li><strong>重命名为 new_name</strong>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator"><</span>new_name<span class="token operator">></span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>推送和<strong>重置</strong>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">-u</span> <span class="token operator"><</span>new_name<span class="token operator">></span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>删除远程分支
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> <span class="token operator"><</span>old<span class="token operator">></span>
|
||
</span></code></pre>
|
||
</li>
|
||
</ul>
|
||
<!--rehype:className=style-timeline-->
|
||
<p><code><!--rehype:className=style-timeline--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="没有标记"><a aria-hidden="true" tabindex="-1" href="#没有标记"><span class="icon icon-link"></span></a>没有标记</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>
|
||
<li>Item 7</li>
|
||
<li>Item 8</li>
|
||
<li>Item 9</li>
|
||
</ul>
|
||
<!--rehype:className=cols-3 style-none-->
|
||
<p><code><!--rehype:className=cols-3 style-none--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="圆圈标记"><a aria-hidden="true" tabindex="-1" href="#圆圈标记"><span class="icon icon-link"></span></a>圆圈标记</h3><div class="wrap-body">
|
||
<ul class="style-round">
|
||
<li>Item 1</li>
|
||
<li>Item 2</li>
|
||
<li>Item 3</li>
|
||
</ul>
|
||
<!--rehype:className=style-round-->
|
||
<p><code><!--rehype:className=style-round--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="箭头标记"><a aria-hidden="true" tabindex="-1" href="#箭头标记"><span class="icon icon-link"></span></a>箭头标记</h3><div class="wrap-body">
|
||
<ul class="style-arrow">
|
||
<li>Item 1</li>
|
||
<li>Item 2</li>
|
||
<li>Item 3</li>
|
||
</ul>
|
||
<!--rehype:className=style-arrow-->
|
||
<p><code><!--rehype:className=style-arrow--></code></p>
|
||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h2-部分---5列效果展示"><a aria-hidden="true" tabindex="-1" href="#h2-部分---5列效果展示"><span class="icon icon-link"></span></a>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 id="one"><a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>One</h3><div class="wrap-body">
|
||
<!--rehype:wrap-style=background:#dba300;-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="two"><a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>Two</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="three"><a aria-hidden="true" tabindex="-1" href="#three"><span class="icon icon-link"></span></a>Three</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="four"><a aria-hidden="true" tabindex="-1" href="#four"><span class="icon icon-link"></span></a>Four</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="five"><a aria-hidden="true" tabindex="-1" href="#five"><span class="icon icon-link"></span></a>Five</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="h3-部分---占位效果展示"><a aria-hidden="true" tabindex="-1" href="#h3-部分---占位效果展示"><span class="icon icon-link"></span></a>H3 部分 - 占位效果展示</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="row-span-2"><a aria-hidden="true" tabindex="-1" href="#row-span-2"><span class="icon icon-link"></span></a>row-span-2</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
<p><code><!--rehype:wrap-class=row-span-2--></code></p>
|
||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="col-span-2"><a aria-hidden="true" tabindex="-1" href="#col-span-2"><span class="icon icon-link"></span></a>col-span-2</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
<p><code><!--rehype:wrap-class=col-span-2--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题-1"><a aria-hidden="true" tabindex="-1" href="#红色标题-1"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body">
|
||
<!--rehype:style=background:#e91e63;-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
<p><code><!--rehype:style=background:#e91e63;--></code></p>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="黄色标题"><a aria-hidden="true" tabindex="-1" href="#黄色标题"><span class="icon icon-link"></span></a>黄色标题</h3><div class="wrap-body">
|
||
<!--rehype:style=background:#d7a100;-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
<p><code><!--rehype:style=background:#d7a100;--></code></p>
|
||
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3 id="col-span-3"><a aria-hidden="true" tabindex="-1" href="#col-span-3"><span class="icon icon-link"></span></a>col-span-3</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-3-->
|
||
<pre><code class="code-highlight"><span class="code-line">...
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片子项"><a aria-hidden="true" tabindex="-1" href="#卡片子项"><span class="icon icon-link"></span></a>卡片子项</h3><div class="wrap-body">
|
||
<p>每个部分可以有以下子项：</p>
|
||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="h4-子标题"><a aria-hidden="true" tabindex="-1" href="#h4-子标题"><span class="icon icon-link"></span></a>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 id="h4-子标题-1"><a aria-hidden="true" tabindex="-1" href="#h4-子标题-1"><span class="icon icon-link"></span></a>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 id="h3-部分-1"><a aria-hidden="true" tabindex="-1" href="#h3-部分-1"><span class="icon icon-link"></span></a>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 id="h3-部分背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分背景颜色"><span class="icon icon-link"></span></a>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">注释配置：
|
||
</span><span class="code-line"><span class="token code-snippet code keyword">`<!--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><script>
|
||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||
window.onhashchange = function () {
|
||
anchorPoint()
|
||
updateAnchor()
|
||
};
|
||
}
|
||
function anchorPoint() {
|
||
const hash = window.location.hash?.replace(/^#/, '') || '';
|
||
const elm = document.getElementById(decodeURIComponent(hash));
|
||
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||
if (elm?.tagName === 'H3') {
|
||
elm?.parentElement?.parentElement?.classList.add('active');
|
||
const box = elm?.parentElement?.parentElement;
|
||
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
|
||
}
|
||
}
|
||
anchorPoint();
|
||
|
||
function updateAnchor(element) {
|
||
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchorContainer.forEach((tocanchor) => {
|
||
tocanchor.classList.remove('is-active-link');
|
||
});
|
||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||
console.log('anchor', anchor)
|
||
if (anchor) {
|
||
anchor.classList.add('is-active-link');
|
||
}
|
||
}
|
||
// toc 定位
|
||
updateAnchor()
|
||
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||
anchor.forEach((item) => {
|
||
item.addEventListener('click', (e) => {
|
||
updateAnchor()
|
||
})
|
||
})
|
||
</script>
|
||
|
||
</body></html> |