Monaco Editor Browser Build

by Oski Krawczyk

HTML

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/min/vs/editor/editor.main.css"
/>

<div id="container1"></div>

<script>
  var require = { paths: { vs: 'https://unpkg.com/[email protected]/min/vs' } };
</script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<script src="https://unpkg.com/[email protected]/min/vs/editor/editor.main.js"></script>

CSS

#container1 {
  width: 100%; 
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

monaco.editor.defineTheme('vs-jsfiddle', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    {
      token: "identifier",
      foreground: "6ce890"
    },
    {
      token: "identifier.function",
      foreground: "DCDCAA"
    },
    {
      token: "type",
      foreground: "1AAFB0"
    },
    { token: 'string', foreground: 'ff0000' },
    { token: 'keyword', foreground: '00ff00', fontStyle: 'bold' },
    { token: 'type.identifier', foreground: 'cc00cc' }
  ],
  colors: {
    //'editor.background': '1E1E1E',
    //'editor.foreground': 'D4D4D4',
    'editorLineNumber.foreground': '858585'
  }
});
monaco.editor.setTheme('vs-jsfiddle')

var editor_js = monaco.editor.create(document.getElementById('container1'), {
  value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
  language: 'javascript',
  codeLensFontFamily: "",
  roundedSelection: true,
	scrollBeyondLastLine: false,
  scrollbar: {
		// Subtle shadows to the left & top. Defaults to true.
		useShadows: false,
		verticalScrollbarSize: 10,
		horizontalScrollbarSize: 10
	},
  minimap: {
  	enabled: false
  },
  indentSize: 2,
  tabSize: 2,
  insertSpaces: true,
  autoClosingBrackets: true
});