feat: add react.md cheatsheet. 0f5128ebd9

This commit is contained in:
jaywcjlove
2022-10-03 16:56:52 +00:00
parent 82a05113d5
commit 0e968d7e74
5 changed files with 684 additions and 8 deletions

View File

@ -444,7 +444,27 @@
</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 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap col-span-2"><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">
</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 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 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">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-4--></span>
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line line-number" line="5"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-4--></span>
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line line-number" line="8"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line line-number" line="9"><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 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>