feat: add tocs feature & fix page element generation issue (#9). dd8a3cb26d

2025-06-19 21:51:20 +08:00 · 2022-10-28 14:08:05 +00:00
parent 6d83213a34
commit d659018cb1
61 changed files with 2455 additions and 1077 deletions
--- a/docs/stylus.html
+++ b/docs/stylus.html
@ -1,6 +1,6 @@
-<!doctype html><html lang="en" data-color-mode="dark"><head></head><body>
-
-
+<!doctype html>
+<html lang="en" data-color-mode="dark">
+<head>
 <meta charset="utf-8">
 <title>Stylus 备忘清单
 &#x26;  stylus cheatsheet &#x26;  Quick Reference</title>
@ -9,8 +9,8 @@
 <meta keywords="Quick,Reference,cheatsheet,stylus">
 <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">
-
-<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">
+</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">
  <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>
@ -39,7 +39,9 @@
 </svg>
 <a aria-hidden="true" tabindex="-1" href="#stylus-备忘清单"><span class="icon icon-link"></span></a>Stylus 备忘清单</h1><div class="wrap-body">
 <p>本备忘单旨在快速理解 <a href="https://github.com/stylus/stylus">stylus</a> 所涉及的主要概念，显示了它的常用方法使用清单。</p>
-</div></header><div class="h1wrap-body"><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></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
+  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
+</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#支持-css-嵌套语法">支持 CSS 嵌套语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#支持类-python-缩进语法">支持类 python 缩进语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#混合-mixins">混合 Mixins</a><a aria-hidden="true" class="leve3 tocs-link" href="#变量-variables">变量 Variables</a><a aria-hidden="true" class="leve2 tocs-link" href="#混合-mixins-1">混合 Mixins</a><a aria-hidden="true" class="leve3 tocs-link" href="#没有参数">没有参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#有参数">有参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数默认值">参数默认值</a><a aria-hidden="true" class="leve3 tocs-link" href="#块混合">块混合</a><a aria-hidden="true" class="leve3 tocs-link" href="#rest-参数">Rest 参数</a><a aria-hidden="true" class="leve2 tocs-link" href="#函数-functions">函数 Functions</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数-functions-1">函数 Functions</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数默认值-1">参数默认值</a><a aria-hidden="true" class="leve3 tocs-link" href="#命名参数">命名参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#多个返回值">多个返回值</a><a aria-hidden="true" class="leve3 tocs-link" href="#arguments">arguments</a><a aria-hidden="true" class="leve3 tocs-link" href="#hash-示例">hash 示例</a><a aria-hidden="true" class="leve2 tocs-link" href="#值-values">值 Values</a><a aria-hidden="true" class="leve3 tocs-link" href="#条件赋值">条件赋值</a><a aria-hidden="true" class="leve3 tocs-link" href="#属性查找">属性查找</a><a aria-hidden="true" class="leve3 tocs-link" href="#插值">插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#color-operators">Color operators</a><a aria-hidden="true" class="leve3 tocs-link" href="#casting">Casting</a><a aria-hidden="true" class="leve3 tocs-link" href="#lookup">Lookup</a><a aria-hidden="true" class="leve2 tocs-link" href="#高级功能">高级功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#有条件的">有条件的</a><a aria-hidden="true" class="leve3 tocs-link" href="#对于循环">对于循环</a><a aria-hidden="true" class="leve3 tocs-link" href="#定义检查">定义检查</a><a aria-hidden="true" class="leve3 tocs-link" href="#false-值">False 值</a><a aria-hidden="true" class="leve3 tocs-link" href="#类型检查">类型检查</a><a aria-hidden="true" class="leve2 tocs-link" href="#内置函数">内置函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#颜色函数">颜色函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#图片尺寸">图片尺寸</a><a aria-hidden="true" class="leve3 tocs-link" href="#缓存-caching">缓存 Caching</a><a aria-hidden="true" class="leve3 tocs-link" href="#embed-url">Embed URL</a><a aria-hidden="true" class="leve3 tocs-link" href="#添加属性">添加属性</a><a aria-hidden="true" class="leve3 tocs-link" href="#sprintf">sprintf</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><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="介绍"><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>为 Node.js 构建的富有表现力、健壮、功能丰富的 <a href="./css.html">CSS</a> 语言</p>
@ -85,7 +87,7 @@
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">h5</span>
-</span><span class="code-line highlight-line">  <span class="token func"><span class="token function">caps-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
+</span><span class="code-line">  <span class="token func"><span class="token function">caps-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
 </span></code></pre>
 <p>编译 css 为：</p>
 <pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">h5</span> <span class="token punctuation">{</span>
@ -109,41 +111,41 @@
 <p>另见：<a href="https://stylus-lang.com/docs/variables.html">变量 Variables</a></p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="混合-mixins-1"><a aria-hidden="true" tabindex="-1" href="#混合-mixins-1"><span class="icon icon-link"></span></a>混合 Mixins</h2><div class="wrap-body">
 </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">
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> solid <span class="token number">2</span><span class="token unit">px</span> <span class="token color">red</span></span>
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
-</span><span class="code-line highlight-line">  <span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
+</span><span class="code-line">  <span class="token func"><span class="token function">red-border</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/mixins.html">Mixins</a></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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> n</span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> n</span>
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span></span>
-</span><span class="code-line highlight-line">  <span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span></span>
+</span><span class="code-line">  <span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
 </span></code></pre>
 <p>Mixins can be applied in two different ways.</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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">border-radius</span><span class="token punctuation">(</span>n <span class="token operator">=</span> <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">-webkit-border-radius</span><span class="token punctuation">:</span> n</span>
 </span></code></pre>
 </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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>max-width<span class="token punctuation">:</span> <span class="token number">480</span><span class="token unit">px</span><span class="token punctuation">)</span></span>
-</span><span class="code-line highlight-line">    <span class="token interpolation variable"><span class="token delimiter punctuation">{</span>block<span class="token delimiter punctuation">}</span></span>
+</span><span class="code-line">    <span class="token interpolation variable"><span class="token delimiter punctuation">{</span>block<span class="token delimiter punctuation">}</span></span>
 </span></code></pre>
 <hr>
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line">+<span class="token func"><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line">+<span class="token func"><span class="token function">mobile</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span></span>
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/mixins.html#block-mixins">块混合</a></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="rest-参数"><a aria-hidden="true" tabindex="-1" href="#rest-参数"><span class="icon icon-link"></span></a>Rest 参数</h3><div class="wrap-body">
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>offset-x<span class="token punctuation">,</span> args<span class="token operator">...</span><span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>offset-x<span class="token punctuation">,</span> args<span class="token operator">...</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> offset-x args</span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> offset-x</span>
 </span></code></pre>
@ -154,16 +156,16 @@
 <p>另见: <a href="http://stylus-lang.com/docs/vargs.html">Rest 参数</a></p>
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="函数-functions"><a aria-hidden="true" tabindex="-1" href="#函数-functions"><span class="icon icon-link"></span></a>函数 Functions</h2><div class="wrap-body">
 </div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数-functions-1"><a aria-hidden="true" tabindex="-1" href="#函数-functions-1"><span class="icon icon-link"></span></a>函数 Functions</h3><div class="wrap-body">
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">a</span> <span class="token operator">+</span> b</span>
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">body</span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span></span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span></span></span>
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/functions.html">Functions</a></p>
 </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>参数默认值</h3><div class="wrap-body">
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">add</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">a</span> <span class="token operator">+</span> b</span>
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/functions.html#argument-defaults">参数默认值</a></p>
@ -173,12 +175,12 @@
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.button</span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span></span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">shadow</span><span class="token punctuation">(</span>x<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">)</span></span></span>
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/functions.html#named-parameters">命名参数</a></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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sizes</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">8px</span> <span class="token number">16</span><span class="token unit">px</span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">8px</span> <span class="token number">16</span><span class="token unit">px</span></span>
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">sizes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>  <span class="token comment">// → 8px</span></span>
@ -196,7 +198,7 @@
 </span></code></pre>
 <p>参数 local 可用于所有函数体，并包含所有传递的参数</p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="hash-示例"><a aria-hidden="true" tabindex="-1" href="#hash-示例"><span class="icon icon-link"></span></a>hash 示例</h3><div class="wrap-body">
-<pre class="wrap-text"><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">get</span><span class="token punctuation">(</span>hash<span class="token punctuation">,</span> key<span class="token punctuation">)</span></span>
+<pre class="wrap-text "><code class="language-stylus code-highlight"><span class="code-line"><span class="token func"><span class="token function">get</span><span class="token punctuation">(</span>hash<span class="token punctuation">,</span> key<span class="token punctuation">)</span></span>
 </span><span class="code-line">  <span class="token statement"><span class="token keyword">return</span> pair<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token keyword">if</span> pair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> key <span class="token keyword">for</span> pair <span class="token operator">in</span> hash</span>
 </span><span class="code-line">
 </span><span class="code-line"><span class="token variable-declaration"><span class="token variable">hash</span> <span class="token operator">=</span> <span class="token punctuation">(</span>one <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">(</span>two <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">(</span>three <span class="token number">3</span><span class="token punctuation">)</span></span>
@ -208,7 +210,7 @@
 </div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="值-values"><a aria-hidden="true" tabindex="-1" href="#值-values"><span class="icon icon-link"></span></a>值 Values</h2><div class="wrap-body">
 </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">
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">=</span> <span class="token hexcode">#36a</span></span>
-</span><span class="code-line highlight-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">?=</span> <span class="token hexcode">#89f</span></span>
+</span><span class="code-line"><span class="token variable-declaration"><span class="token variable">royal-blue</span> <span class="token operator">?=</span> <span class="token hexcode">#89f</span></span>
 </span></code></pre>
 <hr>
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">div</span>
@ -218,8 +220,8 @@
 <p>另见: <a href="https://stylus-lang.com/docs/operators.html#conditional-assignment--">条件赋值</a></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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token selector">.logo</span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> w <span class="token operator">=</span> <span class="token number">150</span></span>
-</span><span class="code-line highlight-line">  <span class="token property-declaration"><span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">-</span><span class="token punctuation">(</span>w <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span></span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> w <span class="token operator">=</span> <span class="token number">150</span></span>
+</span><span class="code-line">  <span class="token property-declaration"><span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">-</span><span class="token punctuation">(</span>w <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span></span></span>
 </span><span class="code-line">  <span class="token comment">// or</span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">-</span><span class="token punctuation">(</span>@height <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span></span></span>
@ -238,13 +240,13 @@
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">n</span> <span class="token operator">=</span> <span class="token number">5</span><span class="token unit">px</span></span>
 </span></code></pre>
 <hr>
-<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n<span class="token punctuation">)</span>em</span>
-</span><span class="code-line highlight-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token operator">%</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n<span class="token punctuation">)</span>em</span>
+</span><span class="code-line"><span class="token property-declaration"><span class="token property">foo</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>n <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token operator">%</span></span>
 </span></code></pre>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="lookup"><a aria-hidden="true" tabindex="-1" href="#lookup"><span class="icon icon-link"></span></a>Lookup</h3><div class="wrap-body">
 <pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token variable-declaration"><span class="token variable">light-blue</span> <span class="token operator">=</span> <span class="token hexcode">#3bd</span></span>
 </span><span class="code-line"><span class="token variable-declaration"><span class="token variable">name</span> <span class="token operator">=</span> <span class="token string">'blue'</span></span>
-</span><span class="code-line highlight-line"><span class="token func"><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token string">'light-'</span> <span class="token operator">+</span> name<span class="token punctuation">)</span></span>
+</span><span class="code-line"><span class="token func"><span class="token function">lookup</span><span class="token punctuation">(</span><span class="token string">'light-'</span> <span class="token operator">+</span> name<span class="token punctuation">)</span></span>
 </span></code></pre>
 <p>另见: <a href="https://stylus-lang.com/docs/bifs.html#lookupname">lookup</a></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">
@ -288,11 +290,11 @@
 </span><span class="code-line"><span class="token variable-declaration"><span class="token variable">font-size-2</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token unit">px</span></span>
 </span><span class="code-line"><span class="token variable-declaration"><span class="token variable">font-size-3</span> <span class="token operator">=</span> <span class="token number">30</span><span class="token unit">px</span></span>
 </span><span class="code-line"><span class="token statement"><span class="token keyword">for</span> i <span class="token operator">in</span> <span class="token number">1</span><span class="token operator">..</span><span class="token number">3</span></span>
-</span><span class="code-line highlight-line">  <span class="token selector">.text-<span class="token interpolation variable"><span class="token delimiter punctuation">{</span>i<span class="token delimiter punctuation">}</span></span></span>
+</span><span class="code-line">  <span class="token selector">.text-<span class="token interpolation variable"><span class="token delimiter punctuation">{</span>i<span class="token delimiter punctuation">}</span></span></span>
 </span><span class="code-line">    <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> lookup<span class="token punctuation">(</span><span class="token string">'font-size-'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span></span>
 </span></code></pre>
 </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="language-stylus"><code class="language-stylus code-highlight"><span class="code-line highlight-line"><span class="token statement"><span class="token keyword">if</span> ohnoes <span class="token operator">is defined</span></span>
+<pre class="language-stylus"><code class="language-stylus code-highlight"><span class="code-line"><span class="token statement"><span class="token keyword">if</span> ohnoes <span class="token operator">is defined</span></span>
 </span><span class="code-line">  <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span></span>
 </span></code></pre>
 <p>另见: <a href="https://stylus-lang.com/docs/operators.html#variable-definition-is-defined">is defined</a></p>
@ -363,7 +365,7 @@
 </span></code></pre>
 <p>在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 <code>@extend</code> 第一次调用的选择器。另见: <a href="http://stylus-lang.com/docs/bifs.html#cachekeys">cache</a></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="embed-url"><a aria-hidden="true" tabindex="-1" href="#embed-url"><span class="icon icon-link"></span></a>Embed URL</h3><div class="wrap-body">
-<pre class="wrap-text"><code class="code-highlight"><span class="code-line">background: embedurl('logo.png')
+<pre class="wrap-text "><code class="code-highlight"><span class="code-line">background: embedurl('logo.png')
 </span><span class="code-line">// → background: url("data:image/png;base64,…")
 </span></code></pre>
 <!--rehype:className=wrap-text -->
@ -379,7 +381,7 @@
 </span></code></pre>
 <p>另见: <a href="http://stylus-lang.com/docs/bifs.html#add-propertyname-expr">add-property</a></p>
 </div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="sprintf"><a aria-hidden="true" tabindex="-1" href="#sprintf"><span class="icon icon-link"></span></a>sprintf</h3><div class="wrap-body">
-<pre class="wrap-text"><code class="language-stylus code-highlight"><span class="code-line"><span class="token string">'-webkit-gradient(%s, %s, %s)'</span> % <span class="token punctuation">(</span>linear <span class="token punctuation">(</span>0 0<span class="token punctuation">)</span> <span class="token punctuation">(</span>0 100%<span class="token punctuation">)</span><span class="token punctuation">)</span>
+<pre class="wrap-text "><code class="language-stylus code-highlight"><span class="code-line"><span class="token string">'-webkit-gradient(%s, %s, %s)'</span> % <span class="token punctuation">(</span>linear <span class="token punctuation">(</span>0 0<span class="token punctuation">)</span> <span class="token punctuation">(</span>0 100%<span class="token punctuation">)</span><span class="token punctuation">)</span>
 </span><span class="code-line"><span class="token comment">// → -webkit-gradient(linear, 0 0, 0 100%)</span>
 </span></code></pre>
 <!--rehype:className=wrap-text -->
@ -397,6 +399,7 @@
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
  window.onhashchange = function () {
    anchorPoint()
+    updateAnchor()
  };
 }
 function anchorPoint() {
@ -410,6 +413,25 @@ function anchorPoint() {
  }
 }
 anchorPoint();
-</script>

-</body></html>
+function updateAnchor(element) {
+  const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+  anchorContainer.forEach((tocanchor) => {
+    tocanchor.classList.remove('is-active-link');
+  });
+  const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
+  console.log('anchor', anchor)
+  if (anchor) {
+    anchor.classList.add('is-active-link');
+  }
+}
+// toc 定位
+updateAnchor()
+const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
+anchor.forEach((item) => {
+  item.addEventListener('click', (e) => {
+    updateAnchor()
+  })
+})
+</script></body>
+</html>