style(docs): Make examples readable.

rackerlabs · Feb 27, 2014 · f48aaae · f48aaae
1 parent 9dc27f5
commit f48aaae
Showing 1 changed file with 111 additions and 88 deletions.
diff --git a/src/rxNotify/README.md b/src/rxNotify/README.md
@@ -2,140 +2,165 @@
 
 Service (rxNotify) and Directive (rxNotifications) for displaying status messages on a page.
 
-## Messages
-
-### Adding a New Message
+## Adding a New Message
 
 To add a new message to a stack, inject 'rxNotify' into your function and run:
 
-```
-rxNotify.add('My Message Text');
-```
+> `rxNotify.add('My Message Text');`
 
 This will add a new message to the default stack ('page') with all default options set. To customize options, pass in an object as the second argument with you specific options set:
 
-```
-rxNotify.add('My Message Text', {
-    stack: 'custom',
-    type: 'warning'
-});
-```
+> `rxNotify.add('My Message Text', {`
+
+>>    `stack: 'custom',`
+
+>>    `type: 'warning'`
+
+> `});`
+
+## Message options
+
+------
+
+- **`type`**: *Message type.*
+
+    > Default: `'info'`
+
+    *Other values*: `'warn'`, `'error'`, `'success'`
 
-#### Message options
+------
 
-- `type` Message type
+- **`timeout`**: *Time (in seconds) for message to appear.*
 
-    *Default:* `'info'`
+    > Default: `-1` (Message displays indefinitely)
 
-    *Other values:* `'warn'`, `'error'`, `'success'`
+    *Other values*: Any positive integer
 
-- `timeout` Time (in seconds) for message to appear
+------
 
-    *Default:* `-1`
+- **`dismissable`**: *Whether a user can dismiss the message via an 'x' icon.*
 
-    Message displays indefinitely
+    > Default: `true`
 
-    *Other values:* Any positive integer
+    *Other values*: `false`
 
-- `dismissable` Whether a user can dismiss the message via a 'x' icon
+------
 
-    *Default:* `true`
+- **`loading`** *Replaces type icon with spinner. Removes option for use to dismiss message.*
 
-    *Other values:* `false`
+    > Default: `false`
 
-- `loading` Replaces type icon with spinner. Removes option for use to dismiss message.
+    *Other values*: `true`
 
-    *Default:* `false`
+    You usually want to associate this with a 'dismiss' property.
 
-    *Other values:* `true`
+    **Example**:
 
-    You usually want to associate this with a 'dismiss' property. For example:
 
-    ```
-    rxNotify.add('Loading', {
-        loading: true,
-        dismiss: [$scope, 'loaded']
-    });
+    > `rxNotify.add('Loading', {`
 
-    var apiCallback = function (data) {
-        $scope.loaded = true;
-        // do something with the data
-    }
+    >>  `loading: true,`
 
-    myApiCall(apiCallback);
-    ```
+    >>  `dismiss: [$scope, 'loaded']`
 
-- `show` When to have the message appear
+    > `});`
 
-    *Default:* `'immediately'`
+    > `var apiCallback = function (data) {`
+
+    >>  `$scope.loaded = true;`
+
+    >>  `// do something with the data`
+
+    > `}`
+
+    > `myApiCall(apiCallback);`
+
+------
+
+- **`show`**: *When to have the message appear.*
+
+    > Default: `'immediately'`
 
     *Other values:*
-    - `'next'`: Show message after the next route change
-    - `[scope, 'property']`:
-        Pass in a property on a scope to watch for a change. When the property value equals true, the message is shown.
 
-        Example:
-        ```
-        $scope.loaded = false;
+    > `'next'`: Show message after the next route change
+
+    > `[scope, 'property']`:
+
+    >> Pass in a property on a scope to watch for a change. When the property value equals true, the message is shown.
 
-        rxNotify.add('Content loaded!', {
-            show: [$scope, 'loaded']
-        });
+    **Example**:
 
-        $timeout(function () {
-            $scope.loaded = true;
-        }, 1500);
-        ```
+    > `$scope.loaded = false;`
 
-- `dismiss` When to have the message disappear
+    > `rxNotify.add('Content loaded!', {`
 
-    *Default:* `'next'`
+    >>  `show: [$scope, 'loaded']`
 
-    Dismiss message after the next route change
+    > `});`
+
+    > `$timeout(function () {`
+
+    >>  `$scope.loaded = true;`
+
+    > `}, 1500);`
+
+------
+
+- **`dismiss`**: *When to have the message disappear.*
+
+    > Default: `'next'` (Dismiss message after the next route change)
 
     *Other values:*
 
-    - `[scope, 'property']`:
-        Pass in a property on a scope to watch for a change. When the property value equals true, the message is dismissed.
+    > `[scope, 'property']`:
+    >>    Pass in a property on a scope to watch for a change. When the property value equals true, the message is dismissed.
+
+    **Example**:
+
+    > `$scope.loaded = false;`
+
+    > `rxNotify.add('Loading Content', {`
+
+    >>  `dismiss: [$scope, 'loaded']`
+
+    > `});`
+
+    > `$timeout(function () {`
+
+    >>  `$scope.loaded = true;`
+
+    > `}, 1500);`
+
+------
+
+- **`stack`**: *Which message stack the message gets added to.*
+
+    > Default: `'page'`
 
-        Example:
-        ```
-        $scope.loaded = false;
+    > *Other values:* Any string
 
-        rxNotify.add('Loading Content', {
-            dismiss: [$scope, 'loaded']
-        });
+    **Example**:
 
-        $timeout(function () {
-            $scope.loaded = true;
-        }, 1500);
-        ```
+    > `rxNotify.add('Username required', {`
 
-- `stack` Which message stack the message gets added to
+    >>  `type: 'error',`
 
-    *Default:* `'page'`
+    >>  `stack: 'loginForm'`
 
-    *Other values:* Any string
+    > `});`
 
-    Example:
-    ```
-    rxNotify.add('Username required', {
-        type: 'error',
-        stack: 'loginForm'
-    });
-    ```
+    > `<rx-notifications stack="loginForm"></rx-notifications>`
 
-    ```
-    <rx-notifications stack="loginForm"></rx-notifications>
-    ```
+------
 
-### Dismissing a message programatically
+## Dismissing a message programatically
 
 Most messages are dismissed either by the user, a route change or using the custom 'dismiss' property.
 
-If you need to dismiss a message programmaticaly, you can run `rxNotify.dismiss(message)`, where message is the message object to dismiss.
+If you need to dismiss a message programmaticaly, you can run **`rxNotify.dismiss(message)`**, where message is the message object to dismiss.
 
-If you don't have the full message object, passing in the Message ID (which is returned from `rxNotify.add`) and the stack the message is in: `rxNotify.dismiss('42', 'page')`.
+If you don't have the full message object, passing in the Message ID (which is returned from **`rxNotify.add`**) and the stack the message is in: **`rxNotify.dismiss('42', 'page')`**.
 
 ## Stacks
 
@@ -147,9 +172,7 @@ You can also create custom stacks for speficic notification areas. Say you have
 
 The default notification stack is added by default to the page template, so it should be ready to use without any work (unless the app uses a custom template). The HTML to add the default stack to the page is:
 
-```
-<rx-notifications></rx-notifications>
-```
+> `<rx-notifications></rx-notifications>`
 
 Note that a 'stack' attribute does not need to be defined.
 
@@ -159,4 +182,4 @@ See 'stack' under 'Message options'
 
 ### Clearing all messages in a stack
 
-You can clear all messages in a specific stack programmatically via the `rxNotify.clear` function. Simply pass in the name of the stack to clear: `rxNotify.clear('page')`.
+You can clear all messages in a specific stack programmatically via the **`rxNotify.clear`** function. Simply pass in the name of the stack to clear: **`rxNotify.clear('page')`**.