docs/src/contents/code.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

p Code is used for styling inline and multiline code snippets.
p
  | For inline code, you can use the #{'<code>'} element. 
  | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
  | The #[code data-lang] attribute is rendered as the language name in the top right.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <!-- code snippets -->
      <button class="btn">
        Submit
      </button>

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
        Submit
      &lt;<span class="tag">/button</span>&gt;
      </code></pre>