Displays a code block with variables that can be replaced with values from inputs.

:choco-info: Astro Only Documentation Below

The documentation below covers how to use the <DynamicCodeBlock /> Astro Component from choco-astro.

Overview

The <DynamicCodeBlock/> will display the code containing variables in a code block with a copy button. The value entered into the inputs <DynamicCodeBlockInput /> will replace the variables within the code block.

Components

• <DynamicCodeBlockInput /> - Renders an input field users can type into. Each input is assigned a name and a defaultValue. These input values are used to replace placeholders in <DynamicCodeBlock />.

• <DynamicCodeBlock /> - Wraps a block of code where placeholder values (e.g., codeBlockReplace1) are dynamically replaced with input field values on the page.

Examples

import DynamicCodeBlockInput from '@choco-astro/components/dynamicCodeBlock/DynamicCodeBlockInput.astro';
import DynamicCodeBlock from '@choco-astro/components/dynamicCodeBlock/DynamicCodeBlock.astro';

<DynamicCodeBlockInput name="codeBlockReplace1" defaultValue="DEFAULT VALUE 1" />

<DynamicCodeBlock>
    name: Ensure Chocolatey installed from codeBlockReplace1
    win_chocolatey:
        name: chocolatey
        state: present
        source: /ChocolateyInstall.ps1
</DynamicCodeBlock>


<DynamicCodeBlockInput name="codeBlockReplace2" defaultValue="DEFAULT VALUE 2" />

<DynamicCodeBlockInput name="codeBlockReplace3" defaultValue="DEFAULT VALUE 3" />

<DynamicCodeBlock>
    name: Ensure Chocolatey installed from codeBlockReplace2
    win_chocolatey:
        name: chocolatey
        state: present
        source: codeBlockReplace3/ChocolateyInstall.ps1
</DynamicCodeBlock>


<DynamicCodeBlockInput name="codeBlockReplace4" defaultValue="DEFAULT VALUE 4" />

<DynamicCodeBlockInput name="codeBlockReplace5" defaultValue="DEFAULT VALUE 5" />

<DynamicCodeBlockInput name="codeBlockReplace6" defaultValue="DEFAULT VALUE 6" />

<DynamicCodeBlock>
    name: Ensure Chocolatey installed from codeBlockReplace1
    win_chocolatey:
        name: codeBlockReplace4
        state: present codeBlockReplace5
        source: codeBlockReplace6/ChocolateyInstall.ps1
</DynamicCodeBlock>

In the example above:

• An input is rendered for codeBlockReplace1.
• Inside the <DynamicCodeBlock>, any instance of codeBlockReplace1 on the page will be replaced by the current value of the corresponding input field.

You can define and use multiple inputs and reference them inside the code block using the same name string.