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 library function such as animateHTML() can use to process your code:

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

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

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

let html = animateHTML([{ 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 { animateHTML } from "@codemovie/code-movie";

let html = animateHTML([{ 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 { animateHTML } from "@codemovie/code-movie";
import css from "@codemovie/code-movie/languages/css";

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

import { animateHTML } from "@codemovie/code-movie";
import css from "@codemovie/code-movie/languages/css";

let html = animateHTML([{ 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 { animateHTML } 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 { animateHTML } 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 { animateHTML } from "@codemovie/code-movie";
import elixir from "@codemovie/code-movie/languages/elixir";

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

import { animateHTML } from "@codemovie/code-movie";
import elixir from "@codemovie/code-movie/languages/elixir";

let html = animateHTML([{ 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 { animateHTML } from "@codemovie/code-movie";
import html from "@codemovie/code-movie/languages/html";

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

import { animateHTML } from "@codemovie/code-movie";
import html from "@codemovie/code-movie/languages/html";

let html = animateHTML([{ 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 { animateHTML } from "@codemovie/code-movie";
import json from "@codemovie/code-movie/languages/json";

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

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

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

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

Support for Rust. No Options.

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

let html = animateHTML([{ code: 'fn main() { println!("Hello, world!"); }' }], {
  tabSize: 4,
  language: rust(),
});

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

let html = animateHTML([{ code: 'fn main() { println!("Hello, world!"); }' }], {
  tabSize: 4,
  language: rust(),
});

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

Support for plain text. No Options.

import { animateHTML } from "@codemovie/code-movie";
import plaintext from "@codemovie/code-movie/languages/plaintext";

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

import { animateHTML } from "@codemovie/code-movie";
import plaintext from "@codemovie/code-movie/languages/plaintext";

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