1.4.3隐藏文本持续进行中

2024-10-04 21:31:07 +08:00 · 2024-10-04 21:31:07 +08:00 · ee3a51215b
commit ee3a51215b
parent 6efb2afd0c
4 changed files with 215 additions and 120 deletions
--- a/README.html
+++ b/README.html
@ -4,6 +4,7 @@
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>UTF-8编码示例</title>  
+    <link href="style.css" rel="stylesheet" />
    <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>
@ -55,7 +56,7 @@
    <li><a href="#1.2.5">1.2.5 删除线</a></li>
    <li><a href="#1.2.6">1.2.6 高亮</a></li>
    <li><a href="#1.2.7">1.2.7 在文本的正上方添加一行小文本主要用于标拼音</a></li>
-    <li><a href="#1.2.8">1.2.8 [在指定的文本里面隐藏一段文本]-(只有鼠标放在上面才会显示隐藏文本)</a></li>
+    <li><a href="#1.2.8">1.2.8 在指定的文本里面隐藏一段文本只有鼠标放在上面才会显示隐藏文本</a></li>
    <li><a href="#1.2.9">1.2.9 分割线</a></li>
    </ul>
    </li>
@ -67,54 +68,55 @@
    </li>
    </ul>
    </li>
-    <li><a href="#2">2 变量</a><ul>
+    <li><a href="#2">2 缩写</a><ul>
    <li><a href="#2.1">2.1 定义</a></li>
    <li><a href="#2.2">2.2 赋值</a></li>
-    <li><a href="#2.3">2.3 添加锚点</a></li>
    </ul>
    </li>
-    <li><a href="#3">3 代码块</a><ul>
-    <li><a href="#3.1">3.1 单行</a><ul>
-    <li><a href="#3.1.1">3.1.1 LaTex</a></li>
-    <li><a href="#3.1.2">3.1.2 函数</a></li>
-    <li><a href="#3.1.3">3.1.3 强调</a></li>
+    <li><a href="#3">3 锚点</a></li>
+    <li><a href="#4">4 代码块</a><ul>
+    <li><a href="#4.1">4.1 单行</a><ul>
+    <li><a href="#4.1.1">4.1.1 LaTex</a></li>
+    <li><a href="#4.1.2">4.1.2 函数</a></li>
+    <li><a href="#4.1.3">4.1.3 强调</a></li>
    </ul>
    </li>
-    <li><a href="#3.2">3.2 多行</a><ul>
-    <li><a href="#3.2.1">3.2.1 YAML</a></li>
-    <li><a href="#3.2.2">3.2.2 Python</a></li>
-    <li><a href="#3.2.3">3.2.3 Mermaid</a></li>
+    <li><a href="#4.2">4.2 多行</a><ul>
+    <li><a href="#4.2.1">4.2.1 YAML</a></li>
+    <li><a href="#4.2.2">4.2.2 Python</a></li>
+    <li><a href="#4.2.3">4.2.3 Mermaid</a></li>
+    </ul>
+    </li>
+    <li><a href="#4.3">4.3 代码高亮</a></li>
+    </ul>
+    </li>
+    <li><a href="#5">5 转义</a></li>
+    <li><a href="#6">6 引用</a></li>
+    <li><a href="#7">7 提纲</a><ul>
+    <li><a href="#7.1">7.1 提纲号</a><ul>
+    <li><a href="#7.1.1">7.1.1 提纲号示例</a></li>
    </ul>
    </li>
    </ul>
    </li>
-    <li><a href="#4">4 转义</a></li>
-    <li><a href="#5">5 引用</a></li>
-    <li><a href="#6">6 提纲</a><ul>
-    <li><a href="#6.1">6.1 提纲号</a><ul>
-    <li><a href="#6.1.1">6.1.1 提纲号示例</a></li>
+    <li><a href="#8">8 注释</a><ul>
+    <li><a href="#8.1">8.1 强注释</a></li>
+    <li><a href="#8.2">8.2 弱注释</a></li>
    </ul>
    </li>
+    <li><a href="#9">9 列表</a><ul>
+    <li><a href="#9.1">9.1 有序列表</a></li>
+    <li><a href="#9.2">9.2 无序列表</a></li>
    </ul>
    </li>
-    <li><a href="#7">7 注释</a><ul>
-    <li><a href="#7.1">7.1 强注释</a></li>
-    <li><a href="#7.2">7.2 弱注释</a></li>
-    </ul>
-    </li>
-    <li><a href="#8">8 列表</a><ul>
-    <li><a href="#8.1">8.1 有序列表</a></li>
-    <li><a href="#8.2">8.2 无序列表</a></li>
-    </ul>
-    </li>
-    <li><a href="#9">9 表格</a></li>
-    <li><a href="#10">10 警告</a></li>
-    <li><a href="#11">11 Emoji</a></li>
-    <li><a href="#12">12 扩展语法</a></li>
+    <li><a href="#10">10 表格</a></li>
+    <li><a href="#11">11 警告</a></li>
+    <li><a href="#12">12 Emoji</a></li>
+    <li><a href="#13">13 扩展语法</a></li>
    </ul>
    </div>
    <h1 id="CrossDown">CrossDown</h1>
-    <p>自制的markdown，添加了一些自定义的语法<br />
+    <p>自制的markdown,添加了一些自定义的语法<br />
    效果请见<a href="https://github.com/CrossDark/CrossDown/blob/main/README.html">README.html</a></p>
    <h1 id="1">1 基本语法</h1>
    <h2 id="1.1">1.1 标题</h2>
@ -132,7 +134,7 @@
    <h3 id="1.2.5">1.2.5 <s>删除线</s></h3>
    <h3 id="1.2.6">1.2.6 <mark>高亮</mark></h3>
    <h3 id="1.2.7">1.2.7 <ruby>在文本的正上方添加一行小文本<rt>主要用于标拼音</rt></ruby></h3>
-    <h3 id="1.2.8">1.2.8 [在指定的文本里面隐藏一段文本]-(只有鼠标放在上面才会显示隐藏文本)</h3>
+    <h3 id="1.2.8">1.2.8 <ruby>在指定的文本里面隐藏一段文本<rt>只有鼠标放在上面才会显示隐藏文本</rt></ruby></h3>
    <h3 id="1.2.9">1.2.9 分割线</h3>
    <hr />
    <hr />
@ -147,49 +149,57 @@
    <p><img alt="sea" src="https://crossdark.com/wp-content/uploads/2024/05/1715259682-sea.jpg" /></p>
    <h3 id="1.3.3">1.3.3 变量链接</h3>
    <p><a href="https://crossdark.com">链接文本</a></p>
-    <h1 id="2">2 变量</h1>
+    <h1 id="2">2 <abbr title="长的文本">缩写</abbr></h1>
    <h2 id="2.1">2.1 定义</h2>
    <h2 id="2.2">2.2 赋值</h2>
-    <p>值 <a href="#锚点名">锚点名</a></p>
-    <p>提纲的编号已经自动配置为了锚点,可直接使用{2}</p>
-    <h2 id="2.3">2.3 添加锚点</h2>
+    <p>直接在文本中使用 <abbr title="长的文本">缩写</abbr> 即可</p>
+    <h1 id="3">3 锚点</h1>
    <p><span id="锚点名"></span></p>
-    <h1 id="3">3 代码块</h1>
-    <h2 id="3.1">3.1 <code>单行</code></h2>
-    <h3 id="3.1.1">3.1.1 LaTex</h3>
+    <h1 id="4">4 代码块</h1>
+    <h2 id="4.1">4.1 <code>单行</code></h2>
+    <h3 id="4.1.1">4.1.1 LaTex</h3>
    <p><code>$CO_2$</code></p>
    <p><code>$H_2O$</code></p>
-    <h3 id="3.1.2">3.1.2 函数</h3>
+    <h3 id="4.1.2">4.1.2 函数</h3>
    <p><code>¥y=x*2+1¥</code>  // 不定义范围</p>
    <p><code>¥y=x**2¥€-50,50€</code>  // 定义了x范围</p>
    <p><code>¥y=x**3¥€-50,50|-100,100€</code>  // 定义了y范围</p>
-    <h3 id="3.1.3">3.1.3 强调</h3>
+    <h3 id="4.1.3">4.1.3 强调</h3>
    <p><code>{强调文本}</code></p>
-    <h2 id="3.2">3.2 多行</h2>
-    <h3 id="3.2.1">3.2.1 YAML</h3>
-    <p><code>A:
-        1. a
-        2. b
-        3. c
-    B:
-        - a
-        - b
-        - c</code></p>
-    <h3 id="3.2.2">3.2.2 Python</h3>
-    <p><code>python
-    print('CrossDown')</code></p>
-    <h3 id="3.2.3">3.2.3 Mermaid</h3>
-    <p><code>mermaid
-    graph LR
-        A--&gt;B
-        A--&gt;C
-        B--&gt;D
-        C--&gt;D</code></p>
-    <h1 id="4">4 转义</h1>
+    <h2 id="4.2">4.2 多行</h2>
+    <h3 id="4.2.1">4.2.1 YAML</h3>
+    <div class="codehilite"><pre><span></span><code><span class="nt">A</span><span class="p">:</span>
+    <span class="w">    </span><span class="l l-Scalar l-Scalar-Plain">1. a</span>
+    <span class="w">    </span><span class="l l-Scalar l-Scalar-Plain">2. b</span>
+    <span class="w">    </span><span class="l l-Scalar l-Scalar-Plain">3. c</span>
+    <span class="nt">B</span><span class="p">:</span>
+    <span class="w">    </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">a</span>
+    <span class="w">    </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">b</span>
+    <span class="w">    </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">c</span>
+    </code></pre></div>
+    
+    <h3 id="4.2.2">4.2.2 Python</h3>
+    <div class="codehilite"><pre><span></span><code><span class="p">:::</span><span class="n">python</span>
+    <span class="nb">print</span><span class="p">(</span><span class="s1">&#39;CrossDown&#39;</span><span class="p">)</span>
+    </code></pre></div>
+    
+    <h3 id="4.2.3">4.2.3 Mermaid</h3>
+    <div class="codehilite"><pre><span></span><code><span class="nf">graph</span><span class="w"> </span><span class="n">LR</span>
+    <span class="w">    </span><span class="n">A</span><span class="o">--&gt;</span><span class="n">B</span>
+    <span class="w">    </span><span class="n">A</span><span class="o">--&gt;</span><span class="n">C</span>
+    <span class="w">    </span><span class="n">B</span><span class="o">--&gt;</span><span class="n">D</span>
+    <span class="w">    </span><span class="n">C</span><span class="o">--&gt;</span><span class="n">D</span>
+    </code></pre></div>
+    
+    <h2 id="4.3">4.3 代码高亮</h2>
+    <div class="codehilite"><pre><span></span><code>
+    </code></pre></div>
+    
+    <h1 id="5">5 转义</h1>
    <p>\ </p>
    <p>\a </p>
    <p>*</p>
-    <h1 id="5">5 引用</h1>
+    <h1 id="6">6 引用</h1>
    <blockquote>
    <p>一级引用</p>
    <blockquote>
@ -209,43 +219,43 @@
    </blockquote>
    <p>引文内添加<em>斜体</em><strong>粗体</strong>~下划线<s>~删除线</s><mark>高亮</mark></p>
    </blockquote>
-    <h1 id="6">6 提纲</h1>
-    <h2 id="6.1">6.1 提纲号</h2>
+    <h1 id="7">7 提纲</h1>
+    <h2 id="7.1">7.1 提纲号</h2>
    <p>以数字和点组成,通过空格与提纲名分隔,例如:</p>
-    <h3 id="6.1.1">6.1.1 提纲号示例</h3>
+    <h3 id="7.1.1">7.1.1 提纲号示例</h3>
    <p>点不能出现在开头或结尾,例如</p>
-    <p>.6.1.2 错误示范</p>
-    <p>6.1.3. 错误示范</p>
+    <p>.7.1.2 错误示范</p>
+    <p>7.1.3. 错误示范</p>
    <p>不能出现两个及以上连续的点,例如:</p>
-    <p>6..1&hellip;4 错误示范</p>
-    <p>提纲号会被自动配置为锚点,可直接使用{6}{6.1}</p>
-    <h1 id="7">7 注释</h1>
-    <h2 id="7.1">7.1 强注释</h2>
+    <p>7..1&hellip;4 错误示范</p>
+    <p>提纲号会被自动配置为锚点,可直接使用{7}76.1}</p>
+    <h1 id="8">8 注释</h1>
+    <h2 id="8.1">8.1 强注释</h2>
    <p>|=<br />
    无论如何都会被移除<br />
    <code>放在代码块里也没用</code><br />
    =|</p>
-    <h2 id="7.2">7.2 弱注释</h2>
+    <h2 id="8.2">8.2 弱注释</h2>
    <!-- 这是注释 -->
    
    <p>只有在 // 后面才会被移除</p>
    <p><code>// 代码中的注释弱不会被移除</code></p>
-    <h1 id="8">8 列表</h1>
-    <h2 id="8.1">8.1 有序列表</h2>
+    <h1 id="9">9 列表</h1>
+    <h2 id="9.1">9.1 有序列表</h2>
    <ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    </ol>
-    <h2 id="8.2">8.2 无序列表</h2>
+    <h2 id="9.2">9.2 无序列表</h2>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    </ul>
-    <h1 id="9">9 表格</h1>
+    <h1 id="10">10 表格</h1>
    <table>
    <thead>
    <tr>
@ -267,13 +277,14 @@
    </tr>
    </tbody>
    </table>
-    <h1 id="10">10 警告</h1>
-    <div class="admonition 这是一条警告">
-    <p class="admonition-title">这是一条警告</p>
+    <h1 id="11">11 警告</h1>
+    <div class="admonition warning">
+    <p class="admonition-title">警告标题</p>
+    <p>警告内容</p>
    </div>
-    <h1 id="11">11 Emoji</h1>
+    <h1 id="12">12 Emoji</h1>
    <p>:person_biking:</p>
    <p>:grinning_face_with_big_eyes:</p>
-    <h1 id="12">12 扩展语法</h1>
+    <h1 id="13">13 扩展语法</h1>
 </body>  
 </html>
--- a/README.md
+++ b/README.md
@ -78,21 +78,21 @@ ___

 直接在文本中使用 缩写 即可

-2.3 锚点
+3 锚点

 {#锚点名}

-3 代码块
+4 代码块

-3.1 `单行`
+4.1 `单行`

-3.1.1 LaTex
+4.1.1 LaTex

 `$CO_2$`

 `$H_2O$`

-3.1.2 函数
+4.1.2 函数

 `¥y=x*2+1¥`  // 不定义范围

@ -100,15 +100,15 @@ ___

 `¥y=x**3¥€-50,50|-100,100€`  // 定义了y范围

-3.1.3 强调
+4.1.3 强调

 `{强调文本}`

-3.2 多行
+4.2 多行

-3.2.1 YAML
+4.2.1 YAML

-`
+```yaml
 A:
    1. a
    2. b
@ -117,25 +117,31 @@ B:
    - a
    - b
    - c
-`
+```

-3.2.2 Python
+4.2.2 Python

-`python
+```python
 print('CrossDown')
-`
+```

-3.2.3 Mermaid
+4.2.3 Mermaid

-`mermaid
+```mermaid
 graph LR
    A-->B
    A-->C
    B-->D
    C-->D
-`
+```

-4 转义
+4.3 代码高亮
+
+```python
+
+```
+
+5 转义

 \\ 

@ -143,7 +149,7 @@ graph LR

 \*

-5 引用
+6 引用

 > 一级引用
 >> 二级引用
@ -154,36 +160,36 @@ graph LR
 > 
 > 引文内添加*斜体***粗体**~下划线~~~删除线~~==高亮==

-6 提纲
+7 提纲

-6.1 提纲号
+7.1 提纲号

 以数字和点组成,通过空格与提纲名分隔,例如:

-6.1.1 提纲号示例
+7.1.1 提纲号示例

 点不能出现在开头或结尾,例如

-.6.1.2 错误示范
+.7.1.2 错误示范

-6.1.3. 错误示范
+7.1.3. 错误示范

 不能出现两个及以上连续的点,例如:

-6..1...4 错误示范
+7..1...4 错误示范

-提纲号会被自动配置为锚点,可直接使用{6}{6.1}
+提纲号会被自动配置为锚点,可直接使用{7}76.1}

-7 注释
+8 注释

-7.1 强注释
+8.1 强注释

 |=
 无论如何都会被移除
 `放在代码块里也没用`
 =|

-7.2 弱注释
+8.2 弱注释

 <!-- 这是注释 -->

@ -191,35 +197,37 @@ graph LR

 `// 代码中的注释弱不会被移除`

-8 列表
+9 列表
+
+9.1 有序列表

-8.1 有序列表
 1. a
 2. b
 3. c
 4. d

-8.2 无序列表
+9.2 无序列表
 - A
 - B
 - C
 - D

-9 表格
+10 表格

 | 表头1  | 表头2  | 表头3  |  
 |:----:|:----:|:----:|  
 | 单元格1 | 单元格2 | 单元格3 |  
 | 单元格4 | 单元格5 | 单元格6 |

-10 警告
+11 警告

-!!! 这是一条警告
+!!! warning "警告标题"
+    警告内容

-11 Emoji
+12 Emoji

 :person_biking:

 :grinning_face_with_big_eyes:

-12 扩展语法
+13 扩展语法
--- a/run.py
+++ b/run.py
@ -17,6 +17,7 @@ if __name__ == '__main__':
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>UTF-8编码示例</title>  
+    <link href="style.css" rel="stylesheet" />
 {indent(HEAD)}
    <!-- 可以在这里添加其他元数据和CSS链接 -->  
 </head>  
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,75 @@
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.codehilite .hll { background-color: #ffffcc }
+.codehilite { background: #f8f8f8; }
+.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
+.codehilite .err { border: 1px solid #FF0000 } /* Error */
+.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
+.codehilite .o { color: #666666 } /* Operator */
+.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
+.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+.codehilite .gd { color: #A00000 } /* Generic.Deleted */
+.codehilite .ge { font-style: italic } /* Generic.Emph */
+.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+.codehilite .gr { color: #E40000 } /* Generic.Error */
+.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #008400 } /* Generic.Inserted */
+.codehilite .go { color: #717171 } /* Generic.Output */
+.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.codehilite .gs { font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #0044DD } /* Generic.Traceback */
+.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
+.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #B00040 } /* Keyword.Type */
+.codehilite .m { color: #666666 } /* Literal.Number */
+.codehilite .s { color: #BA2121 } /* Literal.String */
+.codehilite .na { color: #687822 } /* Name.Attribute */
+.codehilite .nb { color: #008000 } /* Name.Builtin */
+.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.codehilite .no { color: #880000 } /* Name.Constant */
+.codehilite .nd { color: #AA22FF } /* Name.Decorator */
+.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
+.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+.codehilite .nf { color: #0000FF } /* Name.Function */
+.codehilite .nl { color: #767600 } /* Name.Label */
+.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #19177C } /* Name.Variable */
+.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
+.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
+.codehilite .mf { color: #666666 } /* Literal.Number.Float */
+.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
+.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
+.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
+.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
+.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
+.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
+.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
+.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+.codehilite .sx { color: #008000 } /* Literal.String.Other */
+.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
+.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
+.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
+.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
+.codehilite .vc { color: #19177C } /* Name.Variable.Class */
+.codehilite .vg { color: #19177C } /* Name.Variable.Global */
+.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
+.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
+.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */