<!-- MD -->

## this is heading level 2

<!-- HMTL -->

<h2>this is heading level 2</h2>

<!-- MD -->

* Fruit

    + Apple

    + Banana

    + Orange

* Food

* Animal

<!-- HMTL -->

<ul>

<li>Fruit

    <ul><li>Apple</li>

    <li>Banana</li>

    <li>Orange</li></ul>

</li>

<li>Food</li>

<li>Animal</li>

</ul>

<!--  MD -->

1. Apple

1. Banana

1. Orange

<!-- HMTL -->

<ol>

    <li>Apple</li>

    <li>Banana</li>

    <li>Orange</li>

</ol>

<!-- MD -->

> I hope this post proves helpful to someone else that encounters the problem.

> > It was almost as frustrating to find the culprit the second time …

<!-- HTML -->

<blockquote>

    <p>I hope this post proves helpful to someone else that encounters the problem.</p>

    <blockquote>

        <p>It was almost as frustrating to find the culprit the second time … </p>

    </blockquote>

</blockquote>

<!-- MD -->

```javascript

testData = ' - time:' + new Date().getTime() + ' <br> ';

localStorage.setItem("test", testData);

```

<!-- HTML -->

<pre><code class="javascript">testData = ' - time:' + new Date().getTime() + ' &lt;br&gt; ';

localStorage.setItem("test", testData);

</code></pre>

<!-- MD -->

This is the *emphasis* code. and That is the most **important** part.

<!-- HTML -->

<p>This is the <em>emphasis</em> code. and That is the most <strong>important</strong> part.</p>

<!-- MD -->

This is [inline-link](http://daringfireball.net/projects/markdown/dingus "Title-md demo") inline link.

<!-- HTML -->

<p>This is <a href="http://daringfireball.net/projects/markdown/dingus" title="Title-md demo">inline-link</a> inline link.</p>

<!-- MD -->

This is [ref-link] [ref-1] reference-style link.

[ref-1]: http://daringfireball.net/projects/markdown/dingus  "Title-md demo"

<!-- HTML -->

<p>This is <a href="http://daringfireball.net/projects/markdown/dingus" title="Title-md demo">ref-link</a> reference-style link.</p>

<!-- MD -->

![Alt text](/path/to/img.jpg "Optional title")

<!-- HTML -->

<img alt="Alt text" src="/path/to/img.jpg" title="Optional title">

<!-- MD -->

:+1:

<!-- HTML -->

<img align="absmiddle" alt=":+1:" class="emoji" height="20px" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png" title=":+1:" width="20px">

<!-- MD -->

Footnotes[^fnote-1] are added in-text like so ...

[^fnote-1]:

Footnotes are detailed explanation.

There are always long conents in the footnotes.

<!-- HTML -->

<p>Footnotes<sup id="fnref:fnote-1"><a class="footnote-ref" href="#fn:fnote-1" rel="footnote">1</a></sup> are added in-text like so …</p>

<div class="footnote">

    <hr>

    <ol>

        <li id="fn:fnote-1">

            <p>Footnotes are detailed explanation.<br>

            There are always long conents in the footnotes.&nbsp;<a class="footnote-backref" href="#fnref:fnote-1" rev="footnote" title="Jump back to footnote 1 in the text">↩</a></p>

        </li>

    </ol>

</div>

{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }