# Code snippet

```js
<SilkeBox column gap>
  <SilkeCodeSnippet code={`console.log('hello world');`} language="javascript" />

  <SilkeCodeSnippet code={`console.log('how to copy this?');`} language="javascript" />

  <SilkeCodeSnippet
    code={`There is no point in showing line numbers for a single-line example`}
    language="markdown"
    lineNumbers
  />
</SilkeBox>
```

## Much advanced

```js
<SilkeCodeSnippet
  code={[
    '{/* This is the code for the above example */}',
    '<SilkeCodeSnippet',
    "  code={`console.log('hello world');`}",
    '  language="javascript"',
    '/>',
  ].join('\n')}
  language="tsx"
  lineNumbers
/>
```

## With extra buttons

```jsx
() => {
  const [code, setCode] = React.useState(
    '// TODO make SilkeCodeSnippet editable so it can be used in docs',
  );

  return (
    <SilkeCodeSnippet
      buttons={
        <>
          <SilkeButton label="update" onClick={() => setCode('time: ' + Date.now())} />
          <SilkeButton
            label="random"
            onClick={() => setCode('key: ' + Math.floor(Math.random() * 100000000000))}
          />
        </>
      }
      code={code}
    />
  );
};
```