interacting-with-the-editor-customizing-the-line-numbers.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
  3. <html>
  4. <head>
  5. <base href="..">
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  7. </head>
  8. <body>
  9. <style>
  10. /*----------------------------------------SAMPLE CSS START*/
  11. /*----------------------------------------SAMPLE CSS END*/
  12. </style>
  13. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  14. THIS IS A GENERATED FILE VIA `npm run simpleserver`
  15. <div id="bar" style="margin-bottom: 6px;"></div>
  16. <div style="clear:both"></div>
  17. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  18. <!-- ----------------------------------------SAMPLE HTML START-->
  19. <div id="container" style="height: 100%"></div>
  20. <!-- ----------------------------------------SAMPLE HTML END-->
  21. </div>
  22. <div style="clear:both"></div>
  23. <script src="../../metadata.js"></script>
  24. <script src="dev-setup.js"></script>
  25. <script>
  26. loadEditor(function() {
  27. /*----------------------------------------SAMPLE JS START*/
  28. function lineNumbersFunc(originalLineNumber) {
  29. var map = ['O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
  30. if (originalLineNumber < map.length) {
  31. return map[originalLineNumber];
  32. }
  33. return originalLineNumber;
  34. }
  35. var jsCode = [
  36. '"use strict";',
  37. 'function Person(age) {',
  38. ' if (age) {',
  39. ' this.age = age;',
  40. ' }',
  41. '}',
  42. 'Person.prototype.getAge = function () {',
  43. ' return this.age;',
  44. '};'
  45. ].join('\n');
  46. var editor = monaco.editor.create(document.getElementById('container'), {
  47. value: jsCode,
  48. language: 'javascript',
  49. lineNumbers: lineNumbersFunc
  50. });
  51. /*----------------------------------------SAMPLE JS END*/
  52. });
  53. </script>
  54. </body>
  55. </html>