CodeMirror preview by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

formmethodDefinisce il metodo di invio dei dati oltre a method
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
langSpecifica la lingua del contenuto di un elemento
<object>Incorpora risorse varie nella pagina web.
<aside>Definisce un contenuto separato dal testo perincipale
<video>Integra e controlla video in una pagina HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

test-wrap-with-grid

Esercitazione 1ù

esercizio 1.1-1.6

INFORMATICA - ESERCIZIO 1 RISOLTO

Orario 5G A.S. 2024 - 2025

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<link rel=stylesheet href="https://codemirror.net/5/lib/codemirror.css">
<script src="https://codemirror.net/5/lib/codemirror.js">
</script>
<script src="https://codemirror.net/5/mode/xml/xml.js">
</script>
<script src="https://codemirror.net/5/mode/javascript/javascript.js">
</script>
<script src="https://codemirror.net/5/mode/css/css.js">
</script>
<h2>HTML5 preview
</h2>
<textarea id="code" name="code">
  <!doctype html>
  <html>
    <head>
      <meta charset=utf-8>
      <title>HTML5 canvas demo
      </title>
      <style>p {
        font-family: monospace;
        }
      </style>
    </head>
    <body>
      <p>Lorem ipsum orci nulla maecenas ridiculus, trevai laoreet mon euismod casua aenean post els convallis id erat mi sapien filo leo vel commodo sit
      </p>
    </body>
  </html>
      </textarea>
<iframe id=preview>
</iframe>
<style>
  .CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
  }

  iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
  }
</style>
<script type="text/javascript">
  var delay;
      // Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/html'
      }
                                          );
      editor.on("change", function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 300);
      }
               );
      function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
</script>