[Docs] Added HTML formatting for syntax highlighting in inline code examples.

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"
+@import "blueprint/typography"

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
+// <pre class="source-code sass">
-//       +blueprint(true)
+// body.blueprint
+//   +blueprint(true)
+// </pre>
 //
 // Scoped by semantic selectors:
-//     body#page-1, body#page-2, body.a-special-page-type
+// <pre class="source-code sass">
-//       +blueprint(true)
+// 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

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>
+// <pre class="source-code html">
-//     <div id="two">Two</div>
+// <div id="one">One</div>
+// <div id="two">Two</div>
+// </pre>
 // Sass:
-//     #one
+// <pre class="source-code sass">
-//       +column(18, true)
+// #one
-//       +prepend(6)
+//   +column(18, true)
-//     #two
+//   +prepend(6)
-//       +column(6)
+// #two
-//       +pull(18, true)
+//   +column(6)
+//   +pull(18, true)
+// </pre>
 @mixin pull($n, $last: false) {
   @include pull-base;
   @include pull-margins($n, $last); }

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
+// <pre class="source-code sass">
-//    +blueprint-print(true)
+// body.blueprint
+//  +blueprint-print(true)
+// </pre>
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
+// <pre class="source-code sass">
-//     +blueprint-print(true)
+// 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
+// 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")
+// <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;

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
+// <pre class="source-code sass">
-//    +rtl-typography(true)
+// body.blueprint
+//  +rtl-typography(true)
+// </pre>
+//
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
+// <pre class="source-code sass">
-//     +rtl-typography(true)
+// body#page-1, body#page-2, body.a-special-page-type
-// Deprecated:
+//   +rtl-typography(true)
-//   You can pass the body selector as the first argument when used as a top-level mixin
+// </pre>
-//   +rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
+//
+// **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 & {

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
+// <pre class="source-code sass">
-//    +blueprint-typography(true)
+// body.blueprint
+//  +blueprint-typography(true)
+// </pre>
+//
 // Scoped by semantic selectors:
-//   body#page-1, body#page-2, body.a-special-page-type
+// <pre class="source-code sass">
-//     +blueprint-typography(true)
+// body#page-1, body#page-2, body.a-special-page-type
-// Deprecated:
+//   +blueprint-typography(true)
-//   You can pass the body selector as the first argument when used as a top-level mixin
+// </pre>
-//   +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type")
+//
+// **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;