لدي هذا الكود وهو عبارة عن محرر اكواد، ولكن عند تشغيل هذا الكود يملئ المحرر الشاشة كاملا وانا فقط احتاج ان يأخذ مساحه من الصفحه مع عناصر الصفحه الاخرى انا من اقوم بتحديد ابعادها

الكود

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ACE Code Lens demo</title>
    <style type="text/css" media="screen">
      body {
        overflow: hidden;
      }


      #editor {
        margin: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <pre id="editor"></pre>


    <!-- load ace -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ace.js"
      integrity="sha512-4gOhBb0ynE9P/pWgzXZA8AaPsS49vQpZI/AlBpUDKXH+AVZjEq6usVtcbrygkQkM0ztBvCt5AyLPZpN1Fcwnvg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- load ace code_lens extension -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.24.2/ext-code_lens.min.js"
      integrity="sha512-81QPqjkXeCVN8i0OfBEGy3Ix+IwfmHwQ7D103quJuOs18KwgO6ra7L//1ZBU1LVMelSMweA0cAQSPAhXVa9zYQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      var editor = ace.edit('editor');
      editor.session.setMode('ace/mode/html');


      var commandId = 'describeCodeLens';
      editor.commands.addCommand({
        name: commandId,
        exec: function (editor, args) {
          // services available in `ctx`
          alert('CodeLens command called with arguments ' + args);
        },
      });
      editor.commands.addCommand({
        name: 'clearCodeLenses',
        exec: function (editor, args) {
          editor.setOption('enableCodeLens', false);
          codeLens.clear(editor.session);
        },
      });
      editor.setOption('enableCodeLens', true);


      codeLens.registerCodeLensProvider(editor, {
        provideCodeLenses: function (session, callback) {
          var p = [
            {
              start: { row: 0 },
              command: {
                id: 'clearCodeLenses',
                title: 'Clear all code lenses',
                arguments: [],
              },
            },
          ];
          var l = session.getLength();


          for (var row = 2; row < l; row++) {
            var line = session.getLine(row);
            var endColumn = line.length;


            var m = /[{>]\s*$/.exec(line);
            if (!m) continue;


            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Line ' + (row + 1),
                arguments: ['line', row],
              },
            });


            if (m.index < 10) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              end: {
                row: row,
                column: m.index + 1,
              },
              command: {
                id: commandId,
                title: 'column ' + endColumn,
                arguments: ['column', endColumn],
              },
            });


            if (m.index < 30) continue;
            p.push({
              start: {
                row: row,
                column: m.index,
              },
              command: {
                id: commandId,
                title: 'Third Link',
                arguments: ['3', row],
              },
            });
          }
          callback(null, p);
        },
      });


      window.editor = editor;
      window.codeLens = codeLens;
    </script>


    <!-- <script src="./show_own_source.js"></script> -->
  </body>
</html>