forked from CrossDark/CrossDown
170 lines
5.8 KiB
HTML
170 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>UTF-8编码示例</title>
|
||
<script type="text/javascript" async
|
||
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
|
||
</script>
|
||
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" />
|
||
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script>
|
||
<style>
|
||
.block {
|
||
background-color: grey; /* 灰色背景 */
|
||
color: white; /* 白色文字 */
|
||
}
|
||
</style>
|
||
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
||
<!-- 可以在这里添加其他元数据和CSS链接 -->
|
||
</head>
|
||
<body>
|
||
<script>
|
||
mermaid.initialize({startOnLoad:true});
|
||
</script>
|
||
<h1>CrossDown</h1>
|
||
<p>自制的markdown，添加了一些自定义的语法
|
||
效果请见<a href="https://github.com/CrossDark/CrossDown/blob/main/README.html">README.html</a></p>
|
||
<h1>1<span id="1"></span> 基本语法</h1>
|
||
<h2>1.1<span id="1.1"></span> 标题</h2>
|
||
<h1>一级标题</h1>
|
||
<h2>二级标题</h2>
|
||
<h3>三级标题</h3>
|
||
<h4>四级标题</h4>
|
||
<h5>五级标题</h5>
|
||
<h6>六级标题</h6>
|
||
<h2>1.2<span id="1.2"></span> 样式</h2>
|
||
<h3>1.2.1<span id="1.2.1"></span> <em>斜体</em></h3>
|
||
<h3>1.2.2<span id="1.2.2"></span> <strong>粗体</strong></h3>
|
||
<h3>1.2.3<span id="1.2.3"></span> <strong><em>粗斜体</em></strong></h3>
|
||
<h3>1.2.4<span id="1.2.4"></span> <u>下划线</u></h3>
|
||
<h3>1.2.5<span id="1.2.5"></span> <s>删除线</s></h3>
|
||
<h3>1.2.6<span id="1.2.6"></span> <mark>高亮</mark></h3>
|
||
<h3>1.2.7<span id="1.2.7"></span> <ruby>在文本的正上方添加一行小文本<rt>主要用于标拼音</rt></ruby></h3>
|
||
<h3>1.2.8<span id="1.2.8"></span> <span title="只有鼠标放在上面才会显示隐藏文本">在指定的文本里面隐藏一段文本</span></h3>
|
||
<h3>1.2.9<span id="1.2.9"></span> 分割线</h3>
|
||
<hr />
|
||
<hr />
|
||
<hr />
|
||
<h2>1.3<span id="1.3"></span> 链接</h2>
|
||
<h3>1.3.1<span id="1.3.1"></span> 普通链接</h3>
|
||
<p><a href="链接地址">链接文本</a>
|
||
<a href="https://crossdark.com">CrossDark</a></p>
|
||
<h3>1.3.2<span id="1.3.2"></span> 图片</h3>
|
||
<p><img alt="链接图片" src="链接地址" />
|
||
<img alt="sea" src="https://crossdark.com/wp-content/uploads/2024/05/1715259682-sea.jpg" /></p>
|
||
<h3>1.3.3<span id="1.3.3"></span> 变量链接</h3>
|
||
<p><a href="https://crossdark.com">链接文本</a></p>
|
||
<h1>2<span id="2"></span> 变量</h1>
|
||
<h2>2.1<span id="2.1"></span> 定义</h2>
|
||
<h2>2.2<span id="2.2"></span> 赋值</h2>
|
||
<p>值 <a href="#锚点名">锚点名</a>
|
||
提纲的编号已经自动配置为了锚点,可直接使用<a href="#2">2</a></p>
|
||
<h2>2.3<span id="2.3"></span> 添加锚点</h2>
|
||
<p><span id="锚点名"></span></p>
|
||
<h1>3<span id="3"></span> 代码块</h1>
|
||
<h2>3.1<span id="3.1"></span> <span class="block">单行</span></h2>
|
||
<h3>3.1.1<span id="3.1.1"></span> LaTex</h3>
|
||
<p><p>\(CO_2\)</p>
|
||
<p>\(H_2O\)</p></p>
|
||
<h2>3.2<span id="3.2"></span> 多行</h2>
|
||
<h3>3.2.1<span id="3.2.1"></span> YAML</h3>
|
||
<p><pre><code class="language-yaml">
|
||
A:
|
||
1. a
|
||
2. b
|
||
3. c
|
||
B:
|
||
- a
|
||
- b
|
||
- c
|
||
</code></pre></p>
|
||
<h3>3.2.2<span id="3.2.2"></span> Python</h3>
|
||
<p><pre><code class="language-python">
|
||
print('CrossDown')
|
||
</code></pre></p>
|
||
<h3>3.2.3<span id="3.2.3"></span> Mermaid</h3>
|
||
<p><div class="mermaid">
|
||
graph LR
|
||
A-->B
|
||
A-->C
|
||
B-->D
|
||
C-->D
|
||
</div></p>
|
||
<h1>4<span id="4"></span> 转义</h1>
|
||
<p>\
|
||
\a
|
||
*</p>
|
||
<h1>5<span id="5"></span> 引用</h1>
|
||
<blockquote>
|
||
<p>一级引用</p>
|
||
<blockquote>
|
||
<p>二级引用</p>
|
||
<blockquote>
|
||
<p>三级引用</p>
|
||
<blockquote>
|
||
<p>四级引用</p>
|
||
<blockquote>
|
||
<p>五级引用</p>
|
||
<blockquote>
|
||
<p>六级引用</p>
|
||
</blockquote>
|
||
</blockquote>
|
||
</blockquote>
|
||
</blockquote>
|
||
</blockquote>
|
||
<p>引文内添加<em>斜体</em><strong>粗体</strong><u>下划线</u><s>删除线</s><mark>高亮</mark></p>
|
||
</blockquote>
|
||
<h1>6<span id="6"></span> 提纲</h1>
|
||
<h2>6.1<span id="6.1"></span> 提纲号</h2>
|
||
<p>以数字和点组成,通过空格与提纲名分隔,例如:</p>
|
||
<h3>6.1.1<span id="6.1.1"></span> 提纲号示例</h3>
|
||
<p>点不能出现在开头或结尾,例如
|
||
.6.1.2 错误示范
|
||
6.1.3. 错误示范</p>
|
||
<h1>7<span id="7"></span> 注释</h1>
|
||
<h2>7.1<span id="7.1"></span> 强注释</h2>
|
||
<h2>7.2<span id="7.2"></span> 弱注释</h2>
|
||
<p>只有在
|
||
<span class="block">// 代码中的注释弱不会被移除</span></p>
|
||
<h1>8<span id="8"></span> 列表</h1>
|
||
<h2>8.1<span id="8.1"></span> 有序列表</h2>
|
||
<ol>
|
||
<li>a</li>
|
||
<li>b</li>
|
||
<li>c</li>
|
||
<li>d</li>
|
||
</ol>
|
||
<h2>8.2<span id="8.2"></span> 无序列表</h2>
|
||
<ul>
|
||
<li>A</li>
|
||
<li>B</li>
|
||
<li>C</li>
|
||
<li>D</li>
|
||
</ul>
|
||
<h1>9<span id="9"></span> 表格</h1>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align: center;">表头1</th>
|
||
<th style="text-align: center;">表头2</th>
|
||
<th style="text-align: center;">表头3</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align: center;">单元格1</td>
|
||
<td style="text-align: center;">单元格2</td>
|
||
<td style="text-align: center;">单元格3</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: center;">单元格4</td>
|
||
<td style="text-align: center;">单元格5</td>
|
||
<td style="text-align: center;">单元格6</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</body>
|
||
</html>
|