Language selection

Search

Code

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to emulate source code and display it in monospace font.

Design and coding

Basic use

Inline code

Use to emulate snippets of code (such as HTML) within a regular sentence.

Appearance

Content here <a href="#">link</a> content here

Correct use

Compliance point(s):

  • Wrap snippets (one line or less) of code within a <code> tag
  • Ensure to use ASCII code so the code example renders properly:
    • Opening brackets (<) = &lt;
    • Closing brackets(>) = &gt;
    • Opening quote (") = &quot;
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<p>... <code>&lt;a href=&quot;#&quot;&gt;link&lt;/a&gt;</code> ...</p>

Code block

Use to emulate multiple lines (blocks) of code (such as HTML).

Appearance
<pre>
  <code>
   <div class="container-fluid">
    <div class="row">
     ...
	</div>
   </div>
  </code>
</pre>
Correct use

Compliance point(s):

  • Use <pre> and <code> tags together to emulate a formatted code block
  • Ensure to use ASCII code so the code example renders properly:
    • Opening brackets (<) = &lt;
    • Closing brackets(>) = &gt;
    • Quote (") = &quot;
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use this component within <span lang=fr"> or <span lang=en">
    • Only translate non-code text
Code
<pre><code> 
&lt;div class=&quot;container-fluid&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
     ...
   &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: