Code
React Code utilities - free bootstrap examples & tutorial
Documentation and templates for displaying inline and multiline blocks of code with React Bootstrap 5. Code typography, code block, code prism, code snippet & more.
Inline code
Wrap inline snippets of code with<code>. Be sure to escape HTML angle brackets.
<section> should be wrapped as inline. import React from 'react'; export default function App() { return ( For example, <code><section></code> should be wrapped as inline. ); }Code blocks
Use<pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the.pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.
<p>Sample text here...</p> <p>And another line of sample text here...</p> import React from 'react'; export default function App() { return ( <pre> <code> <p>Sample text here...</p> <p>And another line of sample text here...</p> </code> </pre> ); }Variables
For indicating variables use the<var> tag.
import React from 'react'; export default function App() { return ( <> <var>y</var> = <var>m</var> <var>x</var> + <var>b</var> </> ); }User input
Use the<kbd> to indicate input that is typically entered via keyboard.
To edit settings, pressctrl +,
import React from 'react'; export default function App() { return ( <> To switch directories, type <kbd>cd</kbd> followed by the name of the directory. <br /> To edit settings, press{' '} <kbd> <kbd>ctrl</kbd> + <kbd>,</kbd> </kbd> </> ); }Sample output
For indicating sample output from a program use the<samp> tag.
import React from 'react'; export default function App() { return ( <samp>This text is meant to be treated as sample output from a computer program.</samp> ); }