Permalink
Browse files

Finished Blockquote and images

Added local images and edited the blockquote section to highlight the
need for white space.

Also added the table headers to all sections and change the alternative
row style for some.

Note: Someone (meaning me) will have to go through and tidy this so
that tags are aligned properly.
  • Loading branch information...
1 parent 683d974 commit cd1bfa137fcaa15c385d545b4f33471e199ee41f @mandaris mandaris committed Apr 3, 2012
Showing with 83 additions and 21 deletions.
  1. BIN images/app_icon.png
  2. +83 −21 index.html
View
BIN images/app_icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
104 index.html
@@ -38,7 +38,11 @@ <h2 class="section-name">Links</h2>
<div class="section">
<table>
- <tr>
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -77,24 +81,40 @@ <h2 class="section-name">Headings</h2>
</table>
</div>
- <h2 class="section-name">Quotes</h2>
+ <h2 class="section-name">Blockquotes</h2>
<div class="section">
<table>
- <tr class="alternate">
- <td>
- > This is the first level of quoting.<br />
- >> This is nested blockquote.<br />
- > Back to the first level.
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
+ <td>Here is the a normal paragraph.<br />
+<br />
+> This is the first level of quoting.<br />
+<br />
+>> This is nested blockquote.<br />
+<br />
+> Back to the first level.<br />
+<br />
+Notice the spaces when we start a new paragraph or separate the different blockquotes.
</td>
<td>
- <blockquote>
- This is the first level of quoting.
- <blockquote>
- This is nested blockquote.
- </blockquote>
- Back to the first level.
- </blockquote>
+ <p>Here is the a normal paragraph.</p>
+
+<blockquote>
+<p>This is the first level of quoting.</p>
+
+<blockquote>
+<p>This is nested blockquote.</p>
+</blockquote>
+
+<p>Back to the first level.</p>
+</blockquote>
+
+<p>Notice the spaces when we start a new paragraph or separate the different blockquotes.</p>
+
</td>
</tr>
</table>
@@ -163,17 +183,35 @@ <h2 class="section-name">Images and Figures</h2>
<div class="section">
<table>
- <tr>
- <td>Link to [Google](http://google.com).</td>
- <td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
+ <tr>
+ <th>Markdown</th>
+ <th>Result</th>
</tr>
<tr>
- <td>Send me an email at &lt;address@example.com&gt;.</td>
- <td>Send me an email at <a href="mailto:address@example.com">address@example.com</a>.</td>
+ <td>This is the simplest example of an ![MultiMarkdown Composer Icon](images/app_icon.png) embedded in a paragraph.</td>
+ <td>This is the simplest example of an <img src="images/app_icon.png" alt="MultiMarkdown Composer Icon" /> embedded in a paragraph.</td>
+ </tr>
+ <tr class="alternate">
+ <td>This is an image example with a title attribute ![Alternate Message](images/app_icon.png "This is a title") embedded in a paragraph.</td>
+ <td>This is an image example with a title attribute <img src="images/app_icon.png" alt="Alternate Message" title="This is a title" /> embedded in a paragraph.</td>
</tr>
<tr>
- <td>![37signals logo](http://www.37signals.com/images/logo-37signals.png)</td>
- <td><img src="http://www.37signals.com/images/logo-37signals.png" alt="37signals logo" /></td>
+ <td>This is the same image ![image3][] but with the attributes placed later on in the document.<br />
+<br />
+[image3]: images/app_icon.png "This is where the title goes" height=40px width=40px</td>
+ <td>This is the same image <img src="images/app_icon.png" alt="image3" id="image3" title="This is where the title goes" style="height:40px;width:40px;" /> but with the attributes placed later on in the document.</td>
+ </tr>
+ <tr class="alternate">
+ <td>When an image is placed in a paragraph, it is wrapped in a &lt;figure&gt; tag
+
+![This is the figure caption][fig_id]
+
+[fig_id]: images/app_icon.png "This is where the title goes" height=80px width=80px</td>
+ <td><p>When an image is placed in a paragraph, it is wrapped in a &lt;figure&gt; tag</p>
+
+<figure>
+<img src="images/app_icon.png" alt="This is the figure caption" id="fig_id" title="This is where the title goes" style="height:80px;width:80px;" />
+<figcaption>This is the figure caption</figcaption></figure></td>
</tr>
</table>
</div>
@@ -183,6 +221,10 @@ <h2 class="section-name">Tables</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -202,6 +244,10 @@ <h2 class="section-name">Footnotes</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -222,6 +268,10 @@ <h2 class="section-name">Citations</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -240,6 +290,10 @@ <h2 class="section-name">Definition Lists</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -258,6 +312,10 @@ <h2 class="section-name">Math</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>
@@ -277,6 +335,10 @@ <h2 class="section-name">Glossary</h2>
<div class="section">
<table>
<tr>
+ <th>Markdown</th>
+ <th>Result</th>
+ </tr>
+ <tr>
<td>Link to [Google](http://google.com).</td>
<td>Link to <a href="http://google.com" target="_blank">Google</a>.</td>
</tr>

0 comments on commit cd1bfa1

Please sign in to comment.