MLX Language Support for VS Code

A VS Code extension that provides syntax highlighting and language support for .mlx files containing embedded C++, Python, JavaScript, and Go code blocks.

Features

• Syntax Highlighting: Full syntax highlighting for embedded C++, Python, JavaScript, and Go code
• File Imports: Support for importing other MLX files using the bind keyword (highlighted in blue)
• Language Delimiters: Special highlighting for language block delimiters (/cpp, /py, /js, /go)
• Background Colors: Different background colors for each language block to improve visual distinction
• Gutter Indicators: Colored bars in the gutter area next to line numbers for each language block
• Auto-completion: Intelligent completion for language delimiters and bind statements
• Bracket Matching: Proper bracket matching and auto-closing pairs
• Custom Theme: Includes MLX Language Theme for optimal viewing experience

Syntax

MLX files use special delimiters to separate different language blocks and support importing other MLX files:

File Imports

bind utils.mlx
bind ../helpers/math.mlx

Language Blocks

/cpp
// C++ code here
#include <iostream>
int main() {
    std::cout << "Hello from C++!" << std::endl;
    return 0;
}

/py
# Python code here
def hello():
    print("Hello from Python!")

/js
// JavaScript code here
function hello() {
    console.log("Hello from JavaScript!");
}

/go
// Go code here
package main
import "fmt"
func main() {
    fmt.Println("Hello from Go!")
}

Installation

From Source

1. Clone this repository
2. Install dependencies: npm install
3. Compile TypeScript: npm run compile
4. Press F5 in VS Code to open a new Extension Development Host window
5. Open a .mlx file to test the extension

Enable Background Colors

To enable distinctive background colors for each language block, add the following to your VS Code settings.json:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "MLX C++ Block Background",
        "scope": "meta.embedded.block.cpp.mlx",
        "settings": {
          "background": "#331a1a"
        }
      },
      {
        "name": "MLX Python Block Background",
        "scope": "meta.embedded.block.python.mlx", 
        "settings": {
          "background": "#1a331a"
        }
      },
      {
        "name": "MLX JavaScript Block Background",
        "scope": "meta.embedded.block.javascript.mlx",
        "settings": {
          "background": "#1a1a33"
        }
      },
      {
        "name": "MLX Go Block Background", 
        "scope": "meta.embedded.block.go.mlx",
        "settings": {
          "background": "#333319"
        }
      }
    ]
  }
}

Or copy the settings from mlx-settings.json file included in this extension.

Building VSIX Package

1. Install vsce: npm install -g vsce
2. Package the extension: vsce package
3. Install the generated .vsix file: code --install-extension mlx-language-support-0.0.1.vsix

Development

• Run npm run watch to automatically recompile on changes
• Use F5 to launch the Extension Development Host for testing
• Reload the Extension Development Host (Ctrl+R) after making changes

Language Support

The extension provides full language support for:

• C++ (/cpp): Complete C++ syntax highlighting including STL, templates, and modern C++ features
• Python (/py): Python syntax with support for keywords, strings, comments, and built-in functions
• JavaScript (/js): JavaScript/Node.js syntax including ES6+ features
• Go (/go): Go language syntax with package declarations, functions, and built-in types

Contributing

Feel free to submit issues and enhancement requests!