Customization

Layouts

Live code is rendered in an Astro component. By default it uses astro-live-code/components/LiveCodeLayout.astro:

<div class="live-code-layout">
  <div class="example-container">
    <div>
      <slot name="example" />
    </div>
  </div>
  <slot name="code" />
</div>

<style>
  .live-code-layout {
    display: flex;
    flex-direction: column;
  }

  .example-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem;
    background: var(--ec-frm-edBg, var(--astro-code-color-background));
    border-style: solid;
    border-width: var(--ec-brdWd, 1px);
    border-color: var(--ec-brdCol, var(--sl-color-gray-5));
    border-bottom: none;
  }
</style>

You can customize this by creating your own Astro layout and providing it in the integration config:

export default defineConfig({
  integrations: [
    liveCode({
      layout: '/src/MyLayout.astro',
    }),
  ],
})

Layouts per code block

Layouts can be specified for a specific code block by adding a layout attribute to the code block:

```jsx layout="./path/to/Layout.astro"
```

Props

Layouts will receive the following props:

interface Props {
  // The language of the code block
  lang: string
  // The filename of the mdx file
  filename: string
  // The props being passed to the component from props={{ ... }}
  componentProps: Record<string, unknown>
}

It will also receive example and code slots, where the rendered component and code block will be passed respectively.

Wrappers

Wrappers are similar to layouts, but they are components of any language that will wrap the component being rendered. This is useful if you need to wrap the code component in something like a ThemeProvider:

import { createContext } from 'preact'
import { useContext } from 'preact/hooks'

export const ThemeContext = createContext('light')

export default function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
}

export const useTheme = () => useContext(ThemeContext)

import ThemeProvider from './ThemeProvider'

export default function MyWrapper({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>
}

export default defineConfig({
  integrations: [
    liveCode({
      wrapper: './src/MyWrapper.jsx',
    }),
  ],
})

Now code blocks will be rendered as children of MyWrapper

The theme is "dark"

import { useTheme } from './ThemeProvider'

export default () => {
  const theme = useTheme()
  return (
    <p>The theme is "{theme}"</p>
  )
}

Wrappers per code block

Like layouts, these can also be specified per code block:

```jsx wrapper="./path/to/Wrapper.jsx"
```

Props

Wrappers will receive all props that the code component receives from props={{ ... }}.