Example
-------

This section illustrates some capabilities of *Copy-as-Markup*. I wrote this section in a Word document, which you can view [here]. Then CaM translated it. You can also view the [HTML] and the [Markdown].

[here]: Example.pdf
[HTML]: ExampleHTML.txt
[Markdown]: ExampleMarkdown.txt

<span class="drop-cap">C</span>opy-as-Markup translates many character formats, such as **bold**, *italic*, ***bold-italic***, sub<sub>scripts</sub>, super<sup>scripts</sup>, <span style="text-transform: uppercase">ALL CAPS</span>, <span style="font-variant: small-caps">small caps</span>, <del>strike-through</del>, and <u>underline</u>. You can create other character formats, such as `drop-cap`, with Word styles and corresponding CSS.

Copy-as-Markup does lists:

* An un-ordered list
* CaM does hyperlinks and multi-level lists:
    + [HTML Validation](https://validator.w3.org/)
    + [CSS Validation](http://jigsaw.w3.org/css-validator/)
1. It does numbered lists, too.
2. Item 2

In the table below, notice that CaM has aligned the numbers on their decimals.

<span class="table-caption">Caption: Numeric Table</span>
| Heading 1 | Heading 2 | Heading 3 |
|-----------|----------:|----------:|
| Item 1    |     10.01 | 40,000.01 |
| Item 2    |      5.2  |    200    |
| Item 3    |    100.20 |  4,500.00 |

  

<table class="grid">
	<caption>Caption: Merged Cells</caption>
	<tr>
		<td colspan="5">CaM does tables with horizontally merged cells…</td>
	</tr>
	<tr>
		<td>-</td>
		<td rowspan="4">…andverticallymergedcells.</td>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<td>-</td>
		<td>-</td>
		<td rowspan="2" colspan="2">…and cells merged inboth directions.</td>
	</tr>
	<tr>
		<td>-</td>   <td>-</td>
	</tr>
	<tr>
		<td>-</td>   <td>-</td>   <td>-</td>   <td>-</td>
	</tr>
</table>

  

Copy-as-Markup does paragraph styles. The one below I call “Fenced”.

```
if x%2 == 0:
    print 'x is even'
else:
    print 'x is odd'
```

CaM translates the Word style “Quote” into an HTML `<blockquote>`, like this:

> Now is the time for all good men to come to the aid of their party.

CaM does math notation:

$$ \left(\frac{x_n +5}2 +\sqrt{b^2}\right)\times\begin{pmatrix}1 & 0
	\\0 & 1\end{pmatrix}\times\hat{\theta}\times\int_{x=0}^\infty{e^x\,\text d x}$$

<figure>
	<img src="images/sunset.jpg" alt="sunset" width="151">
	<figcaption>Sunset</figcaption>
</figure>

It can recognize a Word text box, and will translate it into an HTML `<div>`. Or, if a text box consists entirely of an image and a caption, CaM will write it as a `<figure>`, complete with a `<figcaption>`.

This example demonstrates the way in which CaM is dependent upon CSS by others. A CSS file defines the styles used for items like `caption` and `inset-right`.

Let’s wrap up this example with a footnote[^1]. CaM will place the text of the footnote at the bottom of the selection.
[^1]:    Here is the text of the footnote.