notebook-mdx
Examples

Multi-Language Notebook Demo

Multi-Language Notebook Demo

This demonstrates real-world cell-level language detection using VSCode metadata format.

How Cell-Level Languages Work

This notebook demonstrates the following language detection features:

1. VSCode Metadata Format

Individual cells can specify their language using VSCode's metadata format:

"metadata": {
  "vscode": {
    "languageId": "javascript"
  }
}

2. Language Indicators

Each cell shows its detected language in the bottom-right corner:

  • Raw cells: Always show raw (regardless of VSCode metadata)
  • JavaScript cells: Show javascript (from VSCode metadata)
  • SQL cells: Show sql (from VSCode metadata)
  • Python cells: Show python (notebook kernel default)

3. Priority Order

The language detection follows this hierarchy:

  1. VSCode metadata (cell.metadata.vscode.languageId)
  2. Raw cells always override to show raw
  3. Other metadata formats (languageId, language)
  4. Magic commands (%%javascript, %%bash, etc.)
  5. Notebook kernel language (fallback)

4. No Syntax Highlighting

Note that we show language indicators but don't apply syntax highlighting, keeping the code clean and readable without artificial coloring.