doc(all): fix formatting and styling issues

EisenbergEffect · EisenbergEffect · commit d62f20ce15e2 · 2017-12-20T23:03:28.000-08:00
diff --git a/doc/article/en-US/app-configuration-and-startup.md b/doc/article/en-US/app-configuration-and-startup.md
@@ -143,7 +143,8 @@ The root component is set by calling `aurelia.setRoot()`. If no values are provi
 
 This causes the `my-root${context.language.fileExtension}`/`my-root.html` to be loaded as the root component and injected into the `some-element` HTML element.
 
-> Note: The content of the app host element, the one marked with `aurelia-app` or passed to `Aurelia.prototype.setRoot`, will be replaced when `Aurelia.prototype.setRoot` completes.
+> Info
+> The content of the app host element, the one marked with `aurelia-app` or passed to `Aurelia.prototype.setRoot`, will be replaced when `Aurelia.prototype.setRoot` completes.
 
 > Warning: When using the `<body>` element as the app host, bear in mind that any content added prior to the completion of `Aurelia.prototype.setRoot` will be removed.
 
@@ -154,7 +155,7 @@ Aurelia was originally designed for Evergreen Browsers. This includes Chrome, Fi
 In case you are using Webpack, create a file, e.g. `ie-polyfill.js`:
 
 <code-listing heading="Polyfill Configuration">
-  <source-code lang="JS">
+  <source-code lang="JavaScript">
     import 'mutationobserver-shim/MutationObserver'; // IE10 MutationObserver polyfill
     import 'raf/polyfill'; // IE9 requestAnimationFrame polyfill
   </source-code>
@@ -163,13 +164,12 @@ In case you are using Webpack, create a file, e.g. `ie-polyfill.js`:
 After you have created the file, add it as the first file in your `aurelia-bootstrapper` bundle. You can find bundle configuration in the `webpack.config.js` file, something like:
 
 <code-listing heading="Polyfill Configuration">
-  <source-code lang="JS">
+  <source-code lang="JavaScript">
     entry: {
       'app': ['./ie-polyfill', 'aurelia-bootstrapper'],
   </source-code>
 </code-listing>
 
-
 If you are using JSPM change your `index.html` startup code as follows:
 
 <code-listing heading="Polyfill Configuration">
@@ -196,7 +196,7 @@ If you are using JSPM change your `index.html` startup code as follows:
   </source-code>
 </code-listing>
 
-> Note: Module Loaders and Bundlers
+> Info: Module Loaders and Bundlers
 > The code in this article demonstrates loading via SystemJS. However, these techniques can be accomplished with other module loaders just as readily. Be sure to lookup the appropriate APIs for your chosen loader or bundler in order to translate these samples into the required code for your own app.
 
 > Warning: Promises in Edge
diff --git a/doc/article/en-US/contact-manager-tutorial.md b/doc/article/en-US/contact-manager-tutorial.md
@@ -28,7 +28,7 @@ For this tutorial, we're going to use the Aurelia CLI. If you've already setup y
 
 Once you have the prerequisites installed, you can install the Aurelia CLI itself. From the command line, use npm to install the CLI globally:
 
-```
+```Shell
 npm install aurelia-cli -g
 ```
 
@@ -91,7 +91,7 @@ To begin, we're going to setup our `App` class by configuring it with a router.
   </source-code>
   <source-code lang="TypeScript">
     import {Router, RouterConfiguration} from 'aurelia-router';
-       
+
     export class App {
       router: Router;
 
@@ -151,13 +151,13 @@ We're almost done setting up the application shell. Before we're done, we need t
 
 To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
 
-```
+```Shell
 npm install bootstrap --save
 ```
 
 Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
 
-```
+```Shell
 npm install jquery@^2.2.4 --save
 ```
 
@@ -194,7 +194,7 @@ After you have modified the aurelia.json file, it is necessary to restart the `a
 
 If you run the application now, you'll see a blank screen and the browser's console will display the following message:
 
-```
+```Output
 Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/src/no-selection.js
 ERROR [app-router] Error: Script error for "no-selection"
 ```
@@ -372,7 +372,7 @@ If you go ahead and run the application, you should now see something like this:
 
 Ok, things are starting to come together, but we still can't view an individual contact. If you try selecting something from the list, you'll see an error like the following in the console:
 
-```
+```Output
 ERROR [app-router] Error: Script error for "contact-detail"
 ```
 
@@ -908,7 +908,7 @@ Let's add one more final touch to this application. Whenever we're navigating fr
 
 Begin by installing the `nprogress` library with the following command:
 
-```
+```Shell
 npm install nprogress --save
 ```
 
diff --git a/doc/article/en-US/quick-start.md b/doc/article/en-US/quick-start.md
@@ -84,13 +84,13 @@ Yes, that's it. This is the only HTML page in our application. With this in plac
 
 First, you can see that this document is setup as a standard HTML5 document with a doctype, html, head and body. The items of interest to us lie within (and on) the body tag. Let's look at each script tag in turn:
 
-```
+```HTML
 <script src="scripts/system.js"></script>
 ```
 
 This tag is used to load SystemJS, a modern JavaScript module loader. Because Aurelia is a modern framework, it's written as modules and encourages you to create your code in a modular fashion. To use modules in ${context.language.name} you need a loader that understands modular code. That's what SystemJS does. It locates modules, understands their dependencies and ensures that everything is properly loaded at runtime. Aurelia supports a variety of module loaders. Besides SystemJS, Aurelia supports all AMD-based loaders such as RequireJS, Cajon and Dojo. Aurelia also supports module-based build systems like Webpack.
 
-```
+```HTML
 <script src="scripts/config-typescript.js"></script>
 ```
 
@@ -99,13 +99,13 @@ As discussed previously, this line of code configures the programming language y
 > Info
 > In a production app, you wouldn't use a transpiler to transform code on-the-fly in the browser like we're doing here. That would perform quite poorly and require you to distribute an entire transpiler with your app. We're using this technique here to enable you to get started without any tooling or build setup needed. In a later guide, we'll show you how to use the CLI to setup a production-ready project, complete with automatic application builds and bundling.
 
-```
+```HTML
 <script src="scripts/aurelia-core.min.js"></script>
 ```
 
 This is the core of Aurelia itself, in a single script file. You need to add that to use the framework. That's what's going to enable all the cool capabilities we'll use in this guide.
 
-```
+```JavaScript
 SystemJS.import('aurelia-bootstrapper');
 ```
 
