From 363373d405aa3a98c7ac4085e05ceb599b25f7ce Mon Sep 17 00:00:00 2001
From: Alex Wolfe <alex@firebase.com>
Date: Tue, 19 May 2015 08:56:34 -0700
Subject: [PATCH] style guide update

---
 .../_includes/styleguide/_code-examples.jade    | 17 +++++++++++++++++
 public/resources/css/layout/_layout.scss        |  5 +++++
 2 files changed, 22 insertions(+)

diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index c9987f7739..e7b1e31edc 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -11,18 +11,35 @@
       li <strong>format</strong> linenums (or linenums:4 specify starting line)
 
   .showcase-content
+
+    .l-sub-section
+      h3 Inline Code Examples
+
+      p.
+        Inline code example <code ng-non-bindable>{{username}}</code>
+
+      code-example(format="linenums" language="html" escape="html").
+        Inline code example <code ng-non-bindable>{{username}}</code>
+
+      p.
+        Notice the <strong>ng-non-bindable</strong> attribute. This is only
+        needed when using code examples inline <strong>code-tabs and code-example directives
+        automatically do this</strong>.
+
     .l-sub-section
       h3 Adding a code example
 
       code-example(format="linenums" language="html").
         code-example(format="linenums" language="javascript").
           //SOME CODE
+
     .l-sub-section
       h3 Specify starting line number
 
       code-example(language="javascript" format="linenums:4").
         code-example(language="html" format="linenums:4").
           var title = "This starts on line four";
+
     .l-sub-section
       h3 Specify a language
 
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 318808bbb0..02aaa4c104 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -118,6 +118,11 @@
     padding: ($unit * 3) ($unit * 1);
   }
 
+  code {
+    background: $fog;
+    color: $steel;
+  }
+
   &:last-child {
     margin: 0;
   }