Start converting code samples into cleaner markdown chunks

1 files changed, 16 insertions, 16 deletions

diff --git a/posts/character-unit.md b/posts/character-unit.md
index b88ad45..58b200b 100644
--- a/posts/character-unit.md
+++ b/posts/character-unit.md
@@ -12,28 +12,28 @@ By setting your main containers or text elements with the CSS character unit (`c
 
 Let's say you have an article which will fill the entire length of the screen. Something like this:
 
-
-    <div class="container">
-        <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p>
-        <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p>
-    </div>
-
+~~~html
+<div class="container">
+  <p>Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.</p>
+  <p>Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.</p>
+</div>
+~~~
 
 With this structure, you might normally set the default `max-width` property with your desired maximum width (whatever you believe is the best reading length):
 
-
-    .container {
-        max-width: 38em;
-    }
-
+~~~css
+.container {
+  max-width: 38em;
+}
+~~~
 
 This works - but it isn't ideal. Time for character units to save the day! You will still target the `max-width` property but this time we set it to use the `ch` value like so:
 
-
-    .container {
-        max-width: 66ch;
-    }
-
+~~~css
+.container {
+  max-width: 66ch;
+}
+~~~
 
 This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort.