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. ❤️❤️❤️
Top comments (0)