<!--Meta author:'Faseer He' theme:night title:vim-reveal-->
<!--sec1-->
## Vim-reveal

### By:[farseer He](https://github.com/farseer90718)
### Hosted on:[github](https://github.com/farseer90718/vim-reveal)

<!--sec2-->
### Introductions

* This vim plugin is made mainly for converting markdown files to [reveal.js](https://github.com/hakimel/reveal.js) presentations.
* The details of [markdown syntax](http://daringfireball.net/projects/markdown/syntax).
* Works better with [vim-regionsyntax](https://github.com/farseer90718/vim-regionsyntax)

<br/><hr/>

### Install & Tweak

1. Use your favorite vim package managing plugin(such as vundle/pathogen/neobundle).
2. Clone [reveal.js](https://github.com/hakimel/reveal.js) somewhere.
3. Add something like this to your vim configuration file.

```vim
let g:reveal_root_path = 'your-reveal.js-path' " '$HOME/reveal.js/' will be used if not specified.
let g:reveal_default_config = {
    \'fname' : 'reveal',                       " The name of generated html file will be 'reveal.html'
    \'key1': 'value1',
    \'key2': 'value2',
    \ ...}                                     " Default options for reveal.js.
```

<br/><hr/>

### Usage

1. Edit your markdown file.
2. _:RevealIt_  will help you open the generated html file.
3. _:!Your-favorite-browser %_  will show the presentation in your browser.

<!--sec3-->
### What it looks like?

1. heads
#### h4
##### h5
###### h6

2. github flavored code blocks with syntax highlighting.
``` c
#include <stdio.h>
int main(int argc, char const* argv[])
{
    puts("hello, world!");
    return 0;
}
```
3. tables

<br/>

| Head1 | Head2 | Head3 | Head4 | Head5 | Head6 | Head7 |
| ----- | ----- | ----- | ----- | ----- | ----- | ----- |
| aaaaa | bbbbb | ccccc | ddddd | eeeee | fffff | 00000 |
| aaaaa | bbbbb | ccccc | ddddd | eeeee | fffff | 00000 |
| aaaaa | bbbbb | ccccc | ddddd | eeeee | fffff | 00000 |

<!--sec4-->
## Sections

To add sections each of which means a single page in the presentation,you can do something like this:
<br/>
(_Here the '^' means a start of new line instead of the actual character._)

```
^<!--sec1-->

The content of section 1.

^<!--sec2-->

The content of section 2.
...
```
This will be converted to:

``` html
<!--
<section data-markdown >
<script type="text/template">
The content of section 1.
</script>
</section>
<section data-markdown >
<script type="text/template">
The content of section 2.
</script>
</section>
-->
```

<!--sec5.1-->
## Nested sections
If you add this:

```
^<!--sec5.1-->

The content of section 1.1.

^<!--sec5.2-->

The content of section 1.2.
...
```

<!--sec5.2-->
### Something like this will happen.


<!--sec6.1 bg='#654321'-->
## Section options

You can change the background color of a certain section using:
```
^<!--sec6.1 bg='#654321'-->
```

<!--sec6.2 bg='#002b36' tr='linear' bgtr='slide'-->
## Section options

Also the transition and background transition ...
<br/>
For more section options,please refer to the documents of reveal.js.
```
^<!--sec6.2 bg='#002b36' tr='linear' bgtr='slide'-->
```

<!--secp7.1-->
<h2>Plain section</h2>
<h5>You may want to enable mathjax with it.</h5>
Don't panic!
<p>Use this:<br/>('secp' means section with plain html)</p>
<pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">

^<!--secp7-->
$$
\LaTeX
\\ \\
\left(\begin{array}{|c|c|c|}
x_{11} &amp; x_{12} &amp; \ldots
\\ x_{21} &amp; x_{22} &amp; \ldots
\\ \vdots &amp; \vdots &amp; \ddots
\end{array} \right)
$$
</code></pre>

<!--secp7.2-->
<h3>Feels like this.</h3>

$$
\LaTeX
\\ \\
\left(\begin{array}{|c|c|c|}
x_{11} &amp; x_{12} &amp; \ldots
\\ x_{21} &amp; x_{22} &amp; \ldots
\\ \vdots &amp; \vdots &amp; \ddots
\end{array} \right)
$$

<!--secp7.2-->
<h2>Plain section</h2>
<h5>Other cool stuffs supported by reveal.js</h5>
<p>All of these could be added to a 'secp' section</p>
<ol>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
<p class="fragment highlight-blue">highlight-blue</p>

<!--sec8-->
## reveal.js configurations

You can specify several options with Meta tags at the top of the markdown file like this:
```
<!--Meta author:'your name' title:title-->
<!--Meta theme:'night' transition:'zoom'-->
<!--Meta width:900 height:1200-->
```
For all the available options,please check the documents of reveal.js.

<!--sec9-->
<h2> Thanks for watching! </h2>
<h4><a href="https://raw.github.com/farseer90718/vim-reveal/master/test/vim-reveal.md">Original markdown file for this presentation.</a></h4>