mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 08:10:11 +01:00
Rewrites website
This commit is contained in:
Henning Dieterichs
parent
5eff543347
commit
10577a0641
313 changed files with 12080 additions and 29200 deletions
5346
website/static/monarch-static.html
Normal file
5346
website/static/monarch-static.html
Normal file
File diff suppressed because it is too large
Load diff
BIN
website/static/monarch/monarch-34px.png
Normal file
BIN
website/static/monarch/monarch-34px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
297
website/static/monarch/monarch.css
Normal file
297
website/static/monarch/monarch.css
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
/* common extra token classes */
|
||||
.monaco-editor .token.invalid {
|
||||
border-bottom: red dotted 1px;
|
||||
}
|
||||
.monaco-editor .token.comment.doc {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.monaco-editor .token.type {
|
||||
color: teal;
|
||||
}
|
||||
.monaco-editor .token.type.delimiter {
|
||||
color: teal;
|
||||
}
|
||||
.monaco-editor .token.predefined {
|
||||
color: navy;
|
||||
}
|
||||
.monaco-editor .token.namespace {
|
||||
color: navy;
|
||||
}
|
||||
.monaco-editor .token.constructor {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
/* theme all the new token classes */
|
||||
|
||||
.monaco-editor.vs-dark .token.type {
|
||||
color: darkcyan;
|
||||
}
|
||||
.monaco-editor.vs-dark .token.predefined {
|
||||
color: darkorchid;
|
||||
}
|
||||
.monaco-editor.vs-dark .token.namespace {
|
||||
color: lightsteelblue;
|
||||
}
|
||||
.monaco-editor.vs-dark .token.constructor {
|
||||
color: palegoldenrod;
|
||||
}
|
||||
|
||||
.monaco-editor.high-contrast-black .token.type {
|
||||
color: darkcyan;
|
||||
}
|
||||
.monaco-editor.high-contrast-black .token.predefined {
|
||||
color: aquamarine;
|
||||
}
|
||||
.monaco-editor.high-contrast-black .token.namespace {
|
||||
color: lightsteelblue;
|
||||
}
|
||||
.monaco-editor.high-contrast-black .token.constructor {
|
||||
color: palegoldenrod;
|
||||
}
|
||||
|
||||
/* specials for functional languages */
|
||||
.token.keyword.dot {
|
||||
color: black;
|
||||
}
|
||||
.token.typeparam {
|
||||
color: #555;
|
||||
}
|
||||
.token.typevar {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.monaco-editor .current-line,
|
||||
.monaco-editor.vs .current-line,
|
||||
.monaco-editor.monaco .current-line {
|
||||
border: none;
|
||||
}
|
||||
.monaco-editor.vs .key.js {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
.monaco-editor.vs .token.string.escape,
|
||||
.token.regexp.escape {
|
||||
color: dimgray;
|
||||
}
|
||||
.token.regexp.escape.control {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.token.emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.header {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
/* -------------------------------------------
|
||||
Workbench UI style
|
||||
--------------------------------------------*/
|
||||
#editor,
|
||||
#langPane {
|
||||
height: 60ex;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#langPane {
|
||||
height: 72ex;
|
||||
}
|
||||
|
||||
#main {
|
||||
font-family: "Segoe UI Light", "Segoe UI", Arial, "HelveticaNeue-Light",
|
||||
sans-serif;
|
||||
font-size: 12pt;
|
||||
width: 94%;
|
||||
padding: 0pt;
|
||||
margin: 1% 3% 5ex 3%;
|
||||
}
|
||||
|
||||
#leftPane {
|
||||
float: left;
|
||||
width: 58%;
|
||||
margin: 0pt;
|
||||
margin-bottom: 2ex;
|
||||
}
|
||||
|
||||
#rightPane {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0pt;
|
||||
}
|
||||
|
||||
#header,
|
||||
#footer {
|
||||
clear: both;
|
||||
font-size: 18pt;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 0pt 0pt 5pt -17px;
|
||||
padding: 0pt;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
#commandbar {
|
||||
margin-top: 4px;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#monarchConsole {
|
||||
color: black;
|
||||
overflow: auto;
|
||||
height: 100px;
|
||||
border: lightgray 1px solid;
|
||||
padding-left: 1ex;
|
||||
margin-top: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#sampleselect {
|
||||
width: 15ex;
|
||||
}
|
||||
#themeselect,
|
||||
#sampleselect {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.paneheader {
|
||||
margin-bottom: 0.5ex;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.selectbox {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid lightgray;
|
||||
cursor: pointer;
|
||||
padding: 0ex 0.5ex 0ex 0.5ex;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: lightgray;
|
||||
border-color: dimgray;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.touchbutton {
|
||||
border: 1px solid;
|
||||
border-radius: 1000px; /* circle */
|
||||
height: 3ex;
|
||||
width: 3ex; /* needed for safari */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.arrowdown {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/*-------------------------------------------------------------------
|
||||
documentation style
|
||||
-------------------------------------------------------------------*/
|
||||
#documentation {
|
||||
clear: both;
|
||||
border: lightgray 1px solid;
|
||||
padding: 1ex 4ex 1ex 3ex;
|
||||
font-family: "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif;
|
||||
}
|
||||
|
||||
#documentation a {
|
||||
color: navy;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
#documentation .monaco-editor.monaco .current-line,
|
||||
#documentation .monaco-editor {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#documentation .string.escape {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
margin-top: 0pt;
|
||||
margin-left: -1.5ex;
|
||||
margin-bottom: 0pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16pt;
|
||||
}
|
||||
h3 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
margin-left: 0pt;
|
||||
}
|
||||
|
||||
.options,
|
||||
pre {
|
||||
border: 1px solid #888;
|
||||
padding: 1ex;
|
||||
background: #f8f8f8;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
dt {
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: black;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
img {
|
||||
margin: 2ex;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: navy;
|
||||
margin-top: 2ex;
|
||||
padding: 2px;
|
||||
}
|
||||
.dt {
|
||||
color: navy;
|
||||
}
|
||||
.adv {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
dl dl dt {
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
#documentation .keyword {
|
||||
color: blue;
|
||||
}
|
||||
#documentation .tag {
|
||||
color: navy;
|
||||
}
|
||||
178
website/static/monarch/monarch.js
Normal file
178
website/static/monarch/monarch.js
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
/// <reference path="../../node_modules/monaco-editor/monaco.d.ts" />
|
||||
|
||||
"use strict";
|
||||
|
||||
/*-----------------------------------------
|
||||
General helpers
|
||||
------------------------------------------*/
|
||||
function clearInnerText(elem) {
|
||||
elem.innerHTML = "";
|
||||
}
|
||||
|
||||
function getInnerText(elem) {
|
||||
var text = elem.innerText;
|
||||
if (!text) text = elem.textContent;
|
||||
return text;
|
||||
}
|
||||
|
||||
function escapeToHTML(text) {
|
||||
return text
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">");
|
||||
}
|
||||
|
||||
function appendInnerText(elem, txt) {
|
||||
txt = escapeToHTML(txt);
|
||||
elem.innerHTML += txt;
|
||||
}
|
||||
|
||||
function setInnerText(elem, txt) {
|
||||
clearInnerText(elem);
|
||||
appendInnerText(elem, txt);
|
||||
}
|
||||
|
||||
function getTextFromId(id) {
|
||||
var elem = document.getElementById(id);
|
||||
if (elem == null) return null;
|
||||
return getInnerText(elem);
|
||||
}
|
||||
|
||||
/* -----------------------------------------
|
||||
The main loader for the workbench UI
|
||||
------------------------------------------*/
|
||||
|
||||
var outputPane = document.getElementById("monarchConsole");
|
||||
|
||||
var isDirty = false;
|
||||
window.onbeforeunload = function (ev) {
|
||||
if (isDirty) {
|
||||
return "If you leave this page any unsaved work will be lost.";
|
||||
}
|
||||
};
|
||||
|
||||
function createLangModel(languageId, text) {
|
||||
monaco.languages.register({ id: languageId });
|
||||
|
||||
var langModel = monaco.editor.createModel(text, "javascript");
|
||||
var update = function () {
|
||||
var def = null;
|
||||
try {
|
||||
def = eval("(function(){ " + langModel.getValue() + "; })()");
|
||||
} catch (err) {
|
||||
setInnerText(outputPane, err + "\n");
|
||||
return;
|
||||
}
|
||||
monaco.languages.setMonarchTokensProvider(languageId, def);
|
||||
setInnerText(outputPane, "up-to-date\n");
|
||||
};
|
||||
langModel.onDidChangeContent(function () {
|
||||
isDirty = true;
|
||||
update();
|
||||
});
|
||||
update();
|
||||
|
||||
return langModel;
|
||||
}
|
||||
|
||||
function readSamples(sampleSelect) {
|
||||
var samples = {};
|
||||
|
||||
for (var i = 0; i < sampleSelect.options.length; i++) {
|
||||
var id = sampleSelect.options[i].value;
|
||||
if (!id || sampleSelect.options[i].disabled) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var languageId = "monarch-language-" + id;
|
||||
|
||||
var sampleText = getTextFromId(id + "-sample");
|
||||
|
||||
samples[id] = {
|
||||
languageId: languageId,
|
||||
langModel: createLangModel(languageId, getTextFromId(id)),
|
||||
langViewState: null,
|
||||
sampleModel: monaco.editor.createModel(sampleText, languageId),
|
||||
sampleViewState: null,
|
||||
};
|
||||
}
|
||||
|
||||
return samples;
|
||||
}
|
||||
|
||||
require(["vs/editor/editor.main"], function () {
|
||||
var sampleSelect = document.getElementById("sampleselect");
|
||||
var langPane = document.getElementById("langPane");
|
||||
var editorPane = document.getElementById("editor");
|
||||
|
||||
// Adjust height of editors
|
||||
var screenHeight = window.innerHeight;
|
||||
if (screenHeight) {
|
||||
var paneHeight = 0.76 * screenHeight;
|
||||
langPane.style.height = paneHeight + "px";
|
||||
editorPane.style.height = paneHeight - 112 + "px"; // 100px + margin 10px + borders 2px
|
||||
}
|
||||
|
||||
var SAMPLES = readSamples(sampleSelect);
|
||||
var CURRENT_SAMPLE = null;
|
||||
|
||||
var langEditor = monaco.editor.create(langPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false,
|
||||
});
|
||||
|
||||
var sampleEditor = monaco.editor.create(editorPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false,
|
||||
});
|
||||
|
||||
var select = document.getElementById("themeselect");
|
||||
var currentTheme = "vs";
|
||||
select.onchange = function () {
|
||||
currentTheme = select.options[select.selectedIndex].value;
|
||||
monaco.editor.setTheme(currentTheme);
|
||||
};
|
||||
|
||||
// on resize
|
||||
function refreshLayout() {
|
||||
langEditor.layout();
|
||||
sampleEditor.layout();
|
||||
}
|
||||
window.onresize = refreshLayout;
|
||||
|
||||
// Switch to another sample
|
||||
function setEditorState(name) {
|
||||
if (!name || CURRENT_SAMPLE === name || !SAMPLES[name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Save previous sample's view state
|
||||
if (CURRENT_SAMPLE) {
|
||||
SAMPLES[CURRENT_SAMPLE].langViewState = langEditor.saveViewState();
|
||||
SAMPLES[CURRENT_SAMPLE].sampleViewState =
|
||||
sampleEditor.saveViewState();
|
||||
}
|
||||
|
||||
CURRENT_SAMPLE = name;
|
||||
|
||||
// Apply new sample
|
||||
langEditor.setModel(SAMPLES[CURRENT_SAMPLE].langModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].langViewState) {
|
||||
langEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].langViewState);
|
||||
}
|
||||
sampleEditor.setModel(SAMPLES[CURRENT_SAMPLE].sampleModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].sampleViewState) {
|
||||
sampleEditor.restoreViewState(
|
||||
SAMPLES[CURRENT_SAMPLE].sampleViewState
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh the sample text
|
||||
function refreshSample() {
|
||||
var name = sampleSelect.options[sampleSelect.selectedIndex].value;
|
||||
setEditorState(name);
|
||||
}
|
||||
sampleSelect.onchange = refreshSample;
|
||||
refreshSample(); // initialize initial text
|
||||
}); // require
|
||||
Loading…
Add table
Add a link
Reference in a new issue