Как добавить редактор кода VS на ваш сайт

Как добавить редактор кода VS на ваш сайт

Комментарии
Содержание
  1. Начало работы
  2. Добавление темы
  3. Настройка языков
  4. Заключение

Редактор Monaco от Microsoft представляет собой компонент редактора кода, который можно легко интегрировать в веб-сайты. С помощью всего нескольких строк кода вы можете добавить в свое веб-приложение полнофункциональный редактор, похожий на VS Code. В этом уроке мы рассмотрим, как это сделать.

Начало работы

Чтобы использовать Monaco, нам нужно включить его в нашу страницу. Мы можем получить его из CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.23.0/min/vs/loader.min.js"></script>

Это позволит загрузить библиотеку Monaco асинхронно. Далее нам нужен <div> в нашем HTML, где мы можем инстанцировать редактор:

<div id="editor"></div>

Теперь в нашем JavaScript-коде мы можем инициализировать Monaco и создать редактор:

require.config({
	paths: {
		vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.23.0/min/vs',
	},
});

require(['vs/editor/editor.main'], function () {
	const editor = monaco.editor.create(document.getElementById('editor'), {
		value: [
			'<!DOCTYPE html>',
			'<html>',
			' <body>',
			'   <h1>Hello World!</h1>',
			' </body>',
			'</html>',
		].join('\n'),
		language: 'html',
	});
});

Это создаст редактор с образцом HTML-контента.

Добавление темы

Чтобы редактор выглядел как VS Code, нам нужно добавить CSS темы:

<link
	href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.23.0/min/vs/editor/editor.main.css"
	rel="stylesheet"
/>

В файле editor.main.css содержатся основные стили редактора. Для темной темы VS Code включите в него:

const editor = monaco.editor.create(..., { theme: 'vs-dark' });

Вот и все! Теперь на нашей странице есть редактор, похожий на VS Code.

Настройка языков

Чтобы добавить поддержку языков, передайте параметр language при создании редактора:

const editor = monaco.editor.create(..., { language: 'javascript' });

Monaco поставляется с интеллектуальным завершением кода, подсветкой синтаксиса и проверкой для таких популярных языков, как HTML, CSS, JavaScript и других.

Заключение

С помощью всего нескольких строк кода Monaco позволяет легко интегрировать редактор кода в ваше веб-приложение. Настраиваемые темы и поддержка языков выводят его на новый уровень, обеспечивая полноценную среду кодирования для ваших пользователей.

Дайте мне знать, если вы хотите, чтобы я расширил или изменил что-либо в этой статье!