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/transform-centering.md

@@ -25,32 +25,12 @@ Vertically and horizontally centers a child element within its parent element us
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
+  text-align: center;
 }
 ```
 
 #### Demo
 
-<div class="snippet-demo">
-  <div class="snippet-demo__parent">
-    <div class="snippet-demo__child">Centered content</div>
-  </div>
-</div>
-
-<style>
-.snippet-demo__parent {
-  border: 1px solid #333;
-  height: 250px;
-  position: relative;
-  width: 250px;
-}
-.snippet-demo__child {
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>
-
 #### Explanation
 
 1. `position: absolute` on the child element allows it to be positioned based on its containing block.