# Code editor

## Javascript

```js
<SilkeCodeEditor
  language="javascript"
  code={`function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);`}
/>
```

## CSS

```js
<SilkeCodeEditor
  language="css"
  code={`.main {
  position: relative;
  flex-direction: column;

  background: var(--color-neutral-0);

  pre {
    width: 100%;
    margin: 0;
    padding: $space-s;
    word-break: break-word;
  }

  &:hover {
    .buttons {
      opacity: 1;
    }
  }
}

.buttons {
  position: absolute;
  bottom: $space-s;
  right: $space-s;
  opacity: 0.5;
  align-items: flex-end;
}`}
/>
```

## JSON

```js
<SilkeCodeEditor
  language="json"
  code={`[{
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  },
  {
    "userId": 1,
    "id": 5,
    "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
    "completed": false
  }]`}
/>
```