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:
Layouts per code block
Layouts can be specified for a specific code block by adding a layout
attribute to the code block:
Props
Layouts will receive the following props:
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
:
Now code blocks will be rendered as children of MyWrapper
The theme is "dark"
Wrappers per code block
Like layouts, these can also be specified per code block:
Props
Wrappers will receive all props that the code component receives from props={{ ... }}
.