## 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
                    style="
                        background: var(--color_fill_secondary);
                        padding: 2px 6px;
                        border-radius: 4px;
                        font-family: monospace;
                        font-size: 0.9em;
                    "
                >
                    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
                style="
                    background: #1e1e1e;
                    color: #d4d4d4;
                    padding: 20px;
                    border-radius: 8px;
                    overflow-x: auto;
                    font-family:
                        &quot;Fira Code&quot;, &quot;Monaco&quot;, monospace;
                    font-size: 14px;
                    line-height: 1.6;
                "
            ><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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!