Embed VSCode single file editor in your website.

Code Editor

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. ❤️❤️❤️