# Code

## Code block with lines and no wrapping

<pre class="language-typescript" data-line-numbers><code class="lang-typescript">function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        &#x3C;span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
<strong>                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
</strong>                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            &#x3C;span className="flex-1">
                &#x3C;CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers &#x26;&#x26; line.tokens.length === 0 &#x26;&#x26; 0 ? (
                    &#x3C;span className="ew">{'\u200B'}&#x3C;/span>
                ) : (
                    '\n'
                )}
            &#x3C;/span>
        &#x3C;/span>
    );
}
</code></pre>

## Code block with line numbers and wrapping

<pre class="language-typescript" data-overflow="wrap" data-line-numbers><code class="lang-typescript">function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        &#x3C;span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
<strong>                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
</strong>                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            &#x3C;span className="flex-1">
                &#x3C;CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers &#x26;&#x26; line.tokens.length === 0 &#x26;&#x26; 0 ? (
                    &#x3C;span className="ew">{'\u200B'}&#x3C;/span>
                ) : (
                    '\n'
                )}
            &#x3C;/span>
        &#x3C;/span>
    );
}
</code></pre>

## Code block with wrapping but no line numbers

<pre class="language-typescript" data-overflow="wrap"><code class="lang-typescript">function CodeHighlightLine(props: {
    block: DocumentBlockCode;
    line: HighlightLine;
    lineIndex: number;
    isLast: boolean;
    withLineNumbers: boolean;
    withWrap: boolean;
    context: ContentRefContext;
}) {
    const { block, line, isLast, withLineNumbers, context } = props;

    return (
        &#x3C;span
            className={tcls(
                'flex',
                'flex-row',
                'px-4',
                line.highlighted ? 'bg-slate-200' : null,
                withLineNumbers
                    ? [
                          'before:shrink-0',
                          'before:absolute',
                          'before:left-0',
                          'before:pl-4',
<strong>                          line.highlighted ? 'before:bg-slate-200' : 'before:bg-slate-100',
</strong>                          'before:text-slate-400',
                          'before:content-[counter(line)]',
                          '[counter-increment:line]',
                          getLineNumberGutterWidth(block),
                      ]
                    : [],
            )}
        >
            &#x3C;span className="flex-1">
                &#x3C;CodeHighlightTokens tokens={line.tokens} context={context} />
                {isLast ? null : !withLineNumbers &#x26;&#x26; line.tokens.length === 0 &#x26;&#x26; 0 ? (
                    &#x3C;span className="ew">{'\u200B'}&#x3C;/span>
                ) : (
                    '\n'
                )}
            &#x3C;/span>
        &#x3C;/span>
    );
}
</code></pre>

## Code block with full-width option

{% code fullWidth="true" %}

```
// Some code
```

{% endcode %}