diff --git a/demo/index.html b/demo/index.html
index 4a4335ee..0fee6f4a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,8 +23,8 @@
       <div>
         <h3>SerializeAddon</h3>
         <button id="serialize">Serialize the content of terminal</button>
-        <label>write to terminal<input type="checkbox" id="write-to-terminal"></label>
-        <label>Output <code id="serialize-output"></code></label>
+        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
+        <div><pre id="serialize-output"></pre></div>
       </div>
     </div>
     <div>
diff --git a/demo/style.css b/demo/style.css
index 12728289..1ab5dc3c 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -31,8 +31,14 @@ p {
     vertical-align: top;
 }
 
-code {
-    padding: 2px 4px;
+pre {
+    display: block;
+    padding: 9.5px;
+    font-size: 13px;
     color: #c7254e;
     background-color: #f9f2f4;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-wrap: break-word;
 }