代码

定义代码<code><pre><kbd>标签样式。

内联代码

使用.vus-code类,作为<code>标签样式,包裹内联样式的代码片段。

高亮<body></body>代码。
高亮<code class="vus-code">&lt;body&gt;&lt;/body&gt;</code>代码。

内联代码颜色

  • 一些有代表意义的代码颜色类。
  • .primary:首选、主要。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、失败。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
.primary .success .warning .danger .info .dark .light
<code class="vus-code primary">primary</code>
<code class="vus-code success">success</code>
<code class="vus-code warning">warning</code>
<code class="vus-code danger">danger</code>
<code class="vus-code info">info</code>
<code class="vus-code dark">dark</code>
<code class="vus-code light">light</code>

键盘输入

使用.vus-kbd类,作为<kbd>标签样式,标记用户通过键盘输入的内容。

使用Ctrl + C复制,并通过Ctrl + V粘贴。
<kbd class="vus-kbd">Ctrl + C</kbd>

代码块

使用.vus-pre类,作为<pre>标签样式。通过添加属性v--lang=""为代码块显示语言类型标记。

html
css
js
<pre class="vus-pre" v--lang="html">
   html
</pre>
<pre class="vus-pre" v--lang="css">
   css
</pre>
<pre class="vus-pre" v--lang="js">
   js
</pre>

代码块高度

添加.scrollbar类,限制代码块高度,默认max-height: 320px

// 九九乘法口诀
for (var i = 1; i <= 9; i++) {
   var html = '';
   for (var j = 1; j <= i; j++) {
      html += j + 'x' + i + '=' + (i*j) + ' ';
   }
   console.log(html); // 输出
}

// 运行结果:
1x1=1 
1x2=2 2x2=4 
1x3=3 2x3=6 3x3=9 
1x4=4 2x4=8 3x4=12  4x4=16  
1x5=5 2x5=10  3x5=15  4x5=20  5x5=25  
1x6=6 2x6=12  3x6=18  4x6=24  5x6=30  6x6=36  
1x7=7 2x7=14  3x7=21  4x7=28  5x7=35  6x7=42  7x7=49  
1x8=8 2x8=16  3x8=24  4x8=32  5x8=40  6x8=48  7x8=56  8x8=64  
1x9=9 2x9=18  3x9=27  4x9=36  5x9=45  6x9=54  7x9=63  8x9=72  9x9=81  
<pre class="vus-pre scrollbar" v--lang="js">
for (var i = 1; i <= 9; i++) {
   var html = '';
   for (var j = 1; j <= i; j++) {
      html += j + 'x' + i + '=' + (i*j) + ' ';
   }
   console.log(html); 
}
</pre>

代码块颜色

添加.dark类,以暗黑色风格展示。

var people = (function() {
   var name = '张三';
   // “闭包”内的函数能访问 name 变量,而 name 变量对于外部是隐藏的
   return {
      getName: function() {
         // 通过定义的接口来访问 name
         return name;
      },
      setName: function(newName) {
         // 通过定义的接口来修改 name
         name = newName;
      }
   };
}());

people.getName(); // 输出 '张三'
people.name; // undefined
people.setName('李四'); // 通过函数接口,访问并修改了 name 变量
people.getName(); // 输出 '李四'
<pre class="vus-pre dark" v--lang="js">
   var people = (function() {
      ...
   }
   ...
</pre>