diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index ce58638d07..f11750b61f 100644
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@@ -25,29 +25,48 @@ mixin makeTabs(path, fileNames, tabNames, stylePatterns)
         code-pane(language="#{language}" name="#{tabName}" format="#{format}")
             != getFrag(extPath + fileName + ".md", sps)
 
+mixin makeJson(path, fileName, title, stylePatterns)
+  - var language = attributes.language || getExtn(fileName);
+  - var format = attributes.format || "linenums";
+  - var extPath = getPathToFrags() + path + "/";
+  if (title)
+    .example-title #{title}
+  code-example(language="#{language}" format="#{format}")
+    != getFrag(extPath + fileName + ".md", stylePatterns)
+
+//---------------------------------------------------------------------------------------------------------
 
 - var getFrag = function(fileName, stylePatterns) {
 -   var frag = partial(fileName);
 -   if (frag == null) {
--     return "BAD FILENAME: " + fileName + "   Current path: " + current.path +  " Fragment path: " + current.pathToFrags;
+-     return "BAD FILENAME: " + fileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs();
 -   } else {
 -     // ``` gets translated to <pre><code>.....</code></pre> and we need
 -     // to remove this from the fragment prefix is 11 long and suffix is 13 long
 -     var r = frag.substring(11, frag.length-13);
--     if (stylePatterns) {
--        for (var styleName in stylePatterns) {
--          var rxs = stylePatterns[styleName];
--          rxs = Array.isArray(rxs) ? rxs : [rxs];
--          rxs.forEach(function(rx) {
--            r = annotate(r, styleName, rx );
--          });
--        }
--     }
--     return r;
+-     // Uncomment next line for debugging.
+-     // r = "FileName: " + fileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs() + "\n" + r;
+-     return styleString(r, stylePatterns);
 -   }
 - }
 
-- var annotate = function(str, styleName, rx) {
+- var styleString = function(source, stylePatterns) {
+-   if (stylePatterns) {
+-      for (var styleName in stylePatterns) {
+-        var rxs = stylePatterns[styleName];
+-        rxs = Array.isArray(rxs) ? rxs : [rxs];
+-        rxs.forEach(function(rx) {
+-          source = applyStyle(source, styleName, rx );
+-        });
+-      }
+-   }
+-  return source;
+- }
+
+//- styles a string according to a regular expression.
+//- The match groups resulting from the regexp application are what is styled
+//- (not the whole regexp).
+- var applyStyle = function(str, styleName, rx) {
 -   var repls = {};
 -   var matches;
 -   do {
@@ -72,10 +91,66 @@ mixin makeTabs(path, fileNames, tabNames, stylePatterns)
 -   return ix > 0 ? fileName.substr(ix+1) : "";
 - }
 
-- var getPathToFrags = function() {
--   var currentPath = current.path;
+- var getPathToDocs = function() {
 -   // simple way to only take as many '../' sections as we need to back up to the 'docs' dir
 -   // from the current document
 -   // we will almost certainly never go 10 or 11 deep but ...
--   return current.pathToFrags || "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/";
+-   return current.pathToDocs || "../../../../../../../../../../../".substr(0, (current.path.length-2)*3);
 - }
+
+- var getPathToFrags = function() {
+-   return getPathToDocs() + "_fragments/";
+- }
+
+- var getPathToExamples = function() {
+-   return getPathToDocs() + "_examples/";
+- }
+
+//- Extract a subset of a json file in a specified order defined
+//- by extractPaths while retaining original order for any
+//- unspecified subobjects.
+//-
+//- based on the principle that JSON.parse(source) constructs objects
+//- in order from the top down in 'source' and JSON.stringify(source) iterates 'source'
+//- properties according to the order in which they were inserted.  ( the spec actually
+//- discourages this assumption but this method will only
+//- run on node (v8) and the assumption seems safe there. )
+- function extractFragment(source, rootPath, extractPaths, space) {
+-   var objSource = JSON.parse(source);
+-   if (rootPath && rootPath.length > 0) {
+-     objSource = getSubObject(objSource, rootPath);
+-   }
+-   var objDest = {};
+-   extractPaths.trim().split(",").forEach(function(dotPath) {
+-     processPath(objSource, objDest, dotPath );
+-   });
+-   var result = JSON.stringify(objDest, null, space);
+-   return result;
+
+- function getSubObject(source, path) {
+-   var nextSource = source;
+-   var pathParts = path.trim().split(".");
+-   while (pathParts.length > 0) {
+-     var nextProp = pathParts.shift();
+-     nextSource = nextSource[nextProp];
+-   }
+-   return nextSource;
+- }
+
+- function processPath(source, dest, dotPath) {
+-   var nextSource = source;
+-   var nextDest = dest;
+-   var pathParts = dotPath.trim().split(".");
+-   while (pathParts.length > 0) {
+-     var nextProp = pathParts.shift();
+-     nextSource = nextSource[nextProp];
+-     if (pathParts.length > 0) {
+-       var val = nextDest[nextProp] || {};
+-       nextDest[nextProp] = val;
+-       nextDest = val;
+-     } else {
+-       nextDest[nextProp] = nextSource;
+-     }
+-   }
+- }
+- }
\ No newline at end of file
diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index a402c12a77..dabdf386a1 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -1,6 +1,7 @@
 include ../../../_includes/_util-fns
 
-- current.pathToFrags = "../../_fragments/";
+//- next line is needed whenever calling makeXXX mixin from within a partial
+- current.pathToDocs = "../../";
 
 #sg-code.showcase.shadow-1
   header.showcase-header
diff --git a/public/docs/_includes/styleguide/_code-examples.old.jade b/public/docs/_includes/styleguide/_code-examples.old.jade
deleted file mode 100644
index 12995b65d2..0000000000
--- a/public/docs/_includes/styleguide/_code-examples.old.jade
+++ /dev/null
@@ -1,101 +0,0 @@
-#sg-code.showcase.shadow-1
-  header.showcase-header
-    h2 Code Examples
-    p Below are some examples of how you can add/customize code examples in a page.
-    
-
-    strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
-    ul
-      li <strong>name</strong> Name displayed in Tab (required for tabs)
-      li <strong>language</strong> javascript, html, etc.
-      li <strong>escape</strong> html (escapes html, woot!)
-      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
-
-      p.
-        Prettify makes a best effort to guess the language but
-        works best with C-like and HTML-like languages. For
-        others, there are special language handlers that are
-        chosen based on language hints. Add a class that matches
-        your desired language (example below uses <strong>.lang-html</strong>)
-
-      code-example(language="html" format="linenums").
-        h1 Title
-        p This is some copy...
-
-    .l-sub-section
-      h3 Code Highlighting
-      p.
-        There are three types of highlights avialable
-        <strong>Outlined</strong>, <strong>Pink</strong>, and
-        <strong>Black</strong>. You can see examples below and
-        the class names needed for each type.
-
-      code-example(format="linenums").
-        // Pink Background Version
-        // class="pnk"
-        var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
-
-        // Black Background Version
-        // class="blk"
-        var night = "The night was pitch <span class='blk'>black</span>.";
-
-        // Outlined Version
-        // class="otl"
-        var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
-
-    .l-sub-section
-      h3 Code Tabs
-      p.
-        Code Tabs are a great way to show different languages and versions
-        of a particular piece of code. When using these tabs make sure the
-        <stron>content is always related</strong>.
-
-      code-tabs
-        code-pane(language="javascript" format="linenums" name="ES5").
-          // ES5
-          var hello = 'blah';
-
-        code-pane(language="javascript" format="linenums" name="TypeScript").
-          // TypeScript
-          var hello = 'blah';
-
-      p To create code tabs simply use the directives below
-      code-example(format="linenums").
-        code-tabs
-          code-pane(format="linenums" name="Tab 1").
-            // TAB 1 CONTENT
-          code-pane(format="linenums" name="Tab 2").
-            // TAB 2 CONTENT
\ No newline at end of file