Use a monospace font for code

Fixes #136

Author: sgravrock

_tutorials/async.md

@@ -11,7 +11,7 @@ Asynchronous code is common in modern Javascript applications. Testing it is mos
 
 Jasmine supports three ways of managing asynchronous work: `async`/`await`, promises, and callbacks. If Jasmine doesn't detect one of these, it will assume that the work is synchronous and move on to the next thing in the queue as soon as the function returns. All of these mechanisms work for `beforeEach`, `afterEach`, `beforeAll`, `afterAll`, and `it`.
 
-## `async`/`await`
+## `async/await`
 Usually, the most convenient way to write async tests is to use `async`/`await`. `async` functions implicitly return a promise. Jasmine will wait until the returned promise is either resolved or rejected before moving on to the next thing in the queue. Rejected promises will cause a spec failure, or a suite-level failure in the case of `beforeAll` or `afterAll`.
 
 ```javascript
@@ -52,11 +52,8 @@ It's vital that the `done` callback be called exactly once, and that calling `do
 ```javascript
 beforeEach(function(done) {
   setTimeout(function() {
-
     // do some stuff
-
     done();
-
   }, 100);
 });
 

_tutorials/custom_matcher.md

@@ -139,7 +139,8 @@ ignore it. It will no longer be provided in Jasmine 4.</p>
     <td class="code">
 <div class="highlight" markdown="1">
 ```javascript
-                result.pass = matchersUtil.equals(actual.hyuk, "gawrsh" + expected);
+                result.pass = matchersUtil.equals(actual.hyuk, 
+                    "gawrsh" + expected);
 ```
 </div>
     </td>
@@ -171,7 +172,8 @@ ignore it. It will no longer be provided in Jasmine 4.</p>
     <td class="code">
 <div class="highlight" markdown="1">
 ```javascript
-                    result.message = "Expected " + actual + " not to be quite so goofy";
+                    result.message = "Expected " + actual + 
+                        " not to be quite so goofy";
                 } else {
 ```
 </div>
@@ -187,7 +189,8 @@ ignore it. It will no longer be provided in Jasmine 4.</p>
     <td class="code">
 <div class="highlight" markdown="1">
 ```javascript
-                    result.message = "Expected " + actual + " to be goofy, but it was not very goofy";
+                    result.message = "Expected " + actual + 
+                        " to be goofy, but it was not very goofy";
                 }
 ```
 </div>

_tutorials/mocking_ajax.md

@@ -112,7 +112,8 @@ Jasmine-Ajax mocks out your request at the XMLHttpRequest object, so should be c
     <td class="code">
 <div class="highlight" markdown="1">
 ```javascript
-            expect(jasmine.Ajax.requests.mostRecent().url).toBe('/some/cool/url');
+            expect(jasmine.Ajax.requests.mostRecent().url)
+                .toBe('/some/cool/url');
             expect(doneFn).not.toHaveBeenCalled();
 ```
 </div>

_tutorials/your_first_suite.md

@@ -263,7 +263,8 @@ describe("A spec", function() {
         this.bar = "test pollution?";
     });
 
-    it("prevents test pollution by having an empty `this` created for the next spec", function() {
+    it("prevents test pollution by having an empty `this` " +
+            "created for the next spec", function() {
         expect(this.foo).toEqual(0);
         expect(this.bar).toBe(undefined);
     });
@@ -620,7 +621,10 @@ describe("Multiple spies, when created manually", function() {
     let tape;
 
     beforeEach(function() {
-        tape = jasmine.createSpyObj('tape', ['play', 'pause', 'stop', 'rewind']);
+        tape = jasmine.createSpyObj(
+            'tape',
+            ['play', 'pause', 'stop', 'rewind']
+        );
 
         tape.play();
         tape.pause();
@@ -680,7 +684,9 @@ It returns <code>true</code> if the constructor matches the constructor of the a
                     return true;
                 });
 
-                expect(foo).toHaveBeenCalledWith(jasmine.any(Number), jasmine.any(Function));
+                expect(foo).toHaveBeenCalledWith(
+                    jasmine.any(Number), jasmine.any(Function)
+                );
             });
         });
     });
@@ -756,9 +762,9 @@ It returns <code>true</code> if the constructor matches the constructor of the a
                     bar: "baz"
                 });
 
-                expect(callback).toHaveBeenCalledWith(jasmine.objectContaining({
-                    bar: "baz"
-                }));
+                expect(callback).toHaveBeenCalledWith(
+                    jasmine.objectContaining({ bar: "baz" })
+                );
             });
         });
     });
@@ -794,8 +800,12 @@ It returns <code>true</code> if the constructor matches the constructor of the a
 
                 callback([1, 2, 3, 4]);
 
-                expect(callback).toHaveBeenCalledWith(jasmine.arrayContaining([4, 2, 3]));
-                expect(callback).not.toHaveBeenCalledWith(jasmine.arrayContaining([5, 2]));
+                expect(callback).toHaveBeenCalledWith(
+                    jasmine.arrayContaining([4, 2, 3])
+                );
+                expect(callback).not.toHaveBeenCalledWith(
+                    jasmine.arrayContaining([5, 2])
+                );
             });
         });
     });
@@ -815,8 +825,12 @@ It returns <code>true</code> if the constructor matches the constructor of the a
 ```javascript
     describe('jasmine.stringMatching', function() {
         it("matches as a regexp", function() {
-            expect({foo: 'bar'}).toEqual({foo: jasmine.stringMatching(/^bar$/)});
-            expect({foo: 'foobarbaz'}).toEqual({foo: jasmine.stringMatching('bar')});
+            expect({foo: 'bar'}).toEqual({
+                foo: jasmine.stringMatching(/^bar$/)
+            });
+            expect({foo: 'foobarbaz'}).toEqual({
+                foo: jasmine.stringMatching('bar')
+            });
         });
 
         describe("when used with a spy", function() {
@@ -825,8 +839,12 @@ It returns <code>true</code> if the constructor matches the constructor of the a
 
                 callback('foobarbaz');
 
-                expect(callback).toHaveBeenCalledWith(jasmine.stringMatching('bar'));
-                expect(callback).not.toHaveBeenCalledWith(jasmine.stringMatching(/^bar$/));
+                expect(callback).toHaveBeenCalledWith(
+                    jasmine.stringMatching('bar')
+                );
+                expect(callback).not.toHaveBeenCalledWith(
+                    jasmine.stringMatching(/^bar$/)
+                );
             });
         });
     });
@@ -1050,11 +1068,13 @@ describe("Using async/await", function() {
     <td class="code">
 <div class="highlight" markdown="1">
 ```javascript
-    it("should support async execution of test preparation and expectations", async function() {
-        await soon();
-        value++;
-        expect(value).toBeGreaterThan(0);
-    });
+    it("supports async execution of test preparation and expectations",
+        async function() {
+            await soon();
+            value++;
+            expect(value).toBeGreaterThan(0);
+        }
+    );
 });
 ```
 </div>

css/_scss/article.scss

@@ -30,7 +30,7 @@
   }
 
   pre.highlight {
-    font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
+    @include light-code();
   }
 
   code.highlighter-rouge {

css/_scss/mixins.scss

@@ -1,4 +1,5 @@
 @mixin light-code() {
   background-color: #f0f0f0;
-  font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-family: Menlo, Courier, monospace;
+  font-size: 14px;
 }

css/_scss/reset.scss

@@ -29,10 +29,4 @@ th {
 
 figure, pre {
 	margin: 0;
-}
-
-// TODO: Fix side-by-side tutorials to lay out correctly with a monospace font,
-// then remove this.
-code {
-	font-family: Helvetica, sans-serif;
 }

css/jasmine_docco.scss

@@ -1,3 +1,8 @@
+---
+---
+
+@import 'mixins';
+
 table.docco {
     /* Prevent overly-wide <pre> from blowing out the width of the table */
     width: 100%;
@@ -13,12 +18,6 @@ table.docco td.code, table.docco th.code {
     padding: 14px 15px 16px 25px;
 }
 
-/* Ensure that code gets 16px even if the element has been de-docco'd
-   This overrides the more general style for table td code in pages.scss. */
-table.docco .code code {
-    font-size: 16px;
-}
-
 .docco th.docs, .docco td.docs {
     width: 26%;
     padding: 10px 25px 1px 0px;
@@ -52,14 +51,11 @@ table.docco .code code {
     padding-left: 0;
 }
 
-.code {
-    /* TODO: Fix the tutorial code to fit when using the light-code font,
-       then use the light-code mixin. */
-    background-color: #f0f0f0;
+.code, .code code {
+    @include light-code();
 }
 
 .docs code {
     /* make jasmine.DEFAULT_TIMEOUT_INTERVAL fit */
     font-size: 12px;
-}
-
+}