monaco-editor/website/playground/samples/interacting-with-the-editor-line-and-inline-decorations.js

// 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 lineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 3,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 5,\n\t\tendColumn: 1\n\t}, {\n\t\tisWholeLine: true,\n\t\tlinesDecorationsClassName: 'myLineDecoration'\n\t});\n});\n\nvar inlineDecorationId = editor.changeDecorations(function(changeAccessor) {\n\treturn changeAccessor.addDecoration({\n\t\tstartLineNumber: 7,\n\t\tstartColumn: 1,\n\t\tendLineNumber: 7,\n\t\tendColumn: 24\n\t}, {\n\t\tinlineClassName: 'myInlineDecoration'\n\t});\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"});