diff --git a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass
index bdb89b6e..de63ccc8 100644
--- a/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass
+++ b/frameworks/_blueprint_deprecated_imports/stylesheets/blueprint/_typography.sass
@@ -1,2 +1,2 @@
 @warn "DEPRECATED: blueprint/typography.sass will be removed. Please @import \"blueprint/typography\" instead."
-@import "blueprint/typography"
\ No newline at end of file
+@import "blueprint/typography"
diff --git a/frameworks/blueprint/stylesheets/_blueprint.scss b/frameworks/blueprint/stylesheets/_blueprint.scss
index a12775c4..067f84e5 100644
--- a/frameworks/blueprint/stylesheets/_blueprint.scss
+++ b/frameworks/blueprint/stylesheets/_blueprint.scss
@@ -11,19 +11,27 @@
 // ### Usage examples:
 //
 // As a top-level mixin, apply to any page that includes the stylesheet:
-//     +blueprint
+// <pre class="source-code sass">
+// +blueprint
+// </pre>
 //
 // Scoped by a presentational class:
-//     body.blueprint
-//       +blueprint(true)
+// <pre class="source-code sass">
+// body.blueprint
+//   +blueprint(true)
+// </pre>
 //
 // Scoped by semantic selectors:
-//     body#page-1, body#page-2, body.a-special-page-type
-//       +blueprint(true)
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint(true)
+// </pre>
 //
 // #### Deprecated:
 // You use to be able to pass the body selector as the first argument when used as a top-level mixin
-//      +blueprint("body#page-1, body#page-2, body.a-special-page-type")
+// <pre class="source-code sass">
+// +blueprint("body#page-1, body#page-2, body.a-special-page-type")
+// </pre>
 
 @mixin blueprint($body_selector: body) {
   //@doc off
diff --git a/frameworks/blueprint/stylesheets/blueprint/_grid.scss b/frameworks/blueprint/stylesheets/blueprint/_grid.scss
index b15d0578..78f509e2 100644
--- a/frameworks/blueprint/stylesheets/blueprint/_grid.scss
+++ b/frameworks/blueprint/stylesheets/blueprint/_grid.scss
@@ -189,15 +189,19 @@ $blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns
 // For example:
 //
 // HTML:
-//     <div id="one">One</div>
-//     <div id="two">Two</div>
+// <pre class="source-code html">
+// <div id="one">One</div>
+// <div id="two">Two</div>
+// </pre>
 // Sass:
-//     #one
-//       +column(18, true)
-//       +prepend(6)
-//     #two
-//       +column(6)
-//       +pull(18, true)
+// <pre class="source-code sass">
+// #one
+//   +column(18, true)
+//   +prepend(6)
+// #two
+//   +column(6)
+//   +pull(18, true)
+// </pre>
 @mixin pull($n, $last: false) {
   @include pull-base;
   @include pull-margins($n, $last); }
diff --git a/frameworks/blueprint/stylesheets/blueprint/_print.scss b/frameworks/blueprint/stylesheets/blueprint/_print.scss
index be16259b..9dd020e7 100644
--- a/frameworks/blueprint/stylesheets/blueprint/_print.scss
+++ b/frameworks/blueprint/stylesheets/blueprint/_print.scss
@@ -3,16 +3,24 @@
 
 // Usage examples:
 // As a top-level mixin, apply to any page that includes the stylesheet:
-//   +blueprint-print
+// <pre class="source-code sass">
+// +blueprint-print
+// </pre>
 // Scoped by a presentational class:
-//   body.blueprint
-//    +blueprint-print(true)
+// <pre class="source-code sass">
+// body.blueprint
+//  +blueprint-print(true)
+// </pre>
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
-//     +blueprint-print(true)
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint-print(true)
+// </pre>
 // Deprecated:
-//   You can pass the body selector as the first argument when used as a top-level mixin
-//   +blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
+// You can pass the body selector as the first argument when used as a top-level mixin
+// <pre class="source-code sass">
+// +blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
+// </pre>
 @mixin blueprint-print($body_selector: body) {
   @if $body_selector == true {
     @include blueprint-print-body;
diff --git a/frameworks/blueprint/stylesheets/blueprint/_rtl.scss b/frameworks/blueprint/stylesheets/blueprint/_rtl.scss
index fdd5c35c..4cf281d6 100644
--- a/frameworks/blueprint/stylesheets/blueprint/_rtl.scss
+++ b/frameworks/blueprint/stylesheets/blueprint/_rtl.scss
@@ -76,16 +76,27 @@ $blueprint_container_size: $blueprint_grid_outer_width * $blueprint_grid_columns
 
 // Usage examples:
 // As a top-level mixin, apply to any page that includes the stylesheet:
-//   +rtl-typography
+// <pre class="source-code sass">
+// +rtl-typography
+// </pre>
+//
 // Scoped by a presentational class:
-//   body.blueprint
-//    +rtl-typography(true)
+// <pre class="source-code sass">
+// body.blueprint
+//  +rtl-typography(true)
+// </pre>
+//
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
-//     +rtl-typography(true)
-// Deprecated:
-//   You can pass the body selector as the first argument when used as a top-level mixin
-//   +rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +rtl-typography(true)
+// </pre>
+//
+// **Deprecated**:
+// You can pass the body selector as the first argument when used as a top-level mixin
+// <pre class="source-code sass">
+// +rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
+// </pre>
 @mixin rtl-typography($body_selector: body) {
   @if $body_selector == true {
     html & {
diff --git a/frameworks/blueprint/stylesheets/blueprint/_typography.scss b/frameworks/blueprint/stylesheets/blueprint/_typography.scss
index 044b9d7e..c4264a97 100644
--- a/frameworks/blueprint/stylesheets/blueprint/_typography.scss
+++ b/frameworks/blueprint/stylesheets/blueprint/_typography.scss
@@ -10,16 +10,27 @@ $blueprint-font-size: 12px !default;
 
 // Usage examples:
 // As a top-level mixin, apply to any page that includes the stylesheet:
-//   +blueprint-typography
+// <pre class="source-code sass">
+// +blueprint-typography
+// </pre>
+//
 // Scoped by a presentational class:
-//   body.blueprint
-//    +blueprint-typography(true)
+// <pre class="source-code sass">
+// body.blueprint
+//  +blueprint-typography(true)
+// </pre>
+//
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
-//     +blueprint-typography(true)
-// Deprecated:
-//   You can pass the body selector as the first argument when used as a top-level mixin
-//   +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
+// <pre class="source-code sass">
+// body#page-1, body#page-2, body.a-special-page-type
+//   +blueprint-typography(true)
+// </pre>
+//
+// **Deprecated**:
+// You can pass the body selector as the first argument when used as a top-level mixin
+// <pre class="source-code sass">
+// +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
+// </pre>
 @mixin blueprint-typography($body-selector: body) {
   @if $body-selector == true {
     @include blueprint-typography-body;