Update README.md

pierreburel · Feb 6, 2015 · c8c3eb1 · c8c3eb1
1 parent c151fb8
commit c8c3eb1
Showing 1 changed file with 58 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -22,62 +22,70 @@ bower install sass-rem
 
 Import `_rem.scss`, set the html font-size to 62.5% (depending of `$rem-baseline`) and use the `rem` mixin or function :
 
-    @import "rem";
-
-    html {
-      font-size: 62.5%;
-    }
-
-    h1 {
-      @include rem(font-size, 24px); // Simple
-      @include rem(border-bottom, 1px solid black); // Shorthand
-      @include rem(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Multiple values
-      text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values, warning: no fallback possible with rem function
-      // Map support (Sass 3.3+)
-      @include rem((
-        margin: 20px 1rem,
-        padding: 10px
-      ));
-    }
+```scss
+@import "rem";
+
+html {
+  font-size: 62.5%;
+}
+
+h1 {
+  @include rem(font-size, 24px); // Simple
+  @include rem(border-bottom, 1px solid black); // Shorthand
+  @include rem(box-shadow, 0 0 2px #ccc, inset 0 0 5px #eee); // Multiple values
+  text-shadow: rem(1px 1px #eee, -1px -1px #eee); // Function and multiple values, warning: no fallback possible with rem function
+  // Map support (Sass 3.3+)
+  @include rem((
+    margin: 20px 1rem,
+    padding: 10px
+  ));
+}
+```
 
 That will output :
 
-    html {
-      font-size: 62.5%;
-    }
-
-    h1 {
-      font-size: 24px;
-      font-size: 2.4rem;
-      border-bottom: 1px solid black;
-      border-bottom: 0.1rem solid black;
-      box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
-      box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
-      text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; // No fallback
-      margin: 20px 10px;
-      margin: 2rem 1rem;
-      padding: 10px;
-      padding: 1rem;
-    }
+```css
+html {
+  font-size: 62.5%;
+}
+
+h1 {
+  font-size: 24px;
+  font-size: 2.4rem;
+  border-bottom: 1px solid black;
+  border-bottom: 0.1rem solid black;
+  box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
+  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
+  text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee; // No fallback
+  margin: 20px 10px;
+  margin: 2rem 1rem;
+  padding: 10px;
+  padding: 1rem;
+}
+```
 
 You can disable pixel fallback by setting `$rem-fallback` to `false` :
 
-    h1 {
-      font-size: 2.4rem;
-      border-bottom: 0.1rem solid black;
-      box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
-      text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee;
-      margin: 2rem 1rem;
-      padding: 1rem;
-    }
+```css
+h1 {
+  font-size: 2.4rem;
+  border-bottom: 0.1rem solid black;
+  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee;
+  text-shadow: 0.1rem 0.1rem #eee, -0.1rem -0.1rem #eee;
+  margin: 2rem 1rem;
+  padding: 1rem;
+}
+```
 
 You can totally disable rem units by setting `$rem-px-only` to `true` (lt-ie9 only stylesheet for example) :
 
-    h1 {
-      font-size: 24px;
-      border-bottom: 1px solid black;
-      box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
-      text-shadow: 1px 1px #eee, -1px -1px #eee; // Fallback works here
-      margin: 20px 10px;
-      padding: 10px;
-    }
+```css
+h1 {
+  font-size: 24px;
+  border-bottom: 1px solid black;
+  box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
+  text-shadow: 1px 1px #eee, -1px -1px #eee; // Fallback works here
+  margin: 20px 10px;
+  padding: 10px;
+}
+```