Bootstrap docs

Code

Displaying inline and multiline blocks of code.

The code highlighting feature is made with the CodeBlock component based on the React Syntax Highlighter component.

Inline code

Wrap inline snippets of code with <code>.

<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</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>&lt;p&gt;Sample text here...&lt;/p&gt;
    &lt;p&gt;And another line of sample text here...&lt;/p&gt;</code>
</pre>

Code block scrollable

<div class="table-responsive">
  <table class="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 class="overflow-auto" style={{height: '20rem'}}>
  <code>
    Code goes here...
  </code>
</pre>

Code highlighting

<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>
import CodeBlock from '@/components/code-block'

export default function CodeHighlightingDemo() {
  const 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>`

  return (
    <CodeBlock language="html">{code}</CodeBlock>
  )
}
Top