Embed VSCode single file editor in your website.

Today we're going to embed an code editor in website. I had chosen the most popular IDE Visual Studio Code. The Monaco Editor is the code editor that powers VS Code. So we can use it to build a single file code editor

Features

• Rich IntelliSense, Validation

  TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

• Basic Syntax Colorization

  XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C

Example

This is an quick example for embed vscode.

Example explained

First create a container for editor.

<div id="container" style="width:100%;height:80vh;border:1px solid grey"></div>

• width:100%; - takes full width
• height:80vh; - takes 80% of the viewport height.
• border:1px solid grey - just a border.

Then add loader for editor. Here I am using jsDelivr as my CDN.

<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs/loader.js"></script>

This is the working code part. add this code inside an script tag below above code.

require.config({
  paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.27.0/min/vs" }
  });
require(["vs/editor/editor.main"], function () {
  var editor = monaco.editor.create(document.getElementById("container"), {
    value: code,
    language: "typescript",
    automaticLayout: true
  });
});

• require - AMD module loader(loads editor)
• require.config() - configure to use jsDelivr.
• value: code - code can be any code as string.
• language: "typescript" - set programming language of code for language features.
• automaticLayout: true - Makes it responsive.

Then enjoy it. I hope to write more articles with advanced use cases of embedded editor. Follow 🏃‍♂️ me for more articles. Ask🙏 any question on comments section. Star⭐ me if you love this article.

^{cover image by Unsplash image(laptop) by Unsplash}

Happy Coding 👩‍💻👩‍💻👩‍💻... Thanks. ❤❤❤