`codeSnippet`

Code snippets are small sections of code you can include in your Markdown and OpenAPI documents. In Markdown code snippets are formatted by wrapping the text in two sets of three backticks, placed at the start and end of the text block.

For example, the following is a code snippet with yaml:

codeSnippet with YAML

```yaml
codeSnippet:
  copy:
    hide: true
```

Markdown code snippets include a report and copy icon in the top right corner.

In OpenAPI reference documentation, code snippets are generated based on the information in the description. The following is an example of a request and response code snippet in OpenAPI reference documentation:

Screenshot of a request and response in OpenAPI reference documentation

OpenAPI reference documentation code snippets include report, copy, and expand and collapse icons in the top right corner.

You can configure the codeSnippet element to hide the copy, expand, and collapse buttons. You can also configure the report element's tooltip and dialog label text.

The codeSnippet option also supports page-level configuration using front matter.

Options

Option	Type	Description
elementFormat	string	A value that specifies the style for the control icons. Possible values: `icon`, `text`. Default: `icon`
copy	Copy	An object with the list of specific settings for a code snippet's copy button.
report	Report	An object with the list of specific settings for a code snippet's report button.
expand	Expand	An object with the list of specific settings for a code snippet's expand button.
collapse	Collapse	An object with the list of specific settings for a code snippet's collapse button.

Copy object

Users can use copy button to put code snippet raw content into the clipboard.

Option	Type	Description
hide	boolean	Specifies if the copy button should be hidden. Default value: `false`.

Report object

Users can use the report button to send problem feedback about the code snippet's content. When users click the report button or text, they are provided a comment feedback form.

Option	Type	Description
hide	boolean	Specifies if the report button should be hidden. Default value: `true`.
label	string	Label inside the report dialog form. Default value: `What is wrong with the code?`.
tooltipText	string	Text of the tooltip of the report button. Default value: `Report a problem`.

Expand object

Users can use the expand button to show all the nested properties inside a JSON object that is included as a sample request or response in an OpenAPI definition.

Option	Type	Description
hide	boolean	Specifies if the expand button should be hidden. Default value: `false`.

Collapse object

Users can use collapse button to hide all the nested properties inside a JSON object that is included as a sample request or response in an OpenAPI definition.

Option	Type	Description
hide	boolean	Specifies if the collapse button should be hidden. Default value: `false`.

Examples

Copy button

The following is an example configuration for hiding the copy button:

codeSnippet:
  copy:
    hide: true

Report button

The following is an example configuration for enabling the report button with specific settings:

codeSnippet:
  report:
    label: Report wrong code
    tooltipText: Click to open the report dialog

Expand and collapse buttons

The following is an example configuration for hiding the expand and collapse buttons on JSON objects that are included as a sample requests or responses in OpenAPI definitions:

codeSnippet:
  expand:
    hide: true
  collapse:
    hide: true

Redocly also has a codeSnippet Markdoc tag that can be used to display code snippets loaded from local files.
To configure the feedback mechanism that appears on all pages in your project by default, see the [feedback] reference documentation.

Resources

Follow step-by-step instructions for configuring code snippets in the Configure code snippets how-to documentation.
Learn more about the report feedback mechanism that is included in all code snippets by default, see the Feedback concept documentation.
Use front matter to configure code snippets on individual pages.

codeSnippet