feat: add dart.md #58 7dab4bc821

This commit is contained in:
jaywcjlove
2022-11-13 08:21:01 +00:00
parent 0140619316
commit e7a4623eb8
4 changed files with 550 additions and 19 deletions

View File

@ -107,28 +107,28 @@
<li>使用 <code>&#x3C;!--rehype:class=home-card--></code> 标识卡片样式</li>
</ul>
</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="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=contributing--></span>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=contributing--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<!--rehype:className=wrap-text-->
<p>添加 <code>contributing</code> 类名,会在卡片下方默认添加 <code>👆待完善需要您的参与</code></p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">class=tag&#x26;data-info=👆看看还缺点儿什么?
</span></code></pre>
<p>上面示例将默认提示更改为: <code>👆看看还缺点儿什么?</code></p>
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=tag&#x26;data-lang=Python--></span>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=tag&#x26;data-lang=Python--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<!--rehype:className=wrap-text-->
<p>添加 <code>class=tag&#x26;data-lang=Python</code> 类名和参数,会在卡片右上角标记 <em><code>Python</code></em></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="markdown-语法注释"><a aria-hidden="true" tabindex="-1" href="#markdown-语法注释"><span class="icon icon-link"></span></a>Markdown 语法注释</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="介绍"><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-->
<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>
<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">&#x3C;!--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">&#x3C;!--rehype:style=color: red;--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<!--rehype:className=wrap-text-->
<p>上面基础示例,使用 <code>col-span-2</code> 类标识,卡片占 <code>2</code> 列位置,参考现有备忘清单的源代码是一个好习惯!</p>
</div></div></div><div class="wrap h3body-exist row-span-4"><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-4&style=color:black;background-color: #d7a100;-->
@ -148,10 +148,10 @@
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span></code></pre>
<h4 id="示例三行占位标题红色"><a aria-hidden="true" tabindex="-1" href="#示例三行占位标题红色"><span class="icon icon-link"></span></a>示例,三行占位,标题红色</h4>
<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>
<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">&#x3C;!--rehype:wrap-class=row-span-3&#x26;style=color:red;--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<!--rehype:className=wrap-text-->
<h4 id="参数说明"><a aria-hidden="true" tabindex="-1" href="#参数说明"><span class="icon icon-link"></span></a>参数说明</h4>
@ -185,16 +185,16 @@
</span></code></pre>
<p>上面添加注释样式,文字 <em style="color: red;">我是红色</em><!--rehype:style=color: red;--> 文字变<code></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">
<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>
<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">&#x3C;!--rehype:style=color: red;font-size: 18px--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<!--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 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">\```js
</span><span class="code-line">function () {}
</span><span class="code-line">\```
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:className=wrap-text --></span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:className=wrap-text--></span>
</span></code></pre>
<p>如果代码块内容太长,使用强制换行类(<code>wrap-text</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">