# Languages

To use a language, import the matching language function from its module:

```javascript
import json from "@codemovie/code-movie/languages/json";
```

Every language module exports a function as its sole default export. Calling the
function yields a language object that input function such as
`fromStringsToScene()` can use to process your code:

```javascript
import json from "@codemovie/code-movie/languages/json";

const language = json(); // Calling the language function

import { fromStringsToScene } from "@codemovie/code-movie";

let scene = fromStringsToScene([{ code: "[42]" }], {
  tabSize: 2,
  language, // using the language function's return value
});
```

Some language functions take configuration objects that allow you to fine-tune
specific language features:

```javascript
import ecmascript from "@codemovie/code-movie/languages/ecmascript";

let regularJavaScript = ecmascript();
let typeScript = ecmascript({ ts: true });
let javaScriptWithJSX = ecmascript({ jsx: true });
let typeScriptWithJSX = ecmascript({ ts: true, jsx: true });
```

Once you have configured a language by calling its function, you can re-use the
resulting object over and over.

A list of supported languages and their configuration options follows. If you
would like to see other languages supported, [head over to the CodeMovie meta repository on Github](https://github.com/CodeMovie/meta) and let me know!

## CSS: `@codemovie/code-movie/languages/css`

Support for **Cascading Style Sheets**. No options.

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import css from "@codemovie/code-movie/languages/css";

let scene = fromStringsToScene([{ code: "body { color: red }" }], {
  tabSize: 2,
  language: css(),
});
```

## ECMAScript: `@codemovie/code-movie/languages/ecmascript`

Support for **JavaScript** and [**TypeScript**](https://www.typescriptlang.org/)
with optional support for **JSX**. Options:

- `jsx` (boolean, defaults to `false`): Support für JSX
- `ts` (boolean, defaults to `false`): Support für TypeScript

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import ecmascript from "@codemovie/code-movie/languages/ecmascript";

let regularJavaScript = ecmascript();
let tsWithJSX = ecmascript({ ts: true, jsx: true });

let sceneForJS = fromStringsToScene([{ code: "let x = 42;" }], {
  tabSize: 2,
  language: regularJavaScript(),
});

let sceneForTSX = fromStringsToScene(
  [{ code: "let x: JSX.Element = <b />;" }],
  {
    tabSize: 2,
    language: tsWithJSX(),
  },
);
```

## Elixir: `@codemovie/code-movie/languages/elixir`

Support for [**Elixir**](https://elixir-lang.org/). No options.

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import elixir from "@codemovie/code-movie/languages/elixir";

let scene = fromStringsToScene([{ code: "add = fn a, b -> a + b end" }], {
  tabSize: 2,
  language: elixir(),
});
```

## HTML: `@codemovie/code-movie/languages/html`

Support for **HTML**. Has built-in handling of JavaScript inside `<script>`
elements, CSS inside `<style>` elements, and JSON inside
`<script type="importmap">` elements. No options.

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import html from "@codemovie/code-movie/languages/html";

let scene = fromStringsToScene([{ code: "<script>alert(1)</script>" }], {
  tabSize: 2,
  language: html(),
});
```

## JSON: `@codemovie/code-movie/languages/json`

Support for **JSON** according to RFC-8259. No options.

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

let scene = fromStringsToScene([{ code: "[42]" }], {
  tabSize: 2,
  language: json(),
});
```

## Plain text: `@codemovie/code-movie/languages/plaintext`

Support for **plain text**. No Options.

```javascript
import { fromStringsToScene } from "@codemovie/code-movie";
import plaintext from "@codemovie/code-movie/languages/plaintext";

let scene = fromStringsToScene([{ code: "This is just plain text!" }], {
  tabSize: 2,
  language: plaintext(),
});
```
