carbon-components-svelte/docs/src/pages/components/CodeSnippet.svx

<script>
  import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";

  let code = `// helpers.js
  
export function multiply(a: number, b: number) {
  return a * b;
}

export function divide(a: number, b: number) {
  return a / b;
}

export function add(a: number, b: number) {
  return a + b;
}

export function subtract(a: number, b: number) {
  return a - b;
}`;

let comment = `
> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.

> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
`
</script>

<InlineNotification svx-ignore lowContrast title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />

### Default (single-line)

<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>

### Inline

<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>

### Multi-line

<CodeSnippet type="multi" {code} />

### Hidden copy button

<CodeSnippet type="multi" {code} hideCopyButton />

### Wrap text

Note that `wrapText` only applies to the `"multi"` type.

<CodeSnippet wrapText type="multi" code="{comment}" />

### Skeleton

<CodeSnippet skeleton />