showdown/html/main.html

<section id="description" class="page-section jumbotron text-bg-light">
    <div class="container">
        <h1>What is <span class="showdown-brand">Show<span class="text-secondary">down</span></span>?</h1>
        <div class="row">
            <div class="col-sm">
                <p class="lead"><span class="showdown-brand">Showdown</span> is a Javascript Markdown to HTML converter, based on the original works by John Gruber.
                    <span class="showdown-brand">Showdown</span> can be used client side (in the browser) or server side (with nodejs).
                    See it working <a href="http://demo.showdownjs.com">in the live demo</a>!</p>
            </div>
            <div class="col-sm">
                <pre><code class="javascript">var converter = new showdown.Converter();
var md = '[**Showdown**](http://www.showdownjs.com) is *great*\n' +
         'because:\n\n' +
         ' - it\'s easy to use\n' +
         ' - it\'s extensible\n' +
         ' - works in the server and in the browser';
var html = converter.makeHtml(md);</code></pre>
            </div>
        </div>
    </div>
</section>

<section id="who-uses-showdown" class="page-section text-bg-light">
    <div class="container">
        <h1>Who uses <span class="showdown-brand">Show<span class="text-secondary">down</span></span>?</h1>
        <div class="row">
            <div class="col-md-3"><img alt="meteor" class="img-fluid" src="img/meteor-logo.svg"></div>
            <div class="col-md-3"><img alt="google cloud platform" class="img-fluid" src="img/gcp-logo.svg"></div>
            <div class="col-md-3"><img alt="ghost" class="img-fluid" src="img/ghost.svg"></div>
            <div class="col-md-3"><img alt="stackoverflow" class="img-fluid" src="img/se.png"></div>
        </div>
        <div class="row">
            <div class="col"><a href="https://www.npmjs.com/browse/depended/showdown">and some others...</a></div>
        </div>
    </div>
</section>

<section id="why-showdown" class="page-section text-bg-light highlight">
    <div class="container">
        <h1>Why <span class="showdown-brand">Show<span class="text-secondary">down</span></span>?</h1>
        <div class="row">
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-thumbs-o-up" aria-hidden="true"></i></div>
                <h2>Easy to use</h2>
                <p>No hard dependencies or special installation instructions! Just download it (or use a CDN) and include it in your file.</p>
            </div>
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-cubes" aria-hidden="true"></i></div>
                <h2>Full-featured</h2>
                <p>Out of the box, supports a number of popular markdown flavors like <a href="https://daringfireball.net/projects/markdown/">"vanilla"</a>,
                    <a href="https://github.github.com/gfm/">GFM</a> or <a href="http://spec.commonmark.org/">commonmark</a>.
                    Extra features like tables, metadata, etc.. can be enabled through options.</p>
            </div>
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-server" aria-hidden="true"></i></div>
                <h2>Cross-platform</h2>
                <p>Showdown works both in server (nodejs) and client-side (browser). </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-cogs" aria-hidden="true"></i></div>
                <h2>Customizable &amp; Extendable</h2>
                <p>It's easily customizable and extendable, meaning you can add new syntax or modify it's behavior through extensions or options.</p>
            </div>
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-desktop" aria-hidden="true"></i></div>
                <h2>Compatibility</h2>
                <p>Showdown is compatible with both new and old (such as IE8+ and nodejs 0.12).</p>
            </div>
            <div class="col-md-4">
                <div class="red-circle"><i class="fa fa-2x fa-fw fa-code" aria-hidden="true"></i></div>
                <h2>Plain Javascript</h2>
                <p>Written in EcmaScript5 means you can use it in your project as is, without the need of transpilers.</p>
            </div>
        </div>
    </div>
</section>

<section id="sponsors" class="page-section text-bg-light">
    <div class="container">
        <h1>Sponsors</h1>
        <div class="row">
            <div class="col-md-3"><img alt="jetbrains" class="img-fluid" src="img/jetbrains.svg"></div>
            <div class="col-md-3"><img alt="zapier" class="img-fluid" src="img/zapier-logo.png"></div>
        </div>
    </div>
</section>