mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
doc: update quickreference.md. 0101ef71d0
This commit is contained in:
jaywcjlove
@ -58,7 +58,7 @@
|
||||
</span></code></pre>
|
||||
<p>HTML 存放在仓库根目录下的 <code>dist</code> 目录中，将 <code>dist/index.html</code> 静态页面在浏览器中打开预览。</p>
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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>
|
||||
<p>在备忘清单采用 <code>HTML 注释语法</code>，标识网站布局和一些样式，目的是为了在 <code>GitHub</code> 中也是正常毫无瑕疵的预览 <a href="./markdown.html"><code>Markdown</code></a>。</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">
|
||||
@ -70,7 +70,7 @@
|
||||
</div></div></div><div class="wrap h3body-exist 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>在某个 <a href="./markdown.html"><code>Markdown</code></a> 语法下方或者后面，添加 HTML注释</li>
|
||||
<li>以 <code><!--rehype:</code> 开始，<code>--></code> 结束，包裹参数内容</li>
|
||||
<li>内容采用 URL 参数的字符拼接方式</li>
|
||||
</ul>
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<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>卡片栏添加 <a href="./css.html">CSS</a> 样式</td></tr><tr><td><code>wrap-class</code></td><td>用于卡片占位，添加<code>类</code>名</td></tr></tbody></table>
|
||||
</div></div></div><div class="wrap h3body-not-exist"><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>
|
||||
@ -150,7 +150,7 @@
|
||||
</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>
|
||||
<p>上面 <code>{1,4-5}</code> 行代码高亮，下面是 <a href="./markdown.html"><code>Markdown</code></a> 代码示例</p>
|
||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"> ```jsx {1,4-5}
|
||||
</span></code></pre>
|
||||
<p>代码行高亮可以和代码行号一起使用。</p>
|
||||
@ -326,7 +326,7 @@
|
||||
<hr>
|
||||
<pre><b>这里是你的 HTML 代码</b>
|
||||
</pre>
|
||||
<p>上面的 <code>markdown</code> 代码在 <code>meta</code> 位置添加 <code>preview</code> 标识，HTML 代码将被执行预览</p>
|
||||
<p>上面的 <a href="./markdown.html"><code>markdown</code></a> 代码在 <code>meta</code> 位置添加 <code>preview</code> 标识，<a href="./html.html">HTML</a> 代码将被执行预览</p>
|
||||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="katex-数学渲染"><a aria-hidden="true" tabindex="-1" href="#katex-数学渲染"><span class="icon icon-link"></span></a>KaTeX 数学渲染</h3><div class="wrap-body">
|
||||
<pre class="language-katex"><code class="language-KaTeX code-highlight math math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>c</mi><mo>=</mo><mo>±</mo><msqrt><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mrow></msqrt><mi>L</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">c = \pm\sqrt{a^2 + b^2}
|
||||
L = \frac{1}{2} \rho v^2 S C_L
|
||||
@ -341,7 +341,7 @@ c-22.3,46.7,-33.8,70.3,-34.5,71c-4.7,4.7,-12.3,7,-23,7s-12,-1,-12,-1
|
||||
s-109,-253,-109,-253c-72.7,-168,-109.3,-252,-110,-252c-10.7,8,-22,16.7,-34,26
|
||||
c-22,17.3,-33.3,26,-34,26s-26,-26,-26,-26s76,-59,76,-59s76,-60,76,-60z
|
||||
M1001 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.1777em;"><span></span></span></span></span></span><span class="mord mathnormal">L</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.0074em;vertical-align:-0.686em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3214em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mord mathnormal">ρ</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3283em;"><span style="top:-2.55em;margin-left:-0.0715em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span></code></pre>
|
||||
<p>上面示例 <code>Markdown</code> 代码源码</p>
|
||||
<p>上面示例 <a href="./markdown.html"><code>Markdown</code></a> 代码源码</p>
|
||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line highlight-line"> ```KaTeX
|
||||
</span><span class="code-line"> c = \pm\sqrt{a^2 + b^2}
|
||||
</span><span class="code-line"> L = \frac{1}{2} \rho v^2 S C_L
|
||||
@ -357,7 +357,7 @@ c5.3,-9.3,12,-14,20,-14
|
||||
H400000v40H845.2724
|
||||
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
|
||||
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
|
||||
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.1266em;"><span></span></span></span></span></span></span></span></span></code>，需要标记 `KaTeX:数学公式` 将被显示成数学公式，这是基于 <a href="https://katex.org/">KaTeX</a> 生成</p>
|
||||
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.1266em;"><span></span></span></span></span></span></span></span></span></code>，需要标记 <code>`KaTeX:数学公式`</code> 将被显示成数学公式，这是基于 <a href="https://katex.org/">KaTeX</a> 生成</p>
|
||||
</div></div></div></div></div><div class="wrap h2body-exist"><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 h3body-not-exist 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-->
|
||||
@ -482,7 +482,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -500,7 +500,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -534,7 +534,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -551,7 +551,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -568,7 +568,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -585,7 +585,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -602,7 +602,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
@ -626,7 +626,7 @@ M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist
|
||||
</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>
|
||||
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</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>
|
||||
|
||||
Reference in New Issue
Block a user