import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
import * as CodeSnippetStories from './code-snippet.stories';

<Meta of={CodeSnippetStories} />

# Code snippet

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components/src/components/code-snippet)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/code-snippet/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/code-snippet/accessibility)

## Table of Contents

- [Overview](#overview)
- [Inline](#inline)
- [Multi-line](#multi-line)
- [Single-line](#single-line)
- [Skeleton state](#skeleton-state)
- [Component API](#component-api)
- [CDN](#cdn)
- [Feedback](#feedback)

## Overview

Code snippets are strings or small blocks of reusable code that are copyable.

<Canvas of={CodeSnippetStories.Inline} />

## Inline

Inline code snippets are used for distinguishing a symbol, variable, function
name or similar small piece of code from its surrounding text.

<Canvas of={CodeSnippetStories.Inline} />

## Multi-line

Multiple line code snippets are used for displaying code with more than one
line. They're shown in a block and useful for showing classes, functions, blocks
of styles and the like. There is an option to wrap the lines displayed if the
lines are longer than the container.

<Canvas of={CodeSnippetStories.Multiline} />

## Single-line

Single line code snippets are used when showing code that fits on one line
without wrapping. Useful for calling out terminal commands, function
invocations, expressions etc.

<Canvas of={CodeSnippetStories.Singleline} />

## Skeleton state

You can use the `cds-code-snippet-skeleton` component to render a skeleton
variant of an code snippet. This is useful to display while content in your code
snippet is being fetched from an external resource like an API.

<Canvas of={CodeSnippetStories.Skeleton} />

## Component API

<ArgTypes of="cds-code-snippet" />

<Markdown>{`${cdnJs({ components: ['code-snippet'] })}`}</Markdown>

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/code-snippet/code-snippet.mdx)
