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. A cookie is set with the key of the name passed in to the <DynamicCodeBlockInput> with the value the user types into the input. On load, if the user has previously entered anything into the input with the associated key (name) then that value will be loaded and displayed. This will persist across all pages.

Components

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

:choco-warning: WARNING

Do not include any special characters or symbols in the name attribute on <DynamicCodeBlockInput />.

• <DynamicCodeBlock /> - Wraps a block of code where placeholder values (e.g., codeBlockReplace1) are dynamically replaced with input field values on the page. The Dynamic Code Block component requires a language to style and highlight the code syntax appropriately. Only the following options are available to be set as the language:
  • markup
  • css
  • clike
  • javascript
  • bash
  • csharp
  • diff
  • json
  • powershell
  • puppet
  • python
  • ruby
  • scss
  • shell-session
  • xml-doc
  • yaml

:choco-info: NOTE

Wrap the code within <DynamicCodeBlock /> with {` `} to preserve white space.

Examples

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

<DynamicCodeBlockInput name="codeBlockReplace" defaultValue="DEFAULT VALUE 1" label="Your download string" />

<DynamicCodeBlock language="powershell">
{`
  Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('codeBlockReplace'))
`}
</DynamicCodeBlock>


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

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

<DynamicCodeBlock language="yaml">
{`
  - name: Ensure Chocolatey installed from codeBlockReplace2
    win_chocolatey:
      name: chocolatey
      state: present
      source: codeBlockReplace3/repo/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 language="puppet">
{`
  ## Note: chocolatey_download_url is completely different than normal
  ## source locations. This is directly to the bare download url for the
  ## chocolatey.nupkg, similar to what you see when you browse to
  ## https://community.chocolatey.org/api/v2/package/chocolatey
  class {'codeBlockReplace4':
    chocolatey_download_url     => 'http://codeBlockReplace5/odata/repo/check_this/chocolatey.VERSION.nupkg',
    use_7zip                    => codeBlockReplace6,
  }
`}
</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.
• A cookie is set with the value of the corresponding input field that will be displayed on load.
• The language attribute on the <DynamicCodeBlock /> will allow the appropriate styling and syntax highlighting to be displayed for that language.

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