DEV Community

Cover image for Embed VSCode single file editor in your website.
Kavindu Santhusa
Kavindu Santhusa

Posted on

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

coding on laptop

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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
  });
});
Enter fullscreen mode Exit fullscreen mode
  • 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. ❀️❀️❀️

Top comments (0)