CodeBlock

import { CodeBlock } from 'charcell/react';

export function CodeBlockExample() {
  return (
    <CodeBlock
      code={
        "; the kickstand lot\nobject dumpster in room 'behind the kickstand'\nverb eyes: say-line ben woken-up-in-worse\nverb foot: start-script kick-the-dumpster\nverb mouth: say-line ben default-refusal  ; \"i'm not putting my lips on that.\""
      }
      label="the kickstand lot"
    />
  );
}

<script setup lang="ts">
import { CodeBlock } from 'charcell/vue';
</script>

<template>
  <CodeBlock
    :code="'; the kickstand lot\nobject dumpster in room \'behind the kickstand\'\nverb eyes: say-line ben woken-up-in-worse\nverb foot: start-script kick-the-dumpster\nverb mouth: say-line ben default-refusal  ; &quot;i\'m not putting my lips on that.&quot;'"
    label="the kickstand lot"
  />
</template>

<script lang="ts">
  import { CodeBlock } from 'charcell/svelte';
</script>

<CodeBlock
  code={"; the kickstand lot\nobject dumpster in room 'behind the kickstand'\nverb eyes: say-line ben woken-up-in-worse\nverb foot: start-script kick-the-dumpster\nverb mouth: say-line ben default-refusal  ; \"i'm not putting my lips on that.\""}
  label="the kickstand lot"
/>

<!-- component: ScrollAreaDriver (behavior not included) -->
<div
  class="CharcellScrollArea CharcellScrollArea--stepped CharcellScrollArea--horizontal CharcellScrollArea--overscroll-none"
>
  <div
    class="CharcellScrollArea__viewport"
    tabindex="0"
    role="region"
    aria-label="the kickstand lot"
  >
    <div class="CharcellScrollArea__clip">
      <div class="CharcellScrollArea__rows">
        <div class="CharcellScrollArea__columns">
          <pre
            class="CharcellCodeBlock"
          ><code class="CharcellCodeBlock__code">; the kickstand lot
object dumpster in room 'behind the kickstand'
verb eyes: say-line ben woken-up-in-worse
verb foot: start-script kick-the-dumpster
verb mouth: say-line ben default-refusal  ; "i'm not putting my lips on that."</code></pre>
        </div>
      </div>
    </div>
  </div>
  <div class="CharcellScrollArea__vertical-bar" aria-hidden="true">
    <div class="CharcellScrollArea__step">▴</div>
    <div class="CharcellScrollArea__vertical-track">
      <div class="CharcellScrollArea__vertical-thumb"></div>
    </div>
    <div class="CharcellScrollArea__step">▾</div>
  </div>
  <div
    class="CharcellScrollArea__horizontal-bar CharcellScrollArea__horizontal-bar--fitting"
    aria-hidden="true"
  >
    <div class="CharcellScrollArea__step"></div>
    <div class="CharcellScrollArea__horizontal-track">
      <div class="CharcellScrollArea__horizontal-thumb"></div>
    </div>
    <div class="CharcellScrollArea__step"></div>
  </div>
</div>
<!-- /component -->

import { CodeBlock } from 'charcell/react';

export function CodeBlockExample() {
  return (
    <CodeBlock
      code={
        '; the junk yard\nverb take forks: start-script little-todd-gives-chase\nverb pull lever: start-script lower-the-saucer\nverb push button: start-script magnetize-the-saucer\nverb use meat car: walk-actor little-todd to car  ; "here, poochy-pooch, pooch!"'
      }
      label="the junk yard"
      wrap
    />
  );
}

<script setup lang="ts">
import { CodeBlock } from 'charcell/vue';
</script>

<template>
  <CodeBlock
    :code="'; the junk yard\nverb take forks: start-script little-todd-gives-chase\nverb pull lever: start-script lower-the-saucer\nverb push button: start-script magnetize-the-saucer\nverb use meat car: walk-actor little-todd to car  ; &quot;here, poochy-pooch, pooch!&quot;'"
    label="the junk yard"
    wrap
  />
</template>

<script lang="ts">
  import { CodeBlock } from 'charcell/svelte';
</script>

<CodeBlock
  code={'; the junk yard\nverb take forks: start-script little-todd-gives-chase\nverb pull lever: start-script lower-the-saucer\nverb push button: start-script magnetize-the-saucer\nverb use meat car: walk-actor little-todd to car  ; "here, poochy-pooch, pooch!"'}
  label="the junk yard"
  wrap
/>

<!-- component: ScrollAreaDriver (behavior not included) -->
<div
  class="CharcellScrollArea CharcellScrollArea--stepped CharcellScrollArea--overscroll-none"
>
  <div
    class="CharcellScrollArea__viewport"
    tabindex="0"
    role="region"
    aria-label="the junk yard"
  >
    <div class="CharcellScrollArea__clip">
      <div class="CharcellScrollArea__rows">
        <div class="CharcellScrollArea__columns">
          <pre
            class="CharcellCodeBlock CharcellCodeBlock--wrap"
          ><code class="CharcellCodeBlock__code">; the junk yard
verb take forks: start-script little-todd-gives-chase
verb pull lever: start-script lower-the-saucer
verb push button: start-script magnetize-the-saucer
verb use meat car: walk-actor little-todd to car  ; "here, poochy-pooch, pooch!"</code></pre>
        </div>
      </div>
    </div>
  </div>
  <div class="CharcellScrollArea__vertical-bar" aria-hidden="true">
    <div class="CharcellScrollArea__step">▴</div>
    <div class="CharcellScrollArea__vertical-track">
      <div class="CharcellScrollArea__vertical-thumb"></div>
    </div>
    <div class="CharcellScrollArea__step">▾</div>
  </div>
  <div
    class="CharcellScrollArea__horizontal-bar CharcellScrollArea__horizontal-bar--fitting"
    aria-hidden="true"
  >
    <div class="CharcellScrollArea__step"></div>
    <div class="CharcellScrollArea__horizontal-track">
      <div class="CharcellScrollArea__horizontal-thumb"></div>
    </div>
    <div class="CharcellScrollArea__step"></div>
  </div>
</div>
<!-- /component -->