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 IntelliS…


This content originally appeared on DEV Community and was authored by Kavindu Santhusa

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


This content originally appeared on DEV Community and was authored by Kavindu Santhusa


Print Share Comment Cite Upload Translate Updates
APA

Kavindu Santhusa | Sciencx (2021-10-02T11:45:07+00:00) Embed VSCode single file editor in your website.. Retrieved from https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/

MLA
" » Embed VSCode single file editor in your website.." Kavindu Santhusa | Sciencx - Saturday October 2, 2021, https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/
HARVARD
Kavindu Santhusa | Sciencx Saturday October 2, 2021 » Embed VSCode single file editor in your website.., viewed ,<https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/>
VANCOUVER
Kavindu Santhusa | Sciencx - » Embed VSCode single file editor in your website.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/
CHICAGO
" » Embed VSCode single file editor in your website.." Kavindu Santhusa | Sciencx - Accessed . https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/
IEEE
" » Embed VSCode single file editor in your website.." Kavindu Santhusa | Sciencx [Online]. Available: https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/. [Accessed: ]
rf:citation
» Embed VSCode single file editor in your website. | Kavindu Santhusa | Sciencx | https://www.scien.cx/2021/10/02/embed-vscode-single-file-editor-in-your-website/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts