@@ -271,46 +248,85 @@ as can CSS files:
```
-### Inline code and code examples provided directly i.e. not from an example file.
+## Code Tabs
-Code can be included directly inline, that is, not be fetched from some external file.
+Code tabs display code much like Code examples do. The added advantage is that they can display mutiple code samples within a tabbed interface. Each tab is displayed using Code-pane.
+
+### Code-tabs Attributes
+
+* linenums: true, false, display line numbers in the code in all tabs when the number of code statements are 10 or more
+
+### Code-pane Attributes
+
+* path: a file in the content/examples folder
+* title: seen in the header of a tab
+* linenums: true, false, display line numbers for the code in this tab when the number of code statements are 10 or more
+
+The example below uses the source code for a small application that bundles with Webpack techniques. This will create multiple tabs, each with its own title and be appropriately color coded. By default, line numbers are shown. Line number display can be specified using the linenums attribute at the code tab or code pane level. The example below shows us how to display line numbers in just one code pane.
+
+
+
+
+
+
+
+
+
+
+
+
+The code below will create multiple tabs, each with its own title and be appropriately color coded.
-#### Example
```html
-code-example(format="linenums" language="javascript").
- //SOME CODE
-```
-
-#### Specify starting line number
-```html
-code-example(language="html" format="linenums:4")
- var title = "This starts on line four";
+
+
+
+
+
+
+
+
+
+
```
{@a section-LiveExamples}
## Live Examples
-Here is how we do live examples. All examples here will point to TOH-6 for convenience.
+Here is how we do live examples. All examples here will point to other guides such as TOH-6 for convenience.
### Plain Live Example
+
+When a live example is included in a guide, it allows readers to run the example and download the code that the Author has placed in the content/examples folder for their respective guide. A plain live example looks like this:
+
+The code is shown here.
+
```html
```
-A plain live example looks like this:
### Live Example with Title Attribute
+
+To replace 'live-example' with a title, you can provide a title as shown here.
+
```html
```
-### Live Example with Body like seen in router, same exact result as attrib title
+### Live Example with Body
+
+Another way to display aletrnative text for 'live-example' is to include it in the body of the live-example. The effect is the same as when you use the title attribute.
+
```html
Live Example Flesh & Blood
```
### Live Example from Another Guide
+
+Example of live-example from the router guide Live Example from the Router guide.
+
```html
Live Example from the Router guide
```
@@ -331,7 +347,7 @@ A plain live example looks like this:
```
@@ -339,38 +355,32 @@ Embedded Plunkrs have default image. img allows you to override the deafult ima
{@a section-Anchors}
## Anchors
-To mark a location that a reader should reach when they click on an anchor, insert the tag below at that location.
+To mark a location that a reader should reach when they click an anchor link, insert the anchor tag shown below at that location.
- I have been marked using {@ section-Anchors} `{@a section-Anchors}`
+ My location has been marked using {@ section-Anchors}
-To use this anchor, replace alternative text below with text that will be visible to the reader and that the reader will click on. Replace path-to-page with the relative path to the page that has the location that the reader should reach.
+To use this anchor, replace alternative text below with text that will be visible to the reader and that the reader will click on. Replace path-to-page/dir-of-page with the relative path to the page that has the location that the reader should reach.
```html
[alternative text] (path-to-page/dir-of-page/#section-Anchors)
```
-### Example
-[Click this] (guide/docs-style-guide/#section-Anchors) to reach the beginning of this section on Anchors.
-
-
## Alerts
-Please use alerts sparingly throughout the docs. They are meant to draw attention to important occasions. Alerts should not be used for multi-line content (use callouts insteads) or stacked on top of each other.
+Please use alerts sparingly throughout the docs. They are meant to draw attention to important occasions. Alerts should not be used for multi-line content (use callouts insteads) or stacked on top of each other. Note that the content of an alert is indented to the right by two spaces.
-### Adding an Alert
-
-A very critical alert.
+ A very critical alert.
-A very important alert.
+ A very important alert.
-A very helpful alert.
+ A very helpful alert.
@@ -378,22 +388,22 @@ A very helpful alert.
Here is sample code to generate alerts.
```html
-A very critical alert.
+ A very critical alert.
-A very important alert.
+ A very important alert.
-A very helpful alert.
+ A very helpful alert.
```
## Callouts
-Please use callouts sparingly throughout the docs. Callouts (like alerts) are meant to draw attention on important occasions. Unlike alerts, callouts are designed to display multi-line content.
+Please use callouts sparingly throughout the docs. Callouts (like alerts) are meant to draw attention to important occasions. Unlike alerts, callouts are designed to display multi-line content.
@@ -443,7 +453,6 @@ Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles to
```
-
## Trees
Trees can be used to represent heirarchial data. Here is an example.
@@ -500,7 +509,7 @@ Trees can be used to represent heirarchial data. Here is an example.
-Here is the code for this tree
+Here is the code for this tree.
```html
@@ -545,9 +554,6 @@ Here is the code for this tree
Tables can be used to present tabular data as it relates to each other.
-
-
-### Adding a Table