language-support

# LiveCodes — Work with Languages LiveCodes supports 90+ languages across three editors: markup (HTML/templating), style (CSS/preprocessors), and script (JS/compiled languages). ## Setup ```javascript import { createPlayground } from 'livecodes'; // Basic language setup createPlayground('#container', { config: { markup: { language: 'markdown', content: '# Hello' }, style: { language: 'scss', content: '$color: blue; body { color: $color; }' }, script: { language: 'typescript', content: 'const x: number = 1;' }, }, }); // WASM language (Python) createPlayground('#container', { config: { script: { language: 'python-wasm', content: 'print("Hello from Python")' }, }, }); // Framework template createPlayground('#container', { template: 'react' }); ``` ## Core Patterns ### Set language for each editor ```javascript // Markup languages markup: { language: 'html', content: '...' } // HTML markup: { language: 'markdown', content: '...' } // Markdown markup: { language: 'mdx', content: '...' } // MDX markup: { language: 'pug', content: '...' } // Pug markup: { language: 'handlebars', content: '...' } // Handlebars // Style languages style: { language: 'css', content: '...' } // CSS style: { language: 'scss', content: '...' } // SCSS/Sass style: { language: 'less', content: '...' } // Less style: { language: 'stylus', content: '...' } // Stylus // Script languages script: { language: 'javascript', content: '...' } // JavaScript script: { language: 'typescript', content: '...' } // TypeScript script: { language: 'jsx', content: '...' } // JSX script: { language: 'tsx', content: '...' } // TSX ``` ### Use CSS processors ```javascript const config = { style: { language: 'css', content: '...' }, processors: [ 'tailwindcss', // Tailwind CSS 'autoprefixer', // Add vendor prefixes 'postcssPresetEnv', // Use future CSS 'cssmodules', // CSS Modules 'cssnano', // Minify ], }; // Processors run in order listed // Tailwind should come before PostCSS tools ``` ### Import styles from script ```javascript // Import CSS in script editor script: { language: 'javascript', content: ` import 'tailwindcss/utilities.css'; import './style.css'; // Gets added as a link tag `, } // Get compiled CSS from style editor import styles from './style.css'; console.log(styles); // CSS string ``` ### WASM languages (first load is slow) ```javascript // Python (Wasm) script: { language: 'python-wasm', content: 'def greet(name): return f"Hello, {name}"' } // Ruby (Wasm) script: { language: 'ruby-wasm', content: 'puts "Hello from Ruby"' } // Go (Wasm) script: { language: 'go-wasm', content: 'package main\n\nfunc main() { println("Hello") }' } ``` WASM languages download large files on first use (5-20MB). Subsequent runs use cached WASM. ### Set editor title and position ```javascript script: { language: 'python-wasm', content: 'print("Hello")', title: 'Python', // Override displayed title hideTitle: false, // Hide editor title order: 0, // Editor order (0, 1, 2) } // Use hidden content for helper functions script: { language: 'javascript', content: 'export function main() { return helper(); }', hiddenContent: 'function helper() { return 42; }', // Hidden but evaluated } ``` ## Common Mistakes ### MEDIUM CSS processors in wrong order Wrong: ```javascript // PurgeCSS runs before Tailwind generates classes processors: ['purgecss', 'tailwindcss', 'autoprefixer']; ``` Correct: ```javascript // Correct order: Tailwind generates → PostCSS processes → PurgeCSS removes unused processors: ['tailwindcss', 'autoprefixer', 'purgecss']; ``` Processors run in the order listed. Tailwind must generate classes before other processors. In the app UI, processors are ordered automatically. Source: docs/docs/features/css.mdx — CSS Processors section ### MEDIUM WASM language first load appears slow Wrong assumption: ```javascript // Expecting instant execution for Python script: { language: 'python-wasm', content: 'print("Hello")' } // First run downloads ~15MB WASM file ``` Understanding: ```javascript // WASM languages need initial download // - Python (Pyodide): ~15MB // - Ruby: ~10MB // - Go: ~8MB // Subsequent runs use cached WASM // Consider showing loading indicator on first run ``` Source: docs/docs/languages/python-wasm.mdx ## Language Categories | Editor | Categories | Examples | | ------ | ----------------------------------- | --------------------------------------------------------- | | Markup | HTML, Markdown, Templates, Diagrams | `html`, `markdown`, `pug`, `handlebars`, `mdx`, `astro` | | Style | CSS, Preprocessors, PostCSS | `css`, `scss`, `less`, `stylus`, `postcss` | | Script | JS, TypeScript, Compiled, WASM | `javascript`, `typescript`, `python`, `ruby`, `go`, `php` | ## Processor Reference See [Full Language Reference](references/languages.md) for all 90+ languages, aliases, and extensions. | Processor | Purpose | | ------------------ | ----------------------------------- | | `tailwindcss` | Utility-first CSS framework | | `windicss` | Windi CSS (alternative to Tailwind) | | `unocss` | Atomic CSS engine | | `autoprefixer` | Add vendor prefixes | | `postcssPresetEnv` | Use future CSS features | | `cssmodules` | Scoped CSS classes | | `cssnano` | Minify CSS | | `lightningcss` | Fast CSS processing | | `tokencss` | Design tokens |