Update

Readme.md

@@ -18,6 +18,10 @@ Tables support these:
 
     {: .-shortcuts}
 
+Pre's support these:
+
+    {: .-setup}
+
 Each sheet supports these metadata:
 
 ```yml

_sass/2017/components/main-heading.scss

@@ -28,6 +28,7 @@
     display: flex;
   }
 
+  // Desktop
   @media (min-width: 541px) {
     & {
       align-items: flex-end; // bottom alighn
@@ -40,6 +41,7 @@
     // Advertisement
     & > .ad {
       flex: 0 1 auto;
+      margin-bottom: 16px;
     }
   }
 

_sass/2017/markdown/code.scss

@@ -49,6 +49,10 @@
   }
 }
 
+.MarkdownBody pre.-setup {
+  background: $gray-bg;
+}
+
 /*
  * Syntax kighlight
  */

_sass/2017/utils/heading-style.scss

@@ -4,7 +4,7 @@
   margin-bottom: 16px;
   padding-bottom: 16px;
   margin-top: 64px;
-  border-bottom: solid 1px $line-color;
+  border-bottom: solid 1px $dark-line-color;
 
   @media (max-width: 768px) {
     margin: $gutter / 2;

react.md

@@ -18,6 +18,7 @@ Components
 import React from 'react'
 import ReactDOM from 'react-dom'
 ```
+{: .-setup}
 
 ```jsx
 class Hello extends React.Component {
@@ -41,6 +42,7 @@ Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hack
 ```html
 <Video fullscreen={true} />
 ```
+{: .-setup}
 
 ```jsx
 render () {
@@ -243,6 +245,7 @@ Property validation
 ```js
 import PropTypes from 'prop-types'
 ```
+{: .-setup}
 
 See: [Typechecking with PropTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)
 
@@ -355,6 +358,7 @@ MyCo.propTypes = {
 ```html
 <VideoPlayer src="video.mp4" />
 ```
+{: .-setup}
 
 ```jsx
 class VideoPlayer extends React.Component {
@@ -425,6 +429,7 @@ class TodoList extends React.Component {
   }
 }
 ```
+{: data-line="6-7"}
 
 Always supply a `key` property.
 

sh.md

@@ -2,6 +2,7 @@
 title: Bash scripting
 category: CLI
 layout: 2017/sheet
+ads: true
 ---
 
 Getting started