path: root / docs / src / elements / code.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'code'
  - var parent = 'elements'
  - var title = 'Code - Elements - Spectre.css CSS Framework'
  - var description = 'Code is used for styling inline and multiline code snippets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('code', 'Code')
    include ../_layout/_ad-g.pug

    p Code is used for styling inline and multiline code snippets.

    +docs-subheading('code-inline', 'Inline code')

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- inline code -->
          <code>code</code>

    p
      | For inline code, you can use the #{'<code>'} element. 

    +docs-subheading('code-snippet', 'Code snippet')

    p
      | 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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug