Code Block

Syntax-highlighted source the reader will scan or paste. Pair with Snippet for a one-line command.

Default

Pass filename and language so the header and highlighter have something to work with.

format-bytes.ts


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock filename="format-bytes.ts" language="ts">
        

          2
          
          export function formatBytes(bytes: number) {
        

          3
          
            // ...
        

          4
          
          }
        

          5
          
          </CodeBlock>

No filename

Omit the header when the snippet is ephemeral. Copy sits on the block instead.


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock language="ts" aria-label="formatBytes helper">
        

          2
          
          export function formatBytes(bytes: number) {
        

          3
          
            // ...
        

          4
          
          }
        

          5
          
          </CodeBlock>

Highlighted lines

Mark only the lines under discussion. Highlighting every line is the same as highlighting none.

TokenRow.tsx


        
          1
          
          function TokenRow(props: { name: string }) {
        

          2
          
            return (
        

          3
          
              <div>
        

          4
          
                <h1>{props.name}</h1>
        

          5
          
                <p>Created just now. Copy the value once.</p>
        

          6
          
              </div>
        

          7
          
            )
        

          8
          
          }


        
          1
          
          <CodeBlock
        

          2
          
            filename="TokenRow.tsx"
        

          3
          
            language="ts"
        

          4
          
            :highlighted-lines-numbers="[1, 4]"
        

          5
          
          >
        

          6
          
            …
        

          7
          
          </CodeBlock>

Added and removed

Use addedLinesNumbers and removedLinesNumbers. Do not fake a diff with comments — those copy with the snippet.

nuxt.config.ts


        
          1
          
          export default defineNuxtConfig({
        

          2
          −
            experimental: {
        

          3
          −
              payloadExtraction: true,
        

          4
          −
            },
        

          5
          +
            payloadExtraction: true,
        

          6
          
          })


        
          1
          
          <CodeBlock
        

          2
          
            filename="nuxt.config.ts"
        

          3
          
            language="ts"
        

          4
          
            :removed-lines-numbers="[2, 3, 4]"
        

          5
          
            :added-lines-numbers="[5]"
        

          6
          
          >
        

          7
          
            …
        

          8
          
          </CodeBlock>

Referenced lines

Click a line number to pin that row and write #L{n} into the URL.


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock language="ts" aria-label="formatBytes helper">
        

          2
          
          export function formatBytes(bytes: number) {
        

          3
          
            // ...
        

          4
          
          }
        

          5
          
          </CodeBlock>

Language switcher

switcher renders a dropdown in the header. Keep options in sync with the slot text.

format-bytes.ts


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock
        

          2
          
            :filename="current.filename"
        

          3
          
            :language="current.language"
        

          4
          
            :switcher="{ options, value, onChange }"
        

          5
          
          >
        

          6
          
            {{ current.code }}
        

          7
          
          </CodeBlock>

Tabs

tabs replaces the dropdown with a segmented control. Do not pass both unless you want tabs to win.

format-bytes.ts


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock
        

          2
          
            :filename="current.filename"
        

          3
          
            :language="current.language"
        

          4
          
            :tabs="{ options, value, onChange }"
        

          5
          
          >
        

          6
          
            {{ current.code }}
        

          7
          
          </CodeBlock>

Hidden line numbers

format-bytes.ts


        
          
          
          export function formatBytes(bytes: number) {
        

          
          
            if (bytes === 0) return '0 B'
        

          
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          
          
            let value = bytes
        

          
          
            let index = 0
        

          
          
            while (value >= 1024 && index < units.length - 1) {
        

          
          
              value /= 1024
        

          
          
              index += 1
        

          
          
            }
        

          
          
            return value.toFixed(1) + ' ' + units[index]
        

          
          
          }


        
          1
          
          <CodeBlock
        

          2
          
            filename="format-bytes.ts"
        

          3
          
            language="ts"
        

          4
          
            hide-line-numbers
        

          5
          
          >
        

          6
          
            …
        

          7
          
          </CodeBlock>

Open in v0

v0 adds a toolbar action. ask opens the snippet as a question. build prefixes the prompt with Build this.

format-bytes.ts


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }

format-bytes.ts


        
          1
          
          export function formatBytes(bytes: number) {
        

          2
          
            if (bytes === 0) return '0 B'
        

          3
          
            const units = ['B', 'KB', 'MB', 'GB']
        

          4
          
            let value = bytes
        

          5
          
            let index = 0
        

          6
          
            while (value >= 1024 && index < units.length - 1) {
        

          7
          
              value /= 1024
        

          8
          
              index += 1
        

          9
          
            }
        

          10
          
            return value.toFixed(1) + ' ' + units[index]
        

          11
          
          }


        
          1
          
          <CodeBlock filename="format-bytes.ts" language="ts" v0="ask">
        

          2
          
            …
        

          3
          
          </CodeBlock>
        

          4
          
          <CodeBlock filename="format-bytes.ts" language="ts" v0="build">
        

          5
          
            …
        

          6
          
          </CodeBlock>

Best practices

Use Code Block for multi-line source. One token (path, flag, env name) stays inline. A copyable shell command is Snippet.
Always set language (or the syntax alias). This highlighter understands ts, js, tsx, next, lua, bash, and json.
Show filename when the reader has a paste destination. Drop it for throwaway examples.
Highlight the few lines you are talking about. Added and removed rows belong on the dedicated number props, not in comments.
Keep snippets runnable. Do not wrap shell in $ — that is Snippet's job.
Put the source in the default slot as text. The block reads slot text for copy and highlighting; do not nest interactive nodes inside it.