1 files changed, 76 insertions, 77 deletions
diff --git a/posts/better-box-shadows.md b/posts/better-box-shadows.md
index 76d62cd..c268a34 100644
--- a/posts/better-box-shadows.md
+++ b/posts/better-box-shadows.md
@@ -39,32 +39,33 @@ Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has b
 
 Let's take a look at a default configuration of `box-shadow`:
 
-
-    .box-container {
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    }
-
+~~~css
+.box-container {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+}
+~~~
 
 In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*.
 
 We should also add some minimal styling to cleanup the `.box-container` a little bit for our example:
 
-
-    <div class="box-container"></div>
-
-
-    .box-container {
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-        /* Styles to make it less ugly */
-        background: white;
-        border-radius: 10px;
-        border: 1px solid #eee;
-        height: 200px;
-        padding: 10px;
-        position: relative;
-        width: 250px;
-    }
-
+~~~html
+<div class="box-container"></div>
+~~~
+
+~~~css
+.box-container {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+  /* Styles to make it less ugly */
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #eee;
+  height: 200px;
+  padding: 10px;
+  position: relative;
+  width: 250px;
+}
+~~~
 
 Which would render as this:
 
@@ -78,89 +79,87 @@ Not bad - but we can do a lot better than this.
 
 We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to:
 
-
-    <div class="box-container">
-        <div class="box-container-inner"></div>
-    </div>
-
+~~~html
+<div class="box-container">
+  <div class="box-container-inner"></div>
+</div>
+~~~
 
 Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). 
 
 Remember to set this child element behind it's parent by adding `z-index: -1`.
 
-
-    .box-container {
-        /* No box-shadow needed on this element anymore */
-        /* Styles to make it less ugly */
-        background: white;
-        border-radius: 10px;
-        border: 1px solid #eee;
-        height: 200px;
-        padding: 10px;
-        position: relative;
-        width: 250px;
-    }
-
+~~~css
+.box-container {
+  /* No box-shadow needed on this element anymore */
+  /* Styles to make it less ugly */
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #eee;
+  height: 200px;
+  padding: 10px;
+  position: relative;
+  width: 250px;
+}
+~~~
 
 ## Inner Containers
 
 We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling:
 
-
-    .box-container-inner {
-        bottom: 0;
-        /* The box-shadow is added here now */
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        height: 94%;
-        left: 3%;
-        position: absolute;
-        width: 94%;
-        z-index: -1;
-    }
-
+~~~sh
+.box-container-inner {
+  bottom: 0;
+  /* The box-shadow is added here now */
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  height: 94%;
+  left: 3%;
+  position: absolute;
+  width: 94%;
+  z-index: -1;
+}
+~~~
 
 Which will make the drop-shadow render with a little more realistic depth:
 
 
 <div class="box-container-depth"><span class="box-container-depth-inner"></span></div>
 
-
-
 ## But wait - there's more!
 
 We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - `filter:blur();`. 
 
 So your final code would look like this:
 
-
-    .box-container {
-        /* Styles to make it less ugly */
-        background: white;
-        border-radius: 10px;
-        border: 1px solid #eee;
-        height: 200px;
-        padding: 10px;
-        position: relative;
-        width: 250px;
-    }
-    
-    .box-container-inner {
-        bottom: 0;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        filter: blur(6px);
-        height: 94%;
-        left: 3%;
-        position: absolute;
-        width: 94%;
-        z-index: -1;
-    }
-
+~~~css
+.box-container {
+  /* Styles to make it less ugly */
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #eee;
+  height: 200px;
+  padding: 10px;
+  position: relative;
+  width: 250px;
+}
+
+.box-container-inner {
+  bottom: 0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  filter: blur(6px);
+  height: 94%;
+  left: 3%;
+  position: absolute;
+  width: 94%;
+  z-index: -1;
+}
+~~~
 
 Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:
 
 
 <div class="box-container-depth">
-    <span class="box-container-depth-inner blur"></span>
+  <span class="box-container-depth-inner blur"></span>
 </div>