Code Characters

Monospace code formatting for inline and block code snippets.

Inline Code

Use the console.log() function to debug your JavaScript code.

HTML 
<p>
            Use the
            <code>console.log()</code>
            function to debug your JavaScript code.
        </p>

Code Block

function greet(name) {
    return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message);
HTML 
<pre><code>function greet(name) {
    return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message);</code></pre>

Syntax Highlighted Code

const Button = ({ children, onClick }) => (
  <button
    className="button button-primary"
    onClick={onClick}
  >
    {children}
  </button>
);
HTML 
<pre
            style="
                background: #282c34;
                padding: 20px;
                border-radius: 8px;
                overflow-x: auto;
                font-family: monospace;
                font-size: 14px;
                line-height: 1.6;
            "
        ><code><span style="color: #c678dd;">const</span> <span style="color: #e06c75;">Button</span> <span style="color: #56b6c2;">=</span> <span style="color: #c678dd;">(</span><span style="color: #e5c07b;">{ children, onClick }</span><span style="color: #c678dd;">)</span> <span style="color: #c678dd;">=></span> <span style="color: #c678dd;">(</span>
  <span style="color: #e06c75;">&lt;button</span>
    <span style="color: #d19a66;">className</span><span style="color: #56b6c2;">=</span><span style="color: #98c379;">"button button-primary"</span>
    <span style="color: #d19a66;">onClick</span><span style="color: #56b6c2;">=</span><span style="color: #c678dd;">{</span><span style="color: #e5c07b;">onClick</span><span style="color: #c678dd;">}</span>
  <span style="color: #e06c75;">&gt;</span>
    <span style="color: #c678dd;">{</span><span style="color: #e5c07b;">children</span><span style="color: #c678dd;">}</span>
  <span style="color: #e06c75;">&lt;/button&gt;</span>
<span style="color: #c678dd;">)</span><span style="color: #abb2bf;">;</span></code></pre>

Code with Line Numbers

1
2
3
4
5 
.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
HTML 
<div
            style="
                display: flex;
                background: #1e1e1e;
                border-radius: 8px;
                overflow: hidden;
                font-family: monospace;
                font-size: 14px;
            "
        >
            <div
                style="
                    padding: 20px 12px;
                    background: #252526;
                    color: #858585;
                    text-align: right;
                    user-select: none;
                    line-height: 1.6;
                "
            >
                1
                <br />
                2
                <br />
                3
                <br />
                4
                <br />
                5
            </div>
            <pre
                style="
                    margin: 0;
                    padding: 20px;
                    color: #d4d4d4;
                    overflow-x: auto;
                    flex: 1;
                    line-height: 1.6;
                "
            ><code>.container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}</code></pre>
        </div>

Keyboard Input (kbd)

Press Ctrl + S to save your work.

Use ⌘ + Shift + P to open command palette.

HTML 
<p style="line-height: 2">
            Press
            <kbd
                style="
                    background: var(--color_fill_secondary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 4px;
                    padding: 4px 8px;
                    font-family: monospace;
                    font-size: 0.9em;
                    box-shadow: 0 2px 0 var(--color_line_secondary);
                "
            >
                Ctrl
            </kbd>
            +
            <kbd
                style="
                    background: var(--color_fill_secondary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 4px;
                    padding: 4px 8px;
                    font-family: monospace;
                    font-size: 0.9em;
                    box-shadow: 0 2px 0 var(--color_line_secondary);
                "
            >
                S
            </kbd>
            to save your work.
        </p>
        <p style="line-height: 2">
            Use
            <kbd
                style="
                    background: var(--color_fill_secondary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 4px;
                    padding: 4px 8px;
                    font-family: monospace;
                    font-size: 0.9em;
                    box-shadow: 0 2px 0 var(--color_line_secondary);
                "
            >
                ⌘
            </kbd>
            +
            <kbd
                style="
                    background: var(--color_fill_secondary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 4px;
                    padding: 4px 8px;
                    font-family: monospace;
                    font-size: 0.9em;
                    box-shadow: 0 2px 0 var(--color_line_secondary);
                "
            >
                Shift
            </kbd>
            +
            <kbd
                style="
                    background: var(--color_fill_secondary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 4px;
                    padding: 4px 8px;
                    font-family: monospace;
                    font-size: 0.9em;
                    box-shadow: 0 2px 0 var(--color_line_secondary);
                "
            >
                P
            </kbd>
            to open command palette.
        </p>

Sample Output (samp)

$ npm run build

> stylescape@1.0.0 build > vite build ✓ 142 modules transformed. dist/index.html 2.15 kB dist/assets/index.js 124.56 kB ✓ Built in 2.34s
HTML 
<div
            style="
                padding: 16px;
                background: #0d1117;
                border-radius: 8px;
                font-family: monospace;
                color: #c9d1d9;
            "
        >
            <p style="margin: 0 0 8px; color: #8b949e">$ npm run build</p>
            <samp style="white-space: pre-line; line-height: 1.5">
                > stylescape@1.0.0 build > vite build ✓ 142 modules
                transformed. dist/index.html 2.15 kB dist/assets/index.js
                124.56 kB
                <span style="color: #3fb950">✓ Built in 2.34s</span>
            </samp>
        </div>