Code

Displaying inline and multiline blocks of code.

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>. Be sure to escape HTML angle brackets.</p>

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

<p>
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>

Variables

y = mx + b

<var>y</var> = <var>mx</var> + <var>b</var>

Code block

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre>
  <code>{`<p>Sample text here...</p>
<p>And another line of sample text here...</p>`}</code>
</pre>

Code block scrollable

<div className='table-responsive'>
  <table className='table'>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Position</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope='row'>1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td>+3 555 68 70</td>
      </tr>
      <tr>
        <th scope='row'>2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+3 434 65 93</td>
      </tr>
      <tr>
        <th scope='row'>3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+3 285 42 88</td>
      </tr>
      <tr>
        <th scope='row'>4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div>

<pre style={{maxHeight: '20rem'}}>
<code>{`<div className='table-responsive'>
  <table className='table'>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Position</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope='row'>1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td>+3 555 68 70</td>
      </tr>
      <tr>
        <th scope='row'>2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+3 434 65 93</td>
      </tr>
      <tr>
        <th scope='row'>3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+3 285 42 88</td>
      </tr>
      <tr>
        <th scope='row'>4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+3 774 28 50</td>
      </tr>
    </tbody>
  </table>
</div>`}</code>
</pre>

Code highlighting

<div className='table-responsive'>
  <table className='table'>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name &amp;</th>
        <th>Last Name</th>
        <th>Position</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope='row'>1</th>
        <td>John</td>
        <td>Doe</td>
        <td>CEO, Founder</td>
        <td>+3 555 68 70</td>
      </tr>
      <tr>
        <th scope='row'>2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+3 434 65 93</td>
      </tr>
      <tr>
        <th scope='row'>3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+3 285 42 88</td>
      </tr>
    </tbody>
  </table>
</div>

import Code from '../components/Code'

<Code language='jsx'>{`
  JavaScript / JSX / HTML / CSS Code goes here. No escaping needed.
`}</Code>

Content

Components