The Language type represents all supported language names, aliases, and file extensions in LiveCodes.
Language Type
Language name, alias or extension.
type Language =
// Markup Languages
| 'html' | 'htm'
| 'markdown' | 'md' | 'mdown' | 'mkdn'
| 'mdx'
| 'astro'
| 'pug' | 'jade'
| 'haml'
| 'asciidoc' | 'adoc' | 'asc'
// Template Languages
| 'mustache'
| 'handlebars' | 'hbs'
| 'ejs'
| 'eta'
| 'nunjucks' | 'njk'
| 'liquid' | 'liquidjs'
| 'dot'
| 'twig'
| 'vento' | 'vto'
| 'art-template' | 'art'
| 'jinja'
| 'bbcode' | 'bb'
| 'mjml'
// Diagrams & Rich Text
| 'diagrams' | 'diagram' | 'graph' | 'plt'
| 'richtext' | 'rte' | 'rich' | 'rte.html'
// Style Languages
| 'css'
| 'scss'
| 'sass'
| 'less'
| 'stylus' | 'styl'
| 'stylis'
| 'postcss'
// JavaScript & Variants
| 'javascript' | 'js' | 'mjs'
| 'json'
| 'babel' | 'es'
| 'sucrase'
| 'typescript' | 'ts' | 'mts'
| 'flow'
// JSX/TSX
| 'jsx'
| 'tsx'
| 'react' | 'react-jsx' | 'react.jsx'
| 'react-tsx' | 'react.tsx'
| 'react-native' | 'react-native.jsx'
| 'react-native-tsx' | 'react-native.tsx'
// Frameworks
| 'vue' | 'vue3' | 'vue2'
| 'vue-app' | 'app.vue'
| 'svelte'
| 'svelte-app' | 'app.svelte'
| 'stencil' | 'stencil.tsx'
| 'solid' | 'solid.jsx' | 'solid.tsx'
| 'riot' | 'riotjs'
| 'malina' | 'malinajs'
| 'ripple' | 'ripplejs'
| 'xht'
// Compile-to-JS Languages
| 'coffeescript' | 'coffee'
| 'livescript' | 'ls'
| 'civet'
| 'clio'
| 'imba'
| 'assemblyscript' | 'as'
// Python
| 'python' | 'py' | 'py3'
| 'pyodide'
| 'python-wasm' | 'py-wasm' | 'pythonwasm' | 'pywasm' | 'wasm.py'
// Other Languages
| 'r' | 'rlang' | 'rstats' | 'r-wasm'
| 'ruby' | 'rb' | 'ruby-wasm' | 'wasm.rb' | 'rubywasm'
| 'go' | 'golang' | 'go-wasm' | 'wasm.go' | 'gowasm'
| 'php' | 'php-wasm' | 'phpwasm' | 'wasm.php'
| 'cpp' | 'c' | 'C' | 'cp' | 'cxx' | 'c++' | 'cppm' | 'ixx' | 'ii' | 'hpp' | 'h'
| 'cpp-wasm' | 'cppwasm' | 'cwasm' | 'wasm.cpp' | 'clang' | 'clang.cpp'
| 'java'
| 'csharp' | 'csharp-wasm' | 'cs' | 'cs-wasm' | 'wasm.cs'
| 'perl' | 'pl' | 'pm'
| 'lua' | 'lua-wasm' | 'luawasm' | 'wasm.lua'
| 'teal' | 'tl'
| 'fennel' | 'fnl'
| 'julia' | 'jl'
| 'scheme' | 'scm'
| 'commonlisp' | 'common-lisp' | 'lisp'
| 'clojurescript' | 'clojure' | 'cljs' | 'clj' | 'cljc' | 'edn'
| 'gleam'
| 'swift'
| 'rescript' | 'res' | 'resi'
| 'reason' | 're' | 'rei'
| 'ocaml' | 'ml' | 'mli'
| 'tcl'
| 'wat' | 'wast' | 'webassembly' | 'wasm' | 'Binary'
// Database & Query Languages
| 'sql' | 'sqlite' | 'sqlite3'
| 'pg.sql' | 'pgsql.sql' | 'pgsql' | 'pg' | 'pglite' | 'pglite.sql'
| 'postgresql' | 'postgres' | 'postgre.sql' | 'postgresql.sql'
| 'prolog.pl' | 'prolog'
| 'minizinc' | 'mzn' | 'dzn'
// Visual Programming
| 'blockly' | 'blockly.xml'
| 'xml'
| 'pintora';
Language Specifications
Each language in LiveCodes has detailed specifications defining how it should be handled.
interface LanguageSpecs {
name: Language;
title: string;
longTitle?: string;
info?: boolean;
formatter?: LanguageFormatter;
compiler: Compiler | Language;
extensions: Language[];
editor: EditorId;
editorLanguage?: Language;
editorSupport?: LanguageEditorSupport;
preset?: CssPresetId;
largeDownload?: boolean;
}
The canonical language name.
The display title for the language.
A longer, more descriptive title.
Whether the language has additional info/documentation.
The code formatter configuration for this language.
compiler
Compiler | Language
required
The compiler used to process this language, or another language it compiles to.
All file extensions and aliases for this language.
editor
'markup' | 'style' | 'script'
required
Which editor pane this language belongs to.
The language used for syntax highlighting in the editor (if different from name).
Editor-specific configuration for Monaco, CodeMirror, and CodeJar.
CSS preset to automatically include with this language.
Whether this language requires a large download (e.g., WASM-based languages).
Editor Support
Languages can have specific configurations for different code editors:
type LanguageEditorSupport = {
monaco?: {
language?: Language;
languageSupport?: string | ((monaco: any) => void | Promise<void>);
};
codemirror?: {
language?: Language;
languageSupport?: string | (() => void | Promise<void>);
};
codejar?: {
language?: Language;
};
} & {
compilerOptions?: Record<string, unknown>;
};
Processor Type
CSS processors that can be applied:
type Processor =
| 'postcss'
| 'postcssImportUrl'
| 'tailwindcss'
| 'windicss'
| 'unocss'
| 'tokencss'
| 'lightningcss'
| 'autoprefixer'
| 'postcssPresetEnv'
| 'cssmodules'
| 'purgecss'
| 'cssnano';
Usage Examples
Setting Editor Language
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
markup: {
language: "markdown",
content: "# Hello World",
},
style: {
language: "scss",
content: "$color: blue;\nh1 { color: $color; }",
},
script: {
language: "typescript",
content: 'const greeting: string = "Hello";',
},
},
});
Using Aliases
// These are all equivalent
{ language: "javascript" }
{ language: "js" }
{ language: "mjs" }
// These are all equivalent
{ language: "typescript" }
{ language: "ts" }
{ language: "mts" }
// These are all equivalent
{ language: "python" }
{ language: "py" }
{ language: "py3" }
Enabling Specific Languages
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
languages: ["html", "css", "javascript", "typescript", "jsx", "tsx"],
},
});
Using Processors
import { createPlayground } from "livecodes";
createPlayground("#container", {
config: {
processors: ["tailwindcss", "autoprefixer"],
style: {
language: "css",
content: "@tailwind base; @tailwind components;",
},
},
});
Language Categories
Markup Languages
HTML, Markdown, MDX, Pug, Haml, AsciiDoc, and more.
Template Languages
Mustache, Handlebars, EJS, Nunjucks, Liquid, Twig, and more.
Style Languages
CSS, SCSS, Sass, Less, Stylus, PostCSS.
JavaScript & TypeScript
JavaScript, TypeScript, JSX, TSX, Flow, and various dialects.
Frameworks
React, Vue, Svelte, Solid, Stencil, and more.
Compile-to-JS Languages
CoffeeScript, LiveScript, Civet, Imba, AssemblyScript.
System Languages (WASM)
Python, Ruby, Go, PHP, C++, Java, C#, Lua, Perl, and more.
Functional Languages
Scheme, Common Lisp, ClojureScript, OCaml, ReScript, Reason, Gleam.
Database Languages
SQL, SQLite, PostgreSQL, Prolog.
Visual Programming
Blockly.