A Visual Studio Code extension that provides TypeScript syntax highlighting within various file types for the ModularMC regolith filter.
This extension enhances your development experience by injecting TypeScript syntax highlighting into:
- JSON files - Inline TypeScript within string values
- Plain text files - Block and inline TypeScript code
- Lang files (
.lang) - Block TypeScript code for ModularMC
Highlight TypeScript code within JSON string values that start with :::
{
"script": "::console.log('Hello, World!')",
"handler": "::function process(data) { return data.map(x => x * 2); }"
}Multi-line TypeScript code blocks using {ts: ... :} syntax:
Normal text content
{ts:
let x = 5;
function hello() {
console.log(x);
}
:}
More text content
Inline TypeScript within quoted strings using :: prefix:
Some text "::const greeting = 'Hello';" more text
- Clone this repository
- Open in VS Code
- Press
F5to launch the Extension Development Host - Test the extension with the provided example files in the
test/directory
- Download the
.vsixfile - Open VS Code
- Go to Extensions view (
Ctrl+Shift+X) - Click the "..." menu and select "Install from VSIX..."
- Select the downloaded file
| File Type | Extension | Syntax Support |
|---|---|---|
| JSON | .json |
Inline TypeScript (::...) |
| Plain Text | .txt |
Block ({ts: ... :}) and Inline ("::...") |
| Lang Files | .lang |
Block TypeScript ({ts: ... :}) |
{
"processor": "::data => data.filter(item => item.active)",
"validator": "::function validate(input) { return input.length > 0; }"
}# ModularMC Lang File
{ts:
interface Player {
name: string;
level: number;
}
function processPlayer(player: Player) {
return `${player.name} (Level ${player.level})`;
}
:}
Configuration notes:
{ts:
const config = {
apiUrl: 'https://api.example.com',
timeout: 5000
};
:}
Processing instruction: "::item => item.id"
This extension uses TextMate grammar injection to provide syntax highlighting:
-
Grammar Files: Located in
syntaxes/directoryjson-injection.tmLanguage.json- JSON string injectionplain-injection.tmLanguage.json- Plain text injectionlang-injection.tmLanguage.json- Lang file injection
-
Language Configuration:
language-configuration.jsonfor.langfiles -
Embedded Language: All injections map to TypeScript (
typescript) for consistent highlighting
modular-mc-syntax-highlight/
├── package.json # Extension manifest
├── language-configuration.json # Lang file configuration
├── syntaxes/
│ ├── json-injection.tmLanguage.json
│ ├── plain-injection.tmLanguage.json
│ └── lang-injection.tmLanguage.json
└── test/
├── some.json # JSON examples
├── some.txt # Plain text examples
├── some.lang # Lang file examples
└── extension.test.js # Tests
Test files are provided in the test/ directory:
some.json- JSON with inline TypeScriptsome.txt- Plain text with block and inline TypeScriptsome.lang- Lang file with block TypeScript
- Install dependencies:
npm install - Package extension:
vsce package
- Visual Studio Code 1.102.0 or higher
- TypeScript language support (built into VS Code)
- Inline TypeScript patterns must be properly quoted in JSON
- Block syntax requires exact
{ts:and:}delimiters - Some complex TypeScript syntax may not highlight perfectly within injected contexts
- Fork the repository
- Create a feature branch
- Make your changes
- Test with the provided examples
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE.txt file for details.
- Initial release
- TypeScript injection for JSON, plain text, and .lang files
- Support for both inline and block syntax patterns