Start converting code samples into cleaner markdown chunks

1 files changed, 15 insertions, 15 deletions

diff --git a/posts/css-variables.md b/posts/css-variables.md
index dff8f13..17df49f 100644
--- a/posts/css-variables.md
+++ b/posts/css-variables.md
@@ -8,12 +8,12 @@ The CSS language is becoming even more awesome and powerful everyday. In this qu
 
 Let's just jump right in - this is how you create variables in vanilla CSS:
 
-
-    :root {
-        --base-color: #e0e0e0;
-        --text-color: #111;
-    }
-
+~~~css
+:root {
+  --base-color: #e0e0e0;
+  --text-color: #111;
+}
+~~~
 
 We are using the `:root` selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables.
 
@@ -21,16 +21,16 @@ As for the variables themselves, you declare that they are variables using the `
 
 Now let's use those variables:
 
+~~~css
+.header {
+  border: 1px solid var(--base-color);
+}
 
-    .header {
-        border: 1px solid var(--base-color);
-    }
-    
-    .main-container {
-        background-color: var(--base-color);
-        color: var(--text-color);
-    }
-
+.main-container {
+  background-color: var(--base-color);
+  color: var(--text-color);
+}
+~~~
 
 That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway).