Monarc Editor

VS Code for web browsers

by Robert Rozas Navarro

HTML

<link rel="stylesheet" href="https://microsoft.github.io/monaco-editor/lib/bootstrap-cosmo.css">
<link rel="stylesheet" href="https://microsoft.github.io/monaco-editor/lib/bootstrap-responsive.min.css">
<link rel="stylesheet" href="https://microsoft.github.io/monaco-editor/all.css">
<link rel="stylesheet" href="https://microsoft.github.io/monaco-editor/index/index.css">
<script src="https://microsoft.github.io/monaco-editor/lib/jquery-1.9.1.min.js"></script>
<script src="https://microsoft.github.io/monaco-editor/lib/bootstrap.min.js"></script>
<script src="https://microsoft.github.io/monaco-editor/lib/bootstrap-select.min.js"></script>
<script src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js"></script>
<link rel="stylesheet" href="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/editor/editor.main.css">
<section class="try">
		<div class="container">


<h3>Editor</h3>
			<div class="editor row">
				<div class="span3">
					
					<p>Colorizers are implemented using <a href="monarch.html"
						target="_blank">Monarch</a>.</p>
				</div>
				<div class="span9">
					<div class="row">
						<div class="span4">
							<label class="control-label">Language</label>
							<select class="language-picker"></select>
						</div>
						<div class="span4">
							<label class="control-label">Theme</label>
							<select class="theme-picker">
								<option>Visual Studio</option>
								<option>Visual Studio Dark</option>
								<option>High Contrast Dark</option>
							</select>
						</div>
					</div>
					<div class="editor-frame">
						<div class="loading editor" style="display: none;">
							<div class="progress progress-striped active">
								<div class="bar"></div>
							</div>
						</div>
						<div id="editor"></div>
					</div>
				</div>
			</div>
   
   </div>
   </section>

JavaScript

'use strict';
require.config({
    baseUrl: 'https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/'
    });


var editor = null, diffEditor = null;

$(document).ready(function() {
	require(['vs/editor/editor.main'], function () {
		var MODES = (function() {
			var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
			modesIds.sort();

			return modesIds.map(function(modeId) {
				return {
					modeId: modeId,
					sampleURL: 'https://microsoft.github.io/monaco-editor/index/samples/sample.' + modeId + '.txt'
				};
			});
		})();

		for (var i = 0; i < MODES.length; i++) {
			var o = document.createElement('option');
			o.textContent = MODES[i].modeId;
			$(".language-picker").append(o);
		}
		$(".language-picker").change(function() {
			loadSample(MODES[this.selectedIndex]);
		});
		$('.language-picker').selectpicker({
			size: 10
		});
		loadSample(MODES[0]);

		$(".theme-picker").change(function() {
			changeTheme(this.selectedIndex);
		});
		$('.theme-picker').selectpicker({
			size: 3
		});

		loadDiffSample();

		$('#inline-diff-checkbox').change(function () {
			diffEditor.updateOptions({
				renderSideBySide: !$(this).is(':checked')
			});
		});
	});

	window.onresize = function () {
		if (editor) {
			editor.layout();
		}
		if (diffEditor) {
			diffEditor.layout();
		}
	};
});

function loadSample(mode) {
	$.ajax({
		type: 'GET',
		url: mode.sampleURL,
		dataType: 'text',
		beforeSend: function() {
			$('.loading.editor').show();
		},
		error: function () {
			if (editor) {
				if (editor.getModel()) {
					editor.getModel().dispose();
				}
				editor.dispose();
				editor = null;
			}
			$('.loading.editor').fadeOut({ duration: 200 });
			$('#editor').empty();
			$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>');
		}
	}).done(function (data) {
		if (!editor) {
			$('#editor').empty();
			editor = monaco.editor.create(document.getElementById('editor'),...