Home

Awesome

<h1 align="center">&lt;wc-monaco-editor&gt; Easily Embed a Monaco Editor</h1> <div align="center"> <a href="https://github.com/vanillawc/wc-monaco-editor/releases"><img src="https://badgen.net/github/tag/vanillawc/wc-monaco-editor" alt="GitHub Releases"></a> <a href="https://www.npmjs.com/package/@vanillawc/wc-monaco-editor"><img src="https://badgen.net/npm/v/@vanillawc/wc-monaco-editor" alt="NPM Releases"></a> <a href="https://github.com/vanillawc/wc-monaco-editor/actions"><img src="https://github.com/vanillawc/wc-monaco-editor/workflows/Latest/badge.svg" alt="Latest Status"></a> <a href="https://github.com/vanillawc/wc-monaco-editor/actions"><img src="https://github.com/vanillawc/wc-monaco-editor/workflows/Release/badge.svg" alt="Release Status"></a>

<a href="https://discord.gg/aSWYgtybzV"><img alt="Discord" src="https://img.shields.io/discord/723296249121603604?color=%23738ADB"></a> <a href="https://www.webcomponents.org/element/vanillawc/wc-monaco-editor"><img src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" alt="Published on WebComponents.org"></a>

<!-- <a href="https://bundlephobia.com/result?p=@vanillawc/wc-monaco-editor"><img src="https://badgen.net/bundlephobia/minzip/@vanillawc/wc-monaco-editor" alt="Bundlephobia"></a> --> </div>

Installation

Installation

npm i @vanillawc/wc-monaco-editor

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-monaco-editor/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-monaco-editor@1/index.js"></script>

Demo

Try it out here

Usage

Attributes

Note: The ID attribute is required if there are multiple editors

Properties

Basic Usage

To edit plaintext

<wc-monaco-editor></wc-monaco-editor>

Language Support

Language support enables syntax highlighting, code completion, etc.

<wc-monaco-editor language="javascript"></wc-monaco-editor>

External Source

Load an external source file with the src attribute

<wc-monaco-editor src="sample.js" language="javascript"></wc-monaco-editor>

Advanced Configuration

A config can be provided for advanced use cases that require the full spectrum of Monaco Editor options.

<wc-monaco-editor config="config.json"></wc-monaco-editor>

config.json

{
  "language": "javascript",
  "minimap": {
    "enabled": false
  },
  "tabSize": 2,
  "fontSize": 16,
  "wordWrap": "on",
  "lineNumbersMinChars": 3,
  "wrappingIndent": "same",
  "mouseWheelZoom": true,
  "copyWithSyntaxHighlighting": false
}

Note: See the EditorOptions official documentation for all available options.

Contributing

See CONTRIBUTING.md