index.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello World!</title>
  6. <link
  7. rel="stylesheet"
  8. data-name="vs/editor/editor.main"
  9. href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
  10. />
  11. </head>
  12. <body>
  13. <h1>Hello World!</h1>
  14. <div id="container" style="width: 500px; height: 300px; border: 1px solid #ccc"></div>
  15. </body>
  16. <script>
  17. // Monaco uses a custom amd loader that over-rides node's require.
  18. // Keep a reference to node's require so we can restore it after executing the amd loader file.
  19. var nodeRequire = require;
  20. </script>
  21. <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
  22. <script>
  23. // Save Monaco's amd require and restore Node's require
  24. var amdRequire = require;
  25. require = nodeRequire;
  26. require.nodeRequire = require;
  27. </script>
  28. <script>
  29. amdRequire.config({
  30. baseUrl: 'node_modules/monaco-editor/min'
  31. });
  32. // workaround monaco-css not understanding the environment
  33. self.module = undefined;
  34. // workaround monaco-typescript not understanding the environment
  35. self.process.browser = true;
  36. amdRequire(['vs/editor/editor.main'], function () {
  37. var editor = monaco.editor.create(document.getElementById('container'), {
  38. value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
  39. language: 'javascript'
  40. });
  41. });
  42. </script>
  43. </html>