daohualiuxiang
/
monaco-editor
mirror of https://github.com/microsoft/monaco-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

cleanup

pull/237/head
Alex Dima 2016-09-06 12:37:57 +02:00
parent 5b86272f55
commit af1a2ba847
28 changed files with 83 additions and 1412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -209,11 +209,6 @@ Create a Monarch tokenizer [here](https://microsoft.github.io/monaco-editor/mona
* run `$/src/monaco-editor> npm run release`
* open http://localhost:8080/monaco-editor/website/
### Generating the playground samples
* edit `$/src/monaco-editor/website/playground/playground.mdoc`
* run `$/src/monaco-editor> gulp playground-samples`
### Publishing the website
* run `$/src/monaco-editor> npm run website`

222
gulpfile.js
View File

@ -8,8 +8,7 @@ var rimraf = require('rimraf');
var cp = require('child_process');
var httpServer = require('http-server');
var SAMPLES_MDOC_PATH = path.join(__dirname, 'website/playground/playground.mdoc');
var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/samples');
var WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
var MONACO_EDITOR_VERSION = (function() {
var packageJsonPath = path.join(__dirname, 'package.json');
var packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
@ -206,144 +205,8 @@ function addPluginThirdPartyNotices() {
// --- website
gulp.task('clean-playground-samples', function(cb) { rimraf(WEBSITE_GENERATED_PATH, { maxBusyTries: 1 }, cb); });
gulp.task('playground-samples', ['clean-playground-samples'], function() {
function toFolderName(name) {
var result = name.toLowerCase().replace(/[^a-z0-9\-_]/g, '-');
while (result.indexOf('--') >= 0) {
result = result.replace(/--/, '-');
}
while (result.charAt(result.length - 1) === '-') {
result = result.substring(result, result.length - 1);
}
return result;
}
function parse(txt) {
function startsWith(haystack, needle) {
return haystack.substring(0, needle.length) === needle;
}
var CHAPTER_MARKER = "=";
var SAMPLE_MARKER = "==";
var SNIPPET_MARKER = "=======================";
var lines = txt.split(/\r\n|\n|\r/);
var result = [];
var currentChapter = null;
var currentSample = null;
var currentSnippet = null;
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
if (startsWith(line, SNIPPET_MARKER)) {
var snippetType = line.substring(SNIPPET_MARKER.length).trim();
if (snippetType === 'HTML' || snippetType === 'JS' || snippetType === 'CSS') {
currentSnippet = currentSample[snippetType];
} else {
currentSnippet = null;
}
continue;
}
if (startsWith(line, SAMPLE_MARKER)) {
currentSnippet = null;
currentSample = {
name: line.substring(SAMPLE_MARKER.length).trim(),
JS: [],
HTML: [],
CSS: []
};
currentChapter.samples.push(currentSample);
continue;
}
if (startsWith(line, CHAPTER_MARKER)) {
currentSnippet = null;
currentSample = null;
currentChapter = {
name: line.substring(CHAPTER_MARKER.length).trim(),
samples: []
};
result.push(currentChapter);
continue;
}
if (currentSnippet) {
currentSnippet.push(line);
continue;
}
if (line === '') {
continue;
}
// ignore inter-sample content
console.warn('IGNORING INTER-SAMPLE CONTENT: ' + line);
}
return result;
}
var chapters = parse(fs.readFileSync(SAMPLES_MDOC_PATH).toString());
var allSamples = [];
fs.mkdirSync(WEBSITE_GENERATED_PATH);
chapters.forEach(function(chapter) {
var chapterFolderName = toFolderName(chapter.name);
chapter.samples.forEach(function(sample) {
var sampleId = toFolderName(chapter.name + '-' + sample.name);
sample.sampleId = sampleId;
var js = [
'//---------------------------------------------------',
'// ' + chapter.name + ' > ' + sample.name,
'//---------------------------------------------------',
'',
].concat(sample.JS)
var sampleOut = {
id: sampleId,
js: js.join('\n'),
html: sample.HTML.join('\n'),
css: sample.CSS.join('\n')
};
allSamples.push({
chapter: chapter.name,
name: sample.name,
sampleId: sampleId
});
var content =
`// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push(${JSON.stringify(sampleOut)});
`
fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, sampleId + '.js'), content);
});
});
var content =
`// This is a generated file. Please do not edit directly.
this.SAMPLES = [];
this.ALL_SAMPLES = ${JSON.stringify(allSamples)};`
fs.writeFileSync(path.join(WEBSITE_GENERATED_PATH, 'all.js'), content);
});
gulp.task('clean-website', function(cb) { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb); });
gulp.task('website', ['clean-website', 'playground-samples'], function() {
gulp.task('website', ['clean-website'], function() {
return (
gulp.src('website/**/*', { dot: true })
@ -408,6 +271,87 @@ gulp.task('generate-test-samples', function() {
var prefix = '//This is a generated file via gulp generate-test-samples\ndefine([], function() { return';
var suffix = '; });'
fs.writeFileSync(path.join(__dirname, 'test/samples-all.js'), prefix + JSON.stringify(samples, null, '\t') + suffix );
var PLAY_SAMPLES = require(path.join(WEBSITE_GENERATED_PATH, 'all.js')).PLAY_SAMPLES;
var locations = [];
for (var i = 0; i < PLAY_SAMPLES.length; i++) {
var sample = PLAY_SAMPLES[i];
var sampleId = sample.id;
var samplePath = path.join(WEBSITE_GENERATED_PATH, sample.path);
var html = fs.readFileSync(path.join(samplePath, 'sample.html'));
var js = fs.readFileSync(path.join(samplePath, 'sample.js'));
var css = fs.readFileSync(path.join(samplePath, 'sample.css'));
var result = [
'<!DOCTYPE html>',
'<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->',
'<html>',
'<head>',
' <base href="..">',
' <meta http-equiv="X-UA-Compatible" content="IE=edge" />',
' <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />',
'</head>',
'<body>',
'<style>',
'/*----------------------------------------SAMPLE CSS START*/',
'',
css,
'',
'/*----------------------------------------SAMPLE CSS END*/',
'</style>',
'<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>',
'THIS IS A GENERATED FILE VIA gulp generate-test-samples',
'',
'<div id="bar" style="margin-bottom: 6px;"></div>',
'',
'<div style="clear:both"></div>',
'<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">',
'<!-- ----------------------------------------SAMPLE HTML START-->',
'',
html,
'',
'<!-- ----------------------------------------SAMPLE HTML END-->',
'</div>',
'<div style="clear:both"></div>',
'',
'<script src="../metadata.js"></script>',
'<script src="dev-setup.js"></script>',
'<script>',
'loadEditor(function() {',
'/*----------------------------------------SAMPLE JS START*/',
'',
js,
'',
'/*----------------------------------------SAMPLE CSS END*/',
'});',
'</script>',
'</body>',
'</html>',
];
fs.writeFileSync(path.join(__dirname, 'test/playground.generated/' + sampleId + '.html'), result.join('\n'));
locations.push({
path: sampleId + '.html',
name: sample.chapter + ' &gt; ' + sample.name
})
}
var index = [
'<!DOCTYPE html>',
'<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->',
'<html>',
'<head>',
'</head>',
'<body>',
'<a href="../index.html">[&lt;&lt; BACK]</a><br/>',
'THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>',
locations.map(function(location) {
return '<a href="' + location.path + '">' + location.name + '</a>';
}).join('<br/>\n'),
'</body>',
'</html>',
]
fs.writeFileSync(path.join(__dirname, 'test/playground.generated/index.html'), index.join('\n'));
});
gulp.task('simpleserver', ['generate-test-samples'], function(cb) {

1193
website/playground/playground.mdoc
View File

File diff suppressed because one or more lines are too long

3
website/playground/samples/all.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
this.SAMPLES = [];
this.ALL_SAMPLES = [{"chapter":"Creating the editor","name":"Hello world!","sampleId":"creating-the-editor-hello-world"},{"chapter":"Creating the editor","name":"Editor basic options","sampleId":"creating-the-editor-editor-basic-options"},{"chapter":"Creating the editor","name":"Hard wrapping","sampleId":"creating-the-editor-hard-wrapping"},{"chapter":"Creating the editor","name":"Syntax highlighting for HTML elements","sampleId":"creating-the-editor-syntax-highlighting-for-html-elements"},{"chapter":"Interacting with the editor","name":"Adding a command to an editor instance","sampleId":"interacting-with-the-editor-adding-a-command-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Adding an action to an editor instance","sampleId":"interacting-with-the-editor-adding-an-action-to-an-editor-instance"},{"chapter":"Interacting with the editor","name":"Revealing a position","sampleId":"interacting-with-the-editor-revealing-a-position"},{"chapter":"Interacting with the editor","name":"Rendering glyphs in the margin","sampleId":"interacting-with-the-editor-rendering-glyphs-in-the-margin"},{"chapter":"Interacting with the editor","name":"Line and Inline decorations","sampleId":"interacting-with-the-editor-line-and-inline-decorations"},{"chapter":"Interacting with the editor","name":"Customizing the line numbers","sampleId":"interacting-with-the-editor-customizing-the-line-numbers"},{"chapter":"Interacting with the editor","name":"Listening to mouse events","sampleId":"interacting-with-the-editor-listening-to-mouse-events"},{"chapter":"Interacting with the editor","name":"Listening to key events","sampleId":"interacting-with-the-editor-listening-to-key-events"},{"chapter":"Customizing the appearence","name":"Exposed CSS classes","sampleId":"customizing-the-appearence-exposed-css-classes"},{"chapter":"Customizing the appearence","name":"Scrollbars","sampleId":"customizing-the-appearence-scrollbars"},{"chapter":"Customizing the appearence","name":"Tokens and colors","sampleId":"customizing-the-appearence-tokens-and-colors"},{"chapter":"Creating the DiffEditor","name":"Hello diff world!","sampleId":"creating-the-diffeditor-hello-diff-world"},{"chapter":"Creating the DiffEditor","name":"Multi-line example","sampleId":"creating-the-diffeditor-multi-line-example"},{"chapter":"Creating the DiffEditor","name":"Inline Diff Example","sampleId":"creating-the-diffeditor-inline-diff-example"},{"chapter":"Creating the DiffEditor","name":"Navigating a Diff","sampleId":"creating-the-diffeditor-navigating-a-diff"},{"chapter":"Extending Language Services","name":"Custom languages","sampleId":"extending-language-services-custom-languages"},{"chapter":"Extending Language Services","name":"Completion provider example","sampleId":"extending-language-services-completion-provider-example"},{"chapter":"Extending Language Services","name":"Hover provider example","sampleId":"extending-language-services-hover-provider-example"},{"chapter":"Extending Language Services","name":"Configure JavaScript defaults","sampleId":"extending-language-services-configure-javascript-defaults"},{"chapter":"Extending Language Services","name":"Configure JSON defaults","sampleId":"extending-language-services-configure-json-defaults"}];

3
website/playground/samples/creating-the-diffeditor-hello-diff-world.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-diffeditor-hello-diff-world","js":"//---------------------------------------------------\n// Creating the DiffEditor > Hello diff world!\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"heLLo world!\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"hello orlando!\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-diffeditor-inline-diff-example.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-diffeditor-inline-diff-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Inline Diff Example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false,\n\n\t// Render the diff inline\n\trenderSideBySide: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-diffeditor-multi-line-example.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-diffeditor-multi-line-example","js":"//---------------------------------------------------\n// Creating the DiffEditor > Multi-line example\n//---------------------------------------------------\n\nvar originalModel = monaco.editor.createModel(\"This line is removed on the right.\\njust some text\\nabcd\\nefgh\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some text\\nabcz\\nzzzzefgh\\nSome more text.\\nThis line is removed on the left.\", \"text/plain\");\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"), {\n\t// You can optionally disable the resizing\n\tenableSplitViewResizing: false\n});\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-diffeditor-navigating-a-diff.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-diffeditor-navigating-a-diff","js":"//---------------------------------------------------\n// Creating the DiffEditor > Navigating a Diff\n//---------------------------------------------------\n\n// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.\nvar originalModel = monaco.editor.createModel(\"just some text\\n\\nHello World\\n\\nSome more text\", \"text/plain\");\nvar modifiedModel = monaco.editor.createModel(\"just some Text\\n\\nHello World\\n\\nSome more changes\", \"text/plain\");\n\n\nvar diffEditor = monaco.editor.createDiffEditor(document.getElementById(\"container\"));\ndiffEditor.setModel({\n\toriginal: originalModel,\n\tmodified: modifiedModel\n});\n\nvar navi = monaco.editor.createDiffNavigator(diffEditor, {\n\tfollowsCaret: true, // resets the navigator state when the user selects something in the editor\n\tignoreCharChanges: true // jump from line to line\n});\n\nwindow.setInterval(function() {\n\tnavi.next();\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-editor-editor-basic-options.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-editor-editor-basic-options","js":"//---------------------------------------------------\n// Creating the editor > Editor basic options\n//---------------------------------------------------\n\n// Through the options literal, the behaviour of the editor can be easily customized.\n// Here are a few examples of config options that can be passed to the editor.\n// You can also call editor.updateOptions at any time to change the options.\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"// First line\\nfunction hello() {\\n\\talert('Hello world!');\\n}\\n// Last line\",\n\tlanguage: \"javascript\",\n\n\tlineNumbers: false,\n\troundedSelection: false,\n\tscrollBeyondLastLine: false,\n\treadOnly: false,\n\ttheme: \"vs-dark\",\n});\nsetTimeout(function() {\n\teditor.updateOptions({\n\t\tlineNumbers: true\n\t});\n}, 2000);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-editor-hard-wrapping.js
View File

File diff suppressed because one or more lines are too long

3
website/playground/samples/creating-the-editor-hello-world.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-editor-hello-world","js":"//---------------------------------------------------\n// Creating the editor > Hello world!\n//---------------------------------------------------\n\n// The Monaco Editor can be easily created, given an\n// empty container and an options literal.\n// Two members of the literal are \"value\" and \"language\".\n// The editor takes the full size of its container.\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/creating-the-editor-syntax-highlighting-for-html-elements.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"creating-the-editor-syntax-highlighting-for-html-elements","js":"//---------------------------------------------------\n// Creating the editor > Syntax highlighting for HTML elements\n//---------------------------------------------------\n\n// The colorizeElement-function will read the data-lang-attribute\n// from the element to select the correct language mode. In this\n// sample it is text/css.\nmonaco.editor.colorizeElement(document.getElementById('code'));\n","html":"<pre id=\"code\" data-lang=\"text/css\" style=\"width:500px;\">\n/* Some example CSS */\n\n@import url(\"something.css\");\n\nbody {\n margin: 0;\n padding: 3em 6em;\n font-family: tahoma, arial, sans-serif;\n color: #000;\n}\n\n#navigation a {\n font-weight: bold;\n text-decoration: none !important;\n}\n\nh1 {\n font-size: 2.5em;\n}\n\nh2 {\n font-size: 1.7em;\n}\n\nh1:before, h2:before {\n content: \"some contents\";\n}\n\ncode {\n font-family: courier, monospace;\n font-size: 80%;\n color: #418A8A;\n}\n</pre>\n","css":"\n"});

3
website/playground/samples/customizing-the-appearence-exposed-css-classes.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"customizing-the-appearence-exposed-css-classes","js":"//---------------------------------------------------\n// Customizing the appearence > Exposed CSS classes\n//---------------------------------------------------\n\n// The editor exposes a set of CSS classes that can be overwritten.\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"My to-do list:\\n* buy milk\\n* buy coffee\\n* write awesome code\",\n\tlanguage: \"text/plain\",\n\tfontFamily: \"Arial\",\n\tfontSize: 20\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".monaco-editor, .monaco-editor-background {\n\tbackground: #EDF9FA;\n}\n\n/* Cursor */\n.monaco-editor .cursor {\n\tbackground: darkred !important;\n}\n\n/* Current line */\n.monaco-editor .current-line {\n\tbackground: rgba(0, 0, 255, 0.1);\n}\n\n/* Line Numbers */\n.monaco-editor .line-numbers {\n\tbackground-color: #EDF9FA;\n\tcolor: green;\n}\n\n/* Line Decorations */\n.monaco-editor .lines-decorations {\n\tbackground-color: #EDF9FA;\n}\n\n/* Selection */\n.monaco-editor .view-overlays.focused .selected-text {\n\tbackground: rgba(128, 0, 0, 0.2) !important;\n}\n.monaco-editor .view-overlays .selected-text {\n\tbackground: rgba(128, 0, 0, 0.1) !important;\n}\n"});

3
website/playground/samples/customizing-the-appearence-scrollbars.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"customizing-the-appearence-scrollbars","js":"//---------------------------------------------------\n// Customizing the appearence > Scrollbars\n//---------------------------------------------------\n\n// Remember to check out the CSS too!\nvar htmlCode = \"<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\\n<head>\\n\t<!-- HTML comment -->\\n\t<style type=\\\"text/css\\\">\\n\t\t/* CSS comment */\\n\t</style>\\n\t<script type=\\\"javascript\\\">\\n\t\t// JavaScript comment\\n\t</\"+\"script>\\n</head>\\n<body></body>\\n</html>\";\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: htmlCode,\n\tlanguage: \"text/html\",\n\ttheme: \"vs\",\n\tscrollbar: {\n\t\t// Subtle shadows to the left & top. Defaults to true.\n\t\tuseShadows: false,\n\n\t\t// Render vertical arrows. Defaults to false.\n\t\tverticalHasArrows: true,\n\t\t// Render horizontal arrows. Defaults to false.\n\t\thorizontalHasArrows: true,\n\n\t\t// Render vertical scrollbar.\n\t\t// Accepted values: 'auto', 'visible', 'hidden'.\n\t\t// Defaults to 'auto'\n\t\tvertical: 'visible',\n\t\t// Render horizontal scrollbar.\n\t\t// Accepted values: 'auto', 'visible', 'hidden'.\n\t\t// Defaults to 'auto'\n\t\thorizontal: 'visible',\n\n\t\tverticalScrollbarSize: 17,\n\t\thorizontalScrollbarSize: 17,\n\t\tarrowSize: 30\n\t}\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":"/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */\n.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,\n.monaco-editor .decorationsOverviewRuler,\n.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {\n\t background: rgba(230, 230, 230, 255);\n}\n/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */\n.monaco-editor .monaco-scrollable-element .scrollbar.vertical {\n\t background: rgba(0, 0, 0, 0);\n}\n"});

3
website/playground/samples/customizing-the-appearence-tokens-and-colors.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"customizing-the-appearence-tokens-and-colors","js":"//---------------------------------------------------\n// Customizing the appearence > Tokens and colors\n//---------------------------------------------------\n\n// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.\nvar htmlCode = \"<html>\\n<head>\\n\t<!-- HTML comment -->\\n\t<style type=\\\"text/css\\\">\\n\t\t/* CSS comment */\\n\t</style>\\n\t<script type=\\\"javascript\\\">\\n\t\t// JavaScript comment\\n\t</\"+\"script>\\n</head>\\n<body></body>\\n</html>\";\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: htmlCode,\n\tlanguage: \"text/html\",\n\ttheme: \"vs\"\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":"/*\nThese rules customize the \"Visual Studio\" (vs) theme.\n\nToken names can be discovered by:\na) exploring the .css theme files that come with the editor;\nb) inspecting the dom elements rendered by the editor;\n*/\n.monaco-editor.vs .token.comment\t\t{ color: orange; }\n.monaco-editor.vs .token.comment.js\t\t{ color: green; }\n.monaco-editor.vs .token.comment.css\t{ color: blue; }\n"});

3
website/playground/samples/extending-language-services-completion-provider-example.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"extending-language-services-completion-provider-example","js":"//---------------------------------------------------\n// Extending Language Services > Completion provider example\n//---------------------------------------------------\n\nfunction createDependencyProposals() {\n // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),\n // here you could do a server side lookup\n return [\n {\n label: '\"lodash\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"The Lodash library exported as Node.js modules.\",\n insertText: '\"lodash\": \"*\"'\n },\n {\n label: '\"express\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"Fast, unopinionated, minimalist web framework\",\n insertText: '\"express\": \"*\"'\n },\n {\n label: '\"mkdirp\"',\n kind: monaco.languages.CompletionItemKind.Function,\n documentation: \"Recursively mkdir, like <code>mkdir -p</code>\",\n insertText: '\"mkdirp\": \"*\"'\n }\n ];\n}\n\n\nmonaco.languages.registerCompletionItemProvider('json', {\n provideCompletionItems: function(model, position) {\n // find out if we are completing a property in the 'dependencies' object.\n var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});\n\t\tvar match = textUntilPosition.match(/\"dependencies\"\\s*:\\s*{\\s*(\"[^\"]*\"\\s*:\\s*\"[^\"]*\"\\s*,\\s*)*(\"[^\"]*)?$/); if (match) {\n return createDependencyProposals();\n }\n return [];\n }\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n value: \"{\\n\\t\\\"dependencies\\\": {\\n\\t\\t\\n\\t}\\n}\\n\",\n language: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/extending-language-services-configure-javascript-defaults.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"extending-language-services-configure-javascript-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JavaScript defaults\n//---------------------------------------------------\n\n// Add additonal d.ts files to the JavaScript language service and change.\n// Also change the default compilation options.\n// The sample below shows how a class Facts is declared and introduced\n// to the system and how the compiler is told to use ES6 (target=2).\n\n// validation settings\nmonaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n\tnoSemanticValidation: true,\n\tnoSyntaxValidation: false\n});\n\n// compiler options\nmonaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n\ttarget: monaco.languages.typescript.ScriptTarget.ES6,\n\tallowNonTsExtensions: true\n});\n\n// extra libraries\nmonaco.languages.typescript.javascriptDefaults.addExtraLib([\n\t'declare class Facts {',\n\t' /**',\n\t' * Returns the next fact',\n\t' */',\n\t' static next():string',\n\t'}',\n].join('\\n'), 'filename/facts.d.ts');\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'',\n\t\"class Chuck {\",\n\t\" greet() {\",\n\t\" return Facts.next();\",\n\t\" }\",\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/extending-language-services-configure-json-defaults.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"extending-language-services-configure-json-defaults","js":"//---------------------------------------------------\n// Extending Language Services > Configure JSON defaults\n//---------------------------------------------------\n\n// Configures two JSON schemas, with references.\n\nmonaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n\tschemas: [{\n uri: \"http://myserver/foo-schema.json\",\n schema: {\n type: \"object\",\n properties: {\n p1: {\n enum: [ \"v1\", \"v2\"]\n },\n p2: {\n $ref: \"http://myserver/bar-schema.json\"\n }\n }\n }\n },{\n uri: \"http://myserver/bar-schema.json\",\n schema: {\n type: \"object\",\n properties: {\n q1: {\n enum: [ \"x1\", \"x2\"]\n }\n }\n }\n }]\n});\n\n\nvar jsonCode = [\n\t'{',\n\t' \"$schema\": \"http://myserver/foo-schema.json\"',\n\t\"}\"\n].join('\\n');\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsonCode,\n\tlanguage: \"json\"\n});","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/extending-language-services-custom-languages.js
View File

File diff suppressed because one or more lines are too long

3
website/playground/samples/extending-language-services-hover-provider-example.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"extending-language-services-hover-provider-example","js":"//---------------------------------------------------\n// Extending Language Services > Hover provider example\n//---------------------------------------------------\n\n\nmonaco.languages.register({ id: 'mySpecialLanguage' });\n\nmonaco.languages.registerHoverProvider('mySpecialLanguage', {\n\tprovideHover: function(model, position) {\n\t\treturn xhr('../playground.html').then(function(res) {\n\t\t\treturn {\n\t\t\t\trange: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),\n\t\t\t\tcontents: [\n\t\t\t\t\t'**SOURCE**',\n\t\t\t\t\t{ language: 'html', value: res.responseText.substring(0, 200) }\n\t\t\t\t]\n\t\t\t}\n\t\t});\n\t}\n});\n\nmonaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: '\\n\\nHover over this text',\n\tlanguage: 'mySpecialLanguage'\n});\n\nfunction xhr(url) {\n\tvar req = null;\n\treturn new monaco.Promise(function(c,e,p) {\n\t\treq = new XMLHttpRequest();\n\t\treq.onreadystatechange = function () {\n\t\t\tif (req._canceled) { return; }\n\n\t\t\tif (req.readyState === 4) {\n\t\t\t\tif ((req.status >= 200 && req.status < 300) || req.status === 1223) {\n\t\t\t\t\tc(req);\n\t\t\t\t} else {\n\t\t\t\t\te(req);\n\t\t\t\t}\n\t\t\t\treq.onreadystatechange = function () { };\n\t\t\t} else {\n\t\t\t\tp(req);\n\t\t\t}\n\t\t};\n\n\t\treq.open(\"GET\", url, true );\n\t\treq.responseType = \"\";\n\n\t\treq.send(null);\n\t}, function () {\n\t\treq._canceled = true;\n\t\treq.abort();\n\t});\n}\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/interacting-with-the-editor-adding-a-command-to-an-editor-instance.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-adding-a-command-to-an-editor-instance","js":"//---------------------------------------------------\n// Interacting with the editor > Adding a command to an editor instance\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);\nvar myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);\n\neditor.addCommand(monaco.KeyCode.Tab, function() {\n // services available in `ctx`\n alert('my command is executing!');\n\n}, 'myCondition1 && myCondition2')\n\nmyCondition1.set(true);\n\nsetTimeout(function() {\n alert('now enabling also myCondition2, try pressing Tab!');\n myCondition2.set(true);\n // you can use myCondition2.reset() to go back to the default\n}, 2000);","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/interacting-with-the-editor-adding-an-action-to-an-editor-instance.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-adding-an-action-to-an-editor-instance","js":"//---------------------------------------------------\n// Interacting with the editor > Adding an action to an editor instance\n//---------------------------------------------------\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: [\n\t\t'',\n\t\t'class Example {',\n\t\t'\\tprivate m:number;',\n\t\t'',\n\t\t'\\tpublic met(): string {',\n\t\t'\\t\\treturn \"Hello world!\";',\n\t\t'\\t}',\n\t\t'}'\n\t].join('\\n'),\n\tlanguage: \"typescript\"\n});\n\n// Explanation:\n// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)\n// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)\n// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)\n// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled\n// Press Ctrl-F10 => the action will run if it is enabled\n\neditor.addAction({\n\t// An unique identifier of the contributed action.\n\tid: 'my-unique-id',\n\n\t// A label of the action that will be presented to the user.\n\tlabel: 'My Label!!!',\n\n\t// An optional array of keybindings for the action.\n\tkeybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],\n\n\tkeybindingContext: null,\n\n\t// Control if the action should show up in the context menu and where.\n\t// Built-in groups:\n\t// 1_goto/* => e.g. 1_goto/1_peekDefinition\n\t// 2_change/* => e.g. 2_change/2_format\n\t// 3_edit/* => e.g. 3_edit/1_copy\n\t// 4_tools/* => e.g. 4_tools/1_commands\n\t// You can also create your own group.\n\t// Defaults to null (don't show in context menu).\n\tcontextMenuGroupId: '2_change/2_bla',\n\n\t// Method that will be executed when the action is triggered.\n\t// @param editor The editor instance is passed in as a convinience\n\trun: function(ed) {\n\t\talert(\"i'm running => \" + ed.getPosition());\n\t\treturn null;\n\t},\n\n\t// Optional enablement conditions. All members are optional\n\tenablement: {\n\t\t// The action is enabled only if text in the editor is focused (e.g. blinking cursor).\n\t\t// Warning: This condition will be disabled if the action is marked to be displayed in the context menu\n\t\t// Defaults to false.\n\t\ttextFocus: true,\n\n\t\t// The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).\n\t\t// Defaults to false.\n\t\t//widgetFocus: true,\n\n\t\t// The action is enabled only if the editor is not in read only mode.\n\t\t// Defaults to false.\n\t\t//writeableEditor: true,\n\n\t\t// The action is enabled only if the cursor position is over a word (i.e. not whitespace).\n\t\t// Defaults to false.\n\t\twordAtPosition: true,\n\n\t\t// The action is enabled only if the cursor position is over tokens of a certain kind.\n\t\t// Defaults to no tokens required.\n\t\ttokensAtPosition: ['identifier', '', 'keyword'],\n\t}\n});\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});

3
website/playground/samples/interacting-with-the-editor-customizing-the-line-numbers.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-customizing-the-line-numbers","js":"//---------------------------------------------------\n// Interacting with the editor > Customizing the line numbers\n//---------------------------------------------------\n\nfunction lineNumbersFunc(originalLineNumber) {\n\tvar map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];\n\tif (originalLineNumber < map.length) {\n\t\treturn map[originalLineNumber];\n\t}\n\treturn originalLineNumber;\n}\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tlineNumbers: lineNumbersFunc\n});\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});

3
website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-line-and-inline-decorations","js":"//---------------------------------------------------\n// Interacting with the editor > Line and Inline decorations\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\"\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{ range: new monaco.Range(3,1,5,1), options: { isWholeLine: true, linesDecorationsClassName: 'myLineDecoration' }},\n\t{ range: new monaco.Range(7,1,7,24), options: { inlineClassName: 'myInlineDecoration' }},\n]);\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myInlineDecoration {\n\tcolor: red !important;\n\tcursor: pointer;\n\ttext-decoration: underline;\n\tfont-weight: bold;\n\tfont-style: oblique;\n}\n.myLineDecoration {\n\tbackground: lightblue;\n\twidth: 5px !important;\n\tleft: 3px;\n}\n"});

3
website/playground/samples/interacting-with-the-editor-listening-to-key-events.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-listening-to-key-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to key events\n//---------------------------------------------------\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: \"function hello() {\\n\\talert('Hello world!');\\n}\",\n\tlanguage: \"javascript\"\n});\n\nvar myBinding = editor.addCommand(monaco.KeyCode.F9, function() {\n\talert('F9 pressed!');\n});\n\n// When cleaning up remember to call myBinding.dispose()\n","html":"<div id=\"container\" style=\"height:100%\"></div>\n","css":"\n"});

3
website/playground/samples/interacting-with-the-editor-listening-to-mouse-events.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-listening-to-mouse-events","js":"//---------------------------------------------------\n// Interacting with the editor > Listening to mouse events\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true,\n\tnativeContextMenu: false\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// Add a zone to make hit testing more interesting\nvar viewZoneId = null;\neditor.changeViewZones(function(changeAccessor) {\n\t\tvar domNode = document.createElement('div');\n\t\tdomNode.style.background = 'lightgreen';\n\t\tviewZoneId = changeAccessor.addZone({\n\t\t\t\t\tafterLineNumber: 3,\n\t\t\t\t\theightInLines: 3,\n\t\t\t\t\tdomNode: domNode\n\t\t});\n});\n\n// Add a content widget (scrolls inline with text)\nvar contentWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.content.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My content widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn {\n\t\t\tposition: {\n\t\t\t\tlineNumber: 7,\n\t\t\t\tcolumn: 8\n\t\t\t},\n\t\t\tpreference: [monaco.editor.ContentWidgetPositionPreference.ABOVE, monaco.editor.ContentWidgetPositionPreference.BELOW]\n\t\t};\n\t}\n};\neditor.addContentWidget(contentWidget);\n\n// Add an overlay widget\nvar overlayWidget = {\n\tdomNode: null,\n\tgetId: function() {\n\t\treturn 'my.overlay.widget';\n\t},\n\tgetDomNode: function() {\n\t\tif (!this.domNode) {\n\t\t\tthis.domNode = document.createElement('div');\n\t\t\tthis.domNode.innerHTML = 'My overlay widget';\n\t\t\tthis.domNode.style.background = 'grey';\n\t\t\tthis.domNode.style.right = '30px';\n\t\t\tthis.domNode.style.top = '50px';\n\t\t}\n\t\treturn this.domNode;\n\t},\n\tgetPosition: function() {\n\t\treturn null;\n\t}\n};\neditor.addOverlayWidget(overlayWidget);\n\nvar output = document.getElementById('output');\nfunction showEvent(str) {\n\twhile(output.childNodes.length > 6) {\n\t\toutput.removeChild(output.firstChild.nextSibling.nextSibling);\n\t}\n\toutput.appendChild(document.createTextNode(str));\n\toutput.appendChild(document.createElement('br'));\n}\n\n\n\neditor.onMouseMove(function (e) {\n\tshowEvent('mousemove - ' + e.target.toString());\n});\neditor.onMouseDown(function (e) {\n\tshowEvent('mousedown - ' + e.target.toString());\n});\neditor.onContextMenu(function (e) {\n\tshowEvent('contextmenu - ' + e.target.toString());\n});\neditor.onMouseLeave(function (e) {\n\tshowEvent('mouseleave');\n});\n","html":"<div id=\"output\" style=\"height:29%;font-family:'Courier New', monospace;\">Last 3 events:<br/></div>\n<div style=\"background:#ccc;height:1%\"></div>\n<div id=\"container\" style=\"height:70%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});

3
website/playground/samples/interacting-with-the-editor-rendering-glyphs-in-the-margin.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-rendering-glyphs-in-the-margin","js":"//---------------------------------------------------\n// Interacting with the editor > Rendering glyphs in the margin\n//---------------------------------------------------\n\nvar jsCode = [\n\t'\"use strict\";',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};'\n].join('\\n');\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCode,\n\tlanguage: \"javascript\",\n\tglyphMargin: true\n});\n\nvar decorations = editor.deltaDecorations([], [\n\t{\n\t\trange: new monaco.Range(3,1,3,1),\n\t\toptions: {\n\t\t\tisWholeLine: true,\n\t\t\tclassName: 'myContentClass',\n\t\t\tglyphMarginClassName: 'myGlyphMarginClass'\n\t\t}\n\t}\n]);\n\n// You can now use `decorations` to change or remove the decoration\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":".myGlyphMarginClass {\n\tbackground: red;\n}\n.myContentClass {\n\tbackground: lightblue;\n}\n"});

3
website/playground/samples/interacting-with-the-editor-revealing-a-position.js
View File

@ -1,3 +0,0 @@
// This is a generated file. Please do not edit directly.
var SAMPLES = this.SAMPLES || [];
SAMPLES.push({"id":"interacting-with-the-editor-revealing-a-position","js":"//---------------------------------------------------\n// Interacting with the editor > Revealing a position\n//---------------------------------------------------\n\nvar jsCodeArr = [\n\t'// ------------------------------',\n\t'// ------------------------------',\n\t'function Person(age) {',\n\t'\tif (age) {',\n\t'\t\tthis.age = age;',\n\t'\t}',\n\t'}',\n\t'Person.prototype.getAge = function () {',\n\t'\treturn this.age;',\n\t'};',\n\t'',\n\t''\n];\n\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\njsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));\n\njsCodeArr[49] += 'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';\n\nvar editor = monaco.editor.create(document.getElementById(\"container\"), {\n\tvalue: jsCodeArr.join('\\n'),\n\tlanguage: \"javascript\"\n});\n\neditor.revealPositionInCenter({ lineNumber: 50, column: 120 });\n// Also see:\n// - editor.revealLine\n// - editor.revealLineInCenter\n// - editor.revealLineInCenterIfOutsideViewport\n// - editor.revealLines\n// - editor.revealLinesInCenter\n// - editor.revealLinesInCenterIfOutsideViewport\n// - editor.revealPosition\n// - editor.revealPositionInCenter\n// - editor.revealPositionInCenterIfOutsideViewport\n// - editor.revealRange\n// - editor.revealRangeInCenter\n// - editor.revealRangeInCenterIfOutsideViewport\n","html":"<div id=\"container\" style=\"height:100%;\"></div>\n","css":""});