Autoscoping (#103)

* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction

snippets/box-sizing-reset.md

@@ -2,38 +2,41 @@
 
 Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.
 
+#### HTML
+
+```html
+<div class="box">border-box</div>
+<div class="box content-box">content-box</div>
+```
+
 #### CSS
 
 ```css
 html {
   box-sizing: border-box;
 }
-
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
+.box {
+  display: inline-block;
+  width: 150px;
+  height: 150px;
+  padding: 10px;
+  background: tomato;
+  color: white;
+  border: 10px solid red;
+}
+.content-box {
+  box-sizing: content-box;
+}
+
 ```
 
 #### Demo
 
-<div class="snippet-demo">
-  <div class="snippet-demo__box-sizing-reset">Demo</div>
-</div>
-
-<style>
-.snippet-demo__box-sizing-reset {
-  box-sizing: border-box;
-  width: 200px;
-  padding: 1.5em;
-  color: #7983ff;
-  font-family: sans-serif;
-  background-color: white;
-  border: 5px solid;
-}
-</style>
-
 #### Explanation
 
 1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`.