mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
feat: HTML code preview is supported in markdown. a478fbb888
This commit is contained in:
jaywcjlove
@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-color-mode="dark">
|
||||
<head>
|
||||
<!doctype html><html lang="en" data-color-mode="dark"><head></head><body>
|
||||
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Quick Reference 备忘清单
|
||||
& quickreference cheatsheet & Quick Reference</title>
|
||||
@ -9,8 +9,8 @@
|
||||
<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">
|
||||
</head>
|
||||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||
|
||||
<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>
|
||||
@ -45,7 +45,7 @@
|
||||
</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
|
||||
<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">
|
||||
@ -56,7 +56,7 @@
|
||||
<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>
|
||||
<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 内容展示，下面注释语法为文字内容改变样式
|
||||
@ -82,7 +82,7 @@
|
||||
</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>
|
||||
<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 -->
|
||||
@ -119,7 +119,7 @@
|
||||
</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>
|
||||
<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 -->
|
||||
@ -152,11 +152,11 @@
|
||||
</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" class="tooltip">鼠标移动到上面有提示<em class="tooltiptext">Tooltips 的提示内容</em></a></p>
|
||||
<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>
|
||||
<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 -->
|
||||
@ -259,10 +259,16 @@
|
||||
<!--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>
|
||||
<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-->
|
||||
@ -315,16 +321,16 @@
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 -->
|
||||
@ -377,7 +383,7 @@
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<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">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||||
@ -859,7 +865,7 @@
|
||||
<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">注释配置：
|
||||
<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 -->
|
||||
@ -880,5 +886,6 @@ function anchorPoint() {
|
||||
}
|
||||
}
|
||||
anchorPoint();
|
||||
</script></body>
|
||||
</html>
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user