Skip to content

Instantly share code, notes, and snippets.

@benweet
Created August 22, 2013 19:39
Show Gist options
  • Save benweet/6311823 to your computer and use it in GitHub Desktop.
Save benweet/6311823 to your computer and use it in GitHub Desktop.
Welcome document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome document</title>
<link rel="stylesheet" href="http://benweet.github.io/stackedit/css/main-min.css" />
<script type="text/javascript" src="http://benweet.github.io/stackedit/lib/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body><h1 id="welcome" class="wmd-title">Welcome to StackEdit! </h1>
<p>Hello, I am your first Markdown document within <strong>StackEdit</strong><a href="#fn:stackedit" id="fnref:stackedit" title="See footnote" class="footnote">1</a>. Don't delete me, I can be helpful. I can be recovered anyway in the <code>Utils</code> tab of the <i class="icon-cog"></i> <code>Settings</code> dialog.a</p>
<hr>
<h2 class="wmd-title" id="documents">Documents</h2>
<p><strong>StackEdit</strong> stores your documents in the browser local storage, which means all your documents are automatically saved locally and are accessible offline.</p>
<h4 class="wmd-title" id="create-a-document"><i class="icon-file"></i> Create a document</h4>
<p>You can create a new document by clicking the <i class="icon-file"></i> button in the navigation bar. This will switch from the current document to the new one.</p>
<h4 class="wmd-title" id="switch-to-another-document"><i class="icon-folder-open"></i> Switch to another document</h4>
<p>You can list all your local documents and switch from one to another by clicking the <i class="icon-folder-open"></i> button in the navigation bar.</p>
<h4 class="wmd-title" id="rename-a-document"><i class="icon-pencil"></i> Rename a document</h4>
<p>You can rename the current document by clicking the document title in the navigation bar.</p>
<h4 class="wmd-title" id="delete-a-document"><i class="icon-trash"></i> Delete a document</h4>
<p>You can delete the current document by clicking the <i class="icon-trash"></i> button in the navigation bar.</p>
<hr>
<h2 class="wmd-title" id="synchronization">Synchronization</h2>
<p><strong>StackEdit</strong> can be combined with <strong>Google Drive</strong> and <strong>Dropbox</strong> to have your documents centralized in the <em>Cloud</em>. The synchronization mechanism will take care of uploading your modifications or downloading the latest version of your documents.</p>
<h4 class="wmd-title" id="import-a-document"><i class="icon-download"></i> Import a document</h4>
<p>You can import a document from the <em>Cloud</em> by going to the <i class="icon-gdrive"></i> <code>Google Drive</code> or the <i class="icon-dropbox"></i> <code>Dropbox</code> sub-menu and by clicking <code>Import from...</code>. Once imported, your document will be automatically synchronized with the <strong>Google Drive</strong> / <strong>Dropbox</strong> file.</p>
<h4 class="wmd-title" id="export-a-document"><i class="icon-upload"></i> Export a document</h4>
<p>You can export any document by going to the <i class="icon-gdrive"></i> <code>Google Drive</code> or the <i class="icon-dropbox"></i> <code>Dropbox</code> sub-menu and by clicking <code>Export to...</code>. Even if your document is already synchronized with <strong>Google Drive</strong> or <strong>Dropbox</strong>, you can export it to a another location. <strong>StackEdit</strong> can synchronize one document with multiple locations.</p>
<h4 class="wmd-title" id="synchronize-a-document"><i class="icon-refresh"></i> Synchronize a document</h4>
<p>Once your document is linked to a <strong>Google Drive</strong> or a <strong>Dropbox</strong> file, <strong>StackEdit</strong> will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. Any conflict will be detected, and a local copy of your document will be created as a backup if necessary.</p>
<p>If you just have modified your document and you want to force the synchronization, click the <i class="icon-refresh"></i> button in the navigation bar.</p>
<blockquote>
<p><strong>NOTE:</strong> The <i class="icon-refresh"></i> button is disabled when:</p>
<ul>
<li>you are offline,</li>
<li>or the document is not synchronized with any location,</li>
<li>or the document has not been modified since the last synchronization.</li>
</ul>
</blockquote>
<h4 class="wmd-title" id="manage-document-synchronization"><i class="icon-refresh"></i> Manage document synchronization</h4>
<p>Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking <i class="icon-refresh"></i> <code>Manage synchronization</code> in the <i class="icon-stackedit"></i> menu. This will open a dialog box allowing you to add or remove synchronization links that are associated to your document.</p>
<blockquote>
<p><strong>NOTE:</strong> If you delete the file from <strong>Google Drive</strong> or from <strong>Dropbox</strong>, the document will no longer be synchronized with that location.</p>
</blockquote>
<hr>
<h2 class="wmd-title" id="publication">Publication</h2>
<p>Once you are happy with your document, you can publish it on different websites directly from <strong>StackEdit</strong>. As for now, <strong>StackEdit</strong> can publish on <strong>Blogger</strong>, <strong>Dropbox</strong>, <strong>Gist</strong>, <strong>GitHub</strong>, <strong>Google Drive</strong>, <strong>Tumblr</strong>, <strong>WordPress</strong> and on any SSH server.</p>
<h4 class="wmd-title" id="publish-a-document"><i class="icon-share"></i> Publish a document</h4>
<p>You can publish your document by going to the <i class="icon-share"></i> <code>Publish on</code> sub-menu and by choosing a website. In the dialog box, you can choose the publication format:</p>
<ul>
<li>Markdown, to publish the Markdown text on a website that can interpret it (<strong>GitHub</strong> for instance),</li>
<li>HTML, to publish the document converted into HTML (on a blog for instance),</li>
<li>Template, to have a full control of the output.</li>
</ul>
<blockquote>
<p><strong>NOTE:</strong> The default template is a simple webpage that wraps your document in HTML format. You can customize it in the <code>Publish</code> tab of the <i class="icon-cog"></i> <code>Settings</code> dialog.</p>
</blockquote>
<h4 class="wmd-title" id="update-a-publication"><i class="icon-share"></i> Update a publication</h4>
<p>After publishing, <strong>StackEdit</strong> will keep your document linked to that publish location so that you can update it easily. Once you have modified your document and you want to update your publication, click on the <i class="icon-share"></i> button in the navigation bar.</p>
<blockquote>
<p><strong>NOTE:</strong> The <i class="icon-share"></i> button is disabled when:</p>
<ul>
<li>you are offline,</li>
<li>or the document has not been published anywhere.</li>
</ul>
</blockquote>
<h4 class="wmd-title" id="manage-document-publication"><i class="icon-share"></i> Manage document publication</h4>
<p>Since one document can be published on multiple locations, you can list and manage publish locations by clicking <i class="icon-share"></i> <code>Manage publication</code> in the <i class="icon-stackedit"></i> menu. This will open a dialog box allowing you to remove publication links that are associated to your document.</p>
<blockquote>
<p><strong>NOTE:</strong> In some cases, if you remove the file from the website or the post from the blog, the document will no longer be published on that location.</p>
</blockquote>
<hr>
<h2 class="wmd-title" id="markdown-extra">Markdown Extra</h2>
<p><strong>StackEdit</strong> supports <strong>Markdown Extra</strong>, which extends <strong>Markdown</strong> syntax with some nice features.</p>
<h3 class="wmd-title" id="tables">Tables</h3>
<p><strong>Markdown Extra</strong> has a special syntax for tables:</p>
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody><tr>
<td>Computer</td>
<td><span>$</span>1600</td>
</tr>
<tr>
<td>Phone</td>
<td><span>$</span>12</td>
</tr>
<tr>
<td>Pipe</td>
<td><span>$</span>1</td>
</tr>
</tbody></table>
<p>You can specify column alignment with one or two colons:</p>
<table>
<thead>
<tr>
<th style="text-align:left;">Item</th>
<th style="text-align:right;">Value</th>
<th style="text-align:center;">Qty</th>
</tr>
</thead>
<tbody><tr>
<td style="text-align:left;">Computer</td>
<td style="text-align:right;"><span>$</span>1600</td>
<td style="text-align:center;">5</td>
</tr>
<tr>
<td style="text-align:left;">Phone</td>
<td style="text-align:right;"><span>$</span>12</td>
<td style="text-align:center;">12</td>
</tr>
<tr>
<td style="text-align:left;">Pipe</td>
<td style="text-align:right;"><span>$</span>1</td>
<td style="text-align:center;">234</td>
</tr>
</tbody></table>
<h3 class="wmd-title" id="definition-lists">Definition Lists</h3>
<p><strong>Markdown Extra</strong> has a special syntax for definition lists too:</p>
<dl>
<dt>Term 1</dt>
<dt>Term 2</dt>
<dd>Definition A</dd>
<dd>Definition B</dd>
<dt>Term 3</dt>
<dd>
<p>Definition C</p>
</dd>
<dd>
<p>Definition D</p>
<blockquote>
<p>part of definition D</p>
</blockquote>
</dd>
</dl>
<h3 class="wmd-title" id="fenced-code-blocks">Fenced code blocks</h3>
<p><strong>GitHub</strong>'s fenced code blocks are also supported with <strong>Prettify</strong> syntax highlighting:</p>
<pre class="prettyprint prettyprinted" style=""><code><span class="com">// Foo</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> bar </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span></code></pre>
<blockquote>
<p><strong>NOTE:</strong> To use <strong>Highlight.js</strong> instead of <strong>Prettify</strong>, just configure the <code>Markdown Extra</code> extension in the <i class="icon-cog"></i> <code>Settings</code> dialog.</p>
</blockquote>
<h3 class="wmd-title" id="special-attributes">Special Attributes</h3>
<p>With <strong>Markdown Extra</strong>, you can specify <code>class</code> and <code>id</code> attributes on headers and fenced code blocks just like this:</p>
<h5 id="my-header" class="wmd-title">Header example</h5>
<pre id="my-id" class="my-class prettyprint prettyprinted" style=""><code><span class="kwd">var</span><span class="pln"> foo </span><span class="pun">=</span><span class="pln"> bar</span><span class="pun">;</span></code></pre>
<p>Then you can create cross-references like this: <a href="#welcome">beginning of the document</a>.</p>
<h3 class="wmd-title" id="footnotes">Footnotes</h3>
<p>You can create footnotes like this<a href="#fn:footnote" id="fnref:footnote" title="See footnote" class="footnote">2</a>.</p>
<h3 class="wmd-title" id="table-of-contents">Table of contents</h3>
<p>You can insert a table of contents using the marker <code>[TOC]</code>:</p>
<p><div class="toc">
<ul>
<li><a href="#welcome">Welcome to StackEdit! </a><ul>
<li><a href="#documents">Documents</a><ul>
<li><ul>
<li><a href="#create-a-document"> Create a document</a></li>
<li><a href="#switch-to-another-document"> Switch to another document</a></li>
<li><a href="#rename-a-document"> Rename a document</a></li>
<li><a href="#delete-a-document"> Delete a document</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#synchronization">Synchronization</a><ul>
<li><ul>
<li><a href="#import-a-document"> Import a document</a></li>
<li><a href="#export-a-document"> Export a document</a></li>
<li><a href="#synchronize-a-document"> Synchronize a document</a></li>
<li><a href="#manage-document-synchronization"> Manage document synchronization</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#publication">Publication</a><ul>
<li><ul>
<li><a href="#publish-a-document"> Publish a document</a></li>
<li><a href="#update-a-publication"> Update a publication</a></li>
<li><a href="#manage-document-publication"> Manage document publication</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#markdown-extra">Markdown Extra</a><ul>
<li><a href="#tables">Tables</a></li>
<li><a href="#definition-lists">Definition Lists</a></li>
<li><a href="#fenced-code-blocks">Fenced code blocks</a></li>
<li><a href="#special-attributes">Special Attributes</a><ul>
<li><ul>
<li><a href="#my-header">Header example</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#footnotes">Footnotes</a></li>
<li><a href="#table-of-contents">Table of contents</a></li>
<li><a href="#mathjax">MathJax</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>
<h3 class="wmd-title" id="mathjax">MathJax</h3>
<p>You can render <em>LaTeX</em> mathematical expressions using <strong>MathJax</strong>, as on <a href="http://math.stackexchange.com/">math.stackexchange.com</a>:</p>
<p>The <em>Gamma function</em> satisfying <span class="MathJax_Preview"></span><span class="MathJax" id="MathJax-Element-1-Frame" role="textbox" aria-readonly="true" style=""><nobr><span class="math" id="MathJax-Span-1" style="width: 13.039em; display: inline-block;"><span style="display: inline-block; position: relative; width: 10.836em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(1.729em 1000.003em 2.92em -0.533em); top: -2.557em; left: 0.003em;"><span class="mrow" id="MathJax-Span-2"><span class="mi" id="MathJax-Span-3" style="font-family: STIXGeneral-Regular;">Γ</span><span class="mo" id="MathJax-Span-4" style="font-family: STIXGeneral-Regular;">(</span><span class="mi" id="MathJax-Span-5" style="font-family: STIXGeneral-Italic;">n</span><span class="mo" id="MathJax-Span-6" style="font-family: STIXGeneral-Regular;">)</span><span class="mo" id="MathJax-Span-7" style="font-family: STIXGeneral-Regular; padding-left: 0.301em;">=</span><span class="mo" id="MathJax-Span-8" style="font-family: STIXGeneral-Regular; padding-left: 0.301em;">(</span><span class="mi" id="MathJax-Span-9" style="font-family: STIXGeneral-Italic;">n</span><span class="mo" id="MathJax-Span-10" style="font-family: STIXGeneral-Regular; padding-left: 0.241em;">−</span><span class="mn" id="MathJax-Span-11" style="font-family: STIXGeneral-Regular; padding-left: 0.241em;">1</span><span class="mo" id="MathJax-Span-12" style="font-family: STIXGeneral-Regular;">)</span><span class="mo" id="MathJax-Span-13" style="font-family: STIXGeneral-Regular;">!</span><span class="mspace" id="MathJax-Span-14" style="height: 0.003em; vertical-align: 0.003em; width: 1.134em; display: inline-block; overflow: hidden;"></span><span class="mi" id="MathJax-Span-15" style="font-family: STIXGeneral-Regular;">∀</span><span class="mi" id="MathJax-Span-16" style="font-family: STIXGeneral-Italic;">n</span><span class="mo" id="MathJax-Span-17" style="font-family: STIXGeneral-Regular; padding-left: 0.301em;">∈</span><span class="texatom" id="MathJax-Span-18" style="padding-left: 0.301em;"><span class="mrow" id="MathJax-Span-19"><span class="mi" id="MathJax-Span-20" style="font-family: STIXGeneral-Regular;">ℕ</span></span></span></span><span style="display: inline-block; width: 0px; height: 2.562em;"></span></span></span><span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 1.146em; vertical-align: -0.282em;"></span></span></nobr></span><script type="math/tex" id="MathJax-Element-1">\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N</script> is via through the Euler integral</p>
<p><span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: center;"><span class="MathJax" id="MathJax-Element-2-Frame" style=""><nobr><span class="math" id="MathJax-Span-21" style="width: 11.313em; display: inline-block;"><span style="display: inline-block; position: relative; width: 9.408em; height: 0px; font-size: 120%;"><span style="position: absolute; clip: rect(0.955em 1000.003em 3.693em -0.533em); top: -2.557em; left: 0.003em;"><span class="mrow" id="MathJax-Span-22"><span class="mi" id="MathJax-Span-23" style="font-family: STIXGeneral-Regular;">Γ</span><span class="mo" id="MathJax-Span-24" style="font-family: STIXGeneral-Regular;">(</span><span class="mi" id="MathJax-Span-25" style="font-family: STIXGeneral-Italic;">z</span><span class="mo" id="MathJax-Span-26" style="font-family: STIXGeneral-Regular;">)</span><span class="mo" id="MathJax-Span-27" style="font-family: STIXGeneral-Regular; padding-left: 0.301em;">=</span><span class="msubsup" id="MathJax-Span-28" style="padding-left: 0.301em;"><span style="display: inline-block; position: relative; width: 2.027em; height: 0px;"><span style="position: absolute; clip: rect(2.086em 1000.003em 4.705em -0.473em); top: -3.628em; left: 0.003em;"><span class="mo" id="MathJax-Span-29" style="font-family: STIXIntegralsD; vertical-align: -0.592em;">∫<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.479em;"></span></span><span style="display: inline-block; width: 0px; height: 3.634em;"></span></span><span style="position: absolute; clip: rect(1.789em 1000.003em 2.443em -0.473em); top: -3.39em; left: 1.313em;"><span class="mi" id="MathJax-Span-30" style="font-size: 70.7%; font-family: STIXGeneral-Regular;">∞</span><span style="display: inline-block; width: 0px; height: 2.265em;"></span></span><span style="position: absolute; clip: rect(1.61em 1000.003em 2.443em -0.533em); top: -1.366em; left: 0.658em;"><span class="mn" id="MathJax-Span-31" style="font-size: 70.7%; font-family: STIXGeneral-Regular;">0</span><span style="display: inline-block; width: 0px; height: 2.265em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-32" style="padding-left: 0.182em;"><span style="display: inline-block; position: relative; width: 1.61em; height: 0px;"><span style="position: absolute; clip: rect(1.848em 1000.003em 2.741em -0.473em); top: -2.557em; left: 0.003em;"><span class="mi" id="MathJax-Span-33" style="font-family: STIXGeneral-Italic;">t<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span style="display: inline-block; width: 0px; height: 2.562em;"></span></span><span style="position: absolute; top: -2.676em; left: 0.42em;"><span class="texatom" id="MathJax-Span-34"><span class="mrow" id="MathJax-Span-35"><span class="mi" id="MathJax-Span-36" style="font-size: 70.7%; font-family: STIXGeneral-Italic;">z</span><span class="mo" id="MathJax-Span-37" style="font-size: 70.7%; font-family: STIXGeneral-Regular;">−</span><span class="mn" id="MathJax-Span-38" style="font-size: 70.7%; font-family: STIXGeneral-Regular;">1</span></span></span><span style="display: inline-block; width: 0px; height: 2.265em;"></span></span></span></span><span class="msubsup" id="MathJax-Span-39"><span style="display: inline-block; position: relative; width: 1.253em; height: 0px;"><span style="position: absolute; clip: rect(1.967em 1000.003em 2.741em -0.473em); top: -2.557em; left: 0.003em;"><span class="mi" id="MathJax-Span-40" style="font-family: STIXGeneral-Italic;">e</span><span style="display: inline-block; width: 0px; height: 2.562em;"></span></span><span style="position: absolute; top: -2.676em; left: 0.479em;"><span class="texatom" id="MathJax-Span-41"><span class="mrow" id="MathJax-Span-42"><span class="mo" id="MathJax-Span-43" style="font-size: 70.7%; font-family: STIXGeneral-Regular;">−</span><span class="mi" id="MathJax-Span-44" style="font-size: 70.7%; font-family: STIXGeneral-Italic;">t<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span></span></span><span style="display: inline-block; width: 0px; height: 2.265em;"></span></span></span></span><span class="mi" id="MathJax-Span-45" style="font-family: STIXGeneral-Italic;">d<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mi" id="MathJax-Span-46" style="font-family: STIXGeneral-Italic;">t<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mspace" id="MathJax-Span-47" style="height: 0.003em; vertical-align: 0.003em; width: 0.182em; display: inline-block; overflow: hidden;"></span><span class="mo" id="MathJax-Span-48" style="font-family: STIXGeneral-Regular;">.</span></span><span style="display: inline-block; width: 0px; height: 2.562em;"></span></span></span><span style="border-left-width: 0.004em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 2.932em; vertical-align: -1.211em;"></span></span></nobr></span></div><script type="math/tex; mode=display" id="MathJax-Element-2">
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
</script></p>
<blockquote>
<p><strong>NOTE:</strong> You can find more information:</p>
<ul>
<li>about <strong>Markdown</strong> syntax <a href="http://daringfireball.net/projects/markdown/syntax" title="Markdown">here</a>,</li>
<li>about <strong>Markdown Extra</strong> extension <a href="https://github.com/jmcmanus/pagedown-extra" title="Pagedown Extra">here</a>,</li>
<li>about <strong>Prettify</strong> syntax highlighting <a href="https://code.google.com/p/google-code-prettify/">here</a>.</li>
<li>about <strong>Highlight.js</strong> syntax highlighting <a href="http://softwaremaniacs.org/soft/highlight/en/">here</a>.</li>
</ul>
</blockquote>
<div class="footnotes"><hr><ol><li id="fn:stackedit">StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. <a href="#fnref:stackedit" title="Return to article" class="reversefootnote">↩</a></li><li id="fn:footnote">Here is the <em>text</em> of the <strong>footnote</strong>. <a href="#fnref:footnote" title="Return to article" class="reversefootnote">↩</a></li></ol></div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment