tidying code examples

Author: rachelandrew

inline-formatting/align.html

@@ -94,25 +94,18 @@
         from the fact.”
       </div>
     </section>
-    <textarea class="playable-css">
-span {
+    <textarea class="playable-css">span {
   font-size: 200%;
   vertical-align: top;
-}
-  </textarea
-    >
+}</textarea>
 
-    <textarea id="code" class="playable-html">
-
-<div class="example horizontal">
+    <textarea id="code" class="playable-html"><div class="example horizontal">
     Before that night—<span>a memorable night</span>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”
 </div>
 
 <div class="example vertical">
     Before that night—<span>a memorable night</span>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”
-</div>
-
-    </textarea>
+</div></textarea>
     <div class="playable-buttons">
       <input id="reset" type="button" value="Reset" />
     </div>

inline-formatting/break.html

@@ -80,20 +80,13 @@
         special inspiration from the fact.”
       </div>
     </section>
-    <textarea class="playable-css">
-span {
+    <textarea class="playable-css">span {
   border: 5px solid rebeccapurple;
-}
-  </textarea
-    >
+}</textarea>
 
-    <textarea id="code" class="playable-html">
-
-<div class="example">
+    <textarea id="code" class="playable-html"><div class="example">
     Before that night—<span>a memorable night, as it was to prove—hundreds of millions of people</span> had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”
-</div>
-
-    </textarea>
+</div></textarea>
     <div class="playable-buttons">
       <input id="reset" type="button" value="Reset" />
     </div>

inline-formatting/inline.html

@@ -82,28 +82,21 @@
         One Two Three
       </div>
     </section>
-    <textarea class="playable-css">
-.horizontal {
+    <textarea class="playable-css">.horizontal {
   writing-mode: horizontal-tb;
 }
 
 .vertical {
   writing-mode: vertical-rl;
-}
-  </textarea
-    >
-
-    <textarea id="code" class="playable-html">
+}</textarea>
 
-<div class="example horizontal">
+    <textarea id="code" class="playable-html"><div class="example horizontal">
   One Two Three
 </div>
 
 <div class="example vertical">
   One Two Three
-</div>
-
-    </textarea>
+</div></textarea>
     <div class="playable-buttons">
       <input id="reset" type="button" value="Reset" />
     </div>

inline-formatting/mbp.html

@@ -86,28 +86,21 @@
 
       <div class="example vertical">One <span>Two</span> Three</div>
     </section>
-    <textarea class="playable-css">
-span {
+    <textarea class="playable-css">span {
   border: 5px solid rebeccapurple;
   padding-inline-start: 20px;
   padding-inline-end: 40px;
   margin-inline-start: 30px;
   margin-inline-end: 10px;
-}
-  </textarea
-    >
+}</textarea>
 
-    <textarea id="code" class="playable-html">
-
-<div class="example horizontal">
+    <textarea id="code" class="playable-html"><div class="example horizontal">
   One <span>Two</span> Three
 </div>
 
 <div class="example vertical">
   One <span>Two</span> Three
-</div>
-
-    </textarea>
+</div></textarea>
     <div class="playable-buttons">
       <input id="reset" type="button" value="Reset" />
     </div>

inline-formatting/text-align.html

@@ -87,24 +87,17 @@
         One Two Three
       </div>
     </section>
-    <textarea class="playable-css">
-.example {
+    <textarea class="playable-css">.example {
   text-align: center;
-}
-  </textarea
-    >
+}</textarea>
 
-    <textarea id="code" class="playable-html">
-
-<div class="example horizontal">
+    <textarea id="code" class="playable-html"><div class="example horizontal">
   One Two Three
 </div>
 
 <div class="example vertical">
   One Two Three
-</div>
-
-    </textarea>
+</div></textarea>
     <div class="playable-buttons">
       <input id="reset" type="button" value="Reset" />
     </div>