Socket
Socket
Sign inDemoInstall

@monaco-editor/loader

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@monaco-editor/loader

the library aims to setup monaco editor into your browser


Version published
Weekly downloads
736K
decreased by-0.45%
Maintainers
1
Weekly downloads
 
Created

What is @monaco-editor/loader?

@monaco-editor/loader is an npm package that provides a convenient way to load the Monaco Editor, which is the code editor that powers Visual Studio Code. It simplifies the process of integrating the Monaco Editor into web applications by handling the loading and configuration of the editor.

What are @monaco-editor/loader's main functionalities?

Loading the Monaco Editor

This feature allows you to load the Monaco Editor and create an instance of it in a specified HTML container. The code sample demonstrates initializing the editor with some JavaScript code.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript'
  });
});

Configuring the Monaco Editor

This feature allows you to configure various options for the Monaco Editor, such as the theme, language, and read-only mode. The code sample demonstrates setting the editor to use the 'vs-dark' theme and making it read-only.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript',
    theme: 'vs-dark',
    readOnly: true
  });
});

Loading Monaco Editor with custom paths

This feature allows you to specify custom paths for loading the Monaco Editor. The code sample demonstrates configuring the loader to use a CDN for loading the editor.

const monacoLoader = require('@monaco-editor/loader');

monacoLoader.config({
  paths: {
    vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.21.2/min/vs'
  }
});

monacoLoader.init().then(monaco => {
  const editor = monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, world!");\n}',
    language: 'javascript'
  });
});

Other packages similar to @monaco-editor/loader

Keywords

FAQs

Package last updated on 01 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc