@ngeenx/monaco-textmate-loader v1.0.13

monaco-textmate-loader

This is a simple loader for Monaco Editor that allows you to use TextMate grammars with Monaco Editor. It is based on the vscode-textmate and vscode-oniguruma packages. For more context, see: https://github.com/microsoft/monaco-editor/issues/1915.

vscode has TextMate support but the Monaco Editor does not support TextMate grammars out of the box. If you want to highlight some language or customize you need to write monarch config and provide to Monaco Editor. This package converts TextMate grammars to Monaco Editor grammars. You can use any existing TextMate grammar with Monaco Editor easily.

📦 Installation

PNPM

pnpm i @ngeenx/monaco-textmate-loader

NPM

npm i @ngeenx/monaco-textmate-loader

🚀 Usage

import { MonacoTextmateLoader } from '@ngeenx/monaco-textmate-loader';

// create normal editor
const editorInstance = MonacoTextmateLoader.create(document.getElementById('editor'), {
  language: 'javascript', // required
  theme: 'vs-dark', // optional and default is 'vs-dark'
  value: 'console.log("Hello, World!");' // optional and default is ''
  baseUrl: '/assets' // optional and default is '/assets'
});

// create diff editor
const editorInstance = MonacoTextmateLoader.create(document.getElementById('editor'), {
  language: 'javascript', // required
  theme: 'vs-dark', // optional and default is 'vs-dark'
  value: 'console.log("Hello, World!");' // optional and default is ''
  baseUrl: '/assets' // optional and default is '/assets'
  diffEditor: true // required for diff editor
});

📌 When to use

We can use Monaco Editor directly in web applications. But when we need to highlight some language, we need to write a monarch config for that language. This is a time-consuming process.

When you need a syntax highliter for a language, you can find and install a vscode extension for that language. This extension contains a TextMate grammar for that language. You can use this package to convert that TextMate grammar to Monaco Editor grammar.

🧩 Built-in grammars

This package includes some built-in grammars. You can use these grammars directly without any additional installation. You can find the list of built-in grammars in the grammars directory (also we need a config file for each file, see configurations directory).

!WARNING This repository maintains a fork of the original thebaselab/monaco-tm and bolinfest/monaco-tm repos. This package has been modified to work in Angular projects. If you want to use this package in a different environment, please consider differencies between the original and this fork (some dependencies and loaders removed).