Components · Code

组件

Code 代码

行内 pvs-code 与代码块 pvs-code-blockpvs-tok-* 轻量 token 色(文档站手工或生成)。

Inline

安装:npm install pivcss,或 CDN 引入 pivcss.css

<p class="pvs-m-0">安装:<code class="pvs-code">npm install pivcss</code>,或 CDN 引入 <code class="pvs-code">pivcss.css</code>。</p>

Code block

<link rel="stylesheet" href="/assets/pivcss.css" /><script src="/assets/pivcss.min.js" defer></script>
<pre class="pvs-code-block">
  <code>&lt;link rel="stylesheet" href="/assets/pivcss.css" /&gt;&lt;script src="/assets/pivcss.min.js" defer&gt;&lt;/script&gt;</code>
</pre>

Syntax tokens

手工 span.pvs-tok-* 或文档构建时注入;无 Prism 依赖。

function hello(name) { return 'Hi ' + name; }
<pre class="pvs-code-block pvs-code-block--light">
  <code>
    <span class="pvs-tok-kw">function</span>
    <span class="pvs-tok-fn">hello</span>(<span class="pvs-tok-str">name</span>) { <span class="pvs-tok-kw">return</span>
    <span class="pvs-tok-str">'Hi '</span> + name; }</code>
    </pre>

类名速查

类名说明
pvs-code行内代码
pvs-code-block / pvs-pre块级代码
pvs-code-block--light浅色底
pvs-tok-kw / -str / -cmt / -fntoken 色