neocities/views/tutorial/layout.erb

<section class="section tutorial">
  <div class="row">
    <% if request.path =~ /\/html\/10?/ %>
    <div class="col col-100 lesson">
    <% else %>
    <div class="col col-60 lesson">
    <% end %>
      <h1><%= @section.upcase %> Tutorial</h1>
      <h2 class="subtitle">Page <%= @page %>/10</h2>

      <%== erb "tutorial/#{@section}/#{@page}".to_sym, layout: false %>
    </div>

    <% if request.path =~ /\/html\/10?/ %>
    <% else %>

    <div class="col col-40 interact">
      <% if request.path =~ /\/html\/9/ %>
      <div style="float: left">
        <p>Saving your tutorial work will replace anything currently in your <a href="<%= current_site.uri %>/index.html">index.html</a>. If you've modified it before, make sure there isn't anything valuable there before you proceed!</p>
        <a href="/tutorial/html/10" class="btn cancel float-Left">Don't Save</a>
        <a href="#" id="saveToSite" class="btn btn-Action float-Left" style="margin-right: 7px">Save to <%= current_site.username %>.neocities.org</a>
      </div>
      <% else %>
      <input id="submit" class="btn btn-Action" type="submit" value="Save">
      <input id="reset" class="btn cancel" style="margin-right: 7px" type="submit" value="Reset">
      <% end %>
      <h3 class="editor-heading">HTML</h3>

      <div id="editor" class="editor" style="height: 300px"><%== encoding_fix default_tutorial_html %></div>
        <script src="/monaco/min/vs/loader.js"></script>
        <script>
          window.MonacoEnvironment = {
            getWorkerUrl: function(workerId, label) {
              return `/monaco/min/vs/base/worker/workerMain.js`;
            }
          };
          require.config({ paths: { 'vs': '/monaco/min/vs' } });

          require(['vs/editor/editor.main'], function() {
            let code = $('#editor').text();
            $('#editor').text('');

            $(document).ready(function() {
              editor = monaco.editor.create(document.getElementById('editor'), {
                value: code,
                language: 'html',
                fontSize: 14,
                automaticLayout: true,
                scrollBeyondLastLine: false,
                wordWrap: 'on',
                wrappingIndent: 'same',
                tabSize: 2,
                  minimap: { enabled: false },
                  padding: {
                    bottom: 25
                  },
                fixedOverflowWidgets: true,
                suggestOnTriggerCharacters: false,
                quickSuggestions: false,
                parameterHints: {
                  enabled: false
                },
                theme: 'vs-dark'
              });

              window.editor.getModel().onDidChangeContent((event) => {
                $('.error').css('display', 'none')
                refreshIframe()
              });
              /*
              editor = ace.edit("editor")
              editor.setTheme('ace/theme/tomorrow_night')
              editor.getSession().setMode("ace/mode/html")
              editor.getSession().setTabSize(2)
              editor.getSession().setUseWrapMode(true)
              editor.setFontSize(14)
              editor.setShowPrintMargin(false)
              editor.setOptions({
                maxLines: Infinity,
                autoScrollEditorIntoView: true
              })

              // Disable autocomplete
              editor.setBehavioursEnabled(false)

              editor.on('change', function(obj) {
                $('.error').css('display', 'none')
                refreshIframe()
              })

              editor.commands.addCommand({
                name: 'saveCommand',
                bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
                exec: function(editor) {
                  $('#submit').click()
                }
              })
              */

              refreshIframe()
            })
          })
        </script>

        <div class="error" style="display: none; margin-top: 0"></div>

        <h3 id="sitePreview">Site Preview</h3>
        <iframe class="preview" style="background: white"></iframe>
      </div>
    </div>

    <% end %>

  </div>
</section>

<script type="text/javascript">
  var infoObj = $('.error')

  String.prototype.tutorialMatches = function(regex, opts) {
    if(!opts)
      var opts = 'gis'

    var result = this.match(new XRegExp(regex, opts))

    if(result == null)
      return false

    return true
  }

  function notok(msg) {
    displayInfo('<i class="fa fa-exclamation-triangle"></i> ' + msg, {
      background: '#93771B'
    })
  }

  function ok(msg, path) {
    displayInfo(msg, {
      background: '#88d128'
    })

    setTimeout(function() {
      window.location.href = path
    }, 1000)
  }

  function displayInfo(html, cssOpts) {
    infoObj.fadeIn('slow')
    infoObj.css(cssOpts)
    infoObj.html(html)
  }

  $('.tutorial #submit').on('click', function() {
    var result = checkHomework()
    if(result == true) {
      window.location.href = '/tutorial/<%= @section %>/<%= @page.to_i+1 %>'
    }
  })

  $('.tutorial #reset').on('click', function() {
    var editor = $('#editor')
    editor.val(editor.text())
  })

  var tutorialHtml = sessionStorage.getItem('tutorialHtml')
  if(tutorialHtml)
    $('#editor').text(tutorialHtml)

  function refreshIframe() {
    if(typeof editor !== 'undefined')
      $('.tutorial iframe').contents().find('html').html(editor.getValue())
  }

  function preview() {
    return $('.tutorial iframe').contents()
  }

</script>
<script src="/js/xregexp-min.js"></script>