Languages

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

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

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:

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
});

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:

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 });

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 and let me know!

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

Support for Cascading Style Sheets. No options.

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(),
});

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 with optional support for JSX. Options:

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

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(),
  },
);

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. No options.

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(),
});

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.

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(),
});

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.

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

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

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

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

Rust: @codemovie/code-movie/languages/rust

Support for Rust. No Options.

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

let scene = fromStringsToScene(
  [{ code: 'fn main() { println!("Hello, world!"); }' }],
  {
    tabSize: 2,
    language: rust(),
  },
);

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

let scene = fromStringsToScene(
  [{ code: 'fn main() { println!("Hello, world!"); }' }],
  {
    tabSize: 2,
    language: rust(),
  },
);

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

Support for plain text. No Options.

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(),
});

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(),
});