1 contributor
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
<title>Minimalist Online Markdown Editor</title>
<meta name="description" content="This is the simplest and slickest online Markdown editor. Just write Markdown and see what it looks like as you type. And convert it to HTML in one click."/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta property="og:image" content="http://markdown.pioul.fr/images/markdown.png"/>
<link id="theme-default" href="css/bundle-light-theme-a23557fd.css" rel="stylesheet" type="text/css"/>
<link id="theme" href="" rel="stylesheet" type="text/css"/>
<link id="theme-light-ref" data-href="css/bundle-light-theme-a23557fd.css" rel="stylesheet" type="text/css"/>
<link id="theme-dark-ref" data-href="css/bundle-dark-theme-f217d64d.css" rel="stylesheet" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="js/all-fecafa1e.js"></script>
</head>
<body class="clearfix">
<div id="left-column">
<div id="top_panels_container">
<div class="top_panel" id="quick-reference">
<div class="close">×</div>
<h2>Quick Reference</h2>
<table>
<tr>
<td>
<pre><code><span class="highlight">*</span>This is italicized<span class="highlight">*</span>, <wbr/>and <span class="highlight">**</span>this is bold<span class="highlight">**</span>.</code></pre>
</td>
<td><p>Use <code>*</code> or <code>_</code> for emphasis.</p></td>
</tr>
<tr>
<td>
<pre><code><span class="highlight">#</span> This is a first level header</code></pre>
</td>
<td><p>Use one or more hash marks for headers: <code># H1</code>, <code>## H2</code>, <code>### H3</code>…</p></td>
</tr>
<tr>
<td>
<pre><code>This is a link to <wbr/><span class="highlight">[Google](http://www.google.com)</span></code></pre>
</td>
<td><p></p></td>
</tr>
<tr>
<td>
<pre><code>First line.<span class="highlight"> </span>
Second line.</code></pre>
</td>
<td><p>End a line with two spaces for a linebreak.</p></td>
</tr>
<tr>
<td>
<pre><code><span class="highlight">- </span>Unordered list item
<span class="highlight">- </span>Unordered list item</code></pre>
</td>
<td><p>Unordered (bulleted) lists use asterisks, pluses, or hyphens (<code>*</code>, <code>+</code>, or <code>-</code>) as list markers.</p></td>
</tr>
<tr>
<td>
<pre><code><span class="highlight">1. </span>Ordered list item
<span class="highlight">2. </span>Ordered list item</code></pre>
</td>
<td><p>Ordered (numbered) lists use regular numbers, followed by periods, as list markers.</p></td>
</tr>
<tr>
<td><pre><code><span class="highlight"> </span>/* This is a code block */</code></pre></td>
<td><p>Indent four spaces for a preformatted block.</p></td>
</tr>
<tr>
<td><pre><code>Let's talk about <span class="highlight">`</span><html><span class="highlight">`</span>!</code></pre></td>
<td><p>Use backticks for inline code.</p></td>
</tr>
<tr>
<td>
<pre><code><span class="highlight"></span></code></pre>
</td>
<td><p>Images are exactly like links, with an exclamation mark in front of them.</p></td>
</tr>
</table>
<p><a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Full Markdown documentation</a></p>
</div>
<div class="top_panel" id="about">
<div class="close">×</div>
<h2>About MME</h2>
<p>Hi, I'm <a href="http://pioul.fr/a-propos/" target="_blank">Philippe Masset</a>.</p>
<p>I made the Minimalist Online Markdown Editor because I love Markdown and simple things.<br/>
The whole source code is on <a href="https://github.com/pioul/Minimalist-Online-Markdown-Editor" target="_blank">GitHub</a>, and this editor is also available offline and with file support as a <a href="https://chrome.google.com/webstore/detail/minimalist-markdown-edito/pghodfjepegmciihfhdipmimghiakcjf" target="_blank">Chrome app</a>.</p>
<p>If you have any suggestions or remarks whatsoever, just click on my name above and you'll have plenty of ways of contacting me.</p>
<h3>Privacy</h3>
<ul>
<li>No data is sent to any server – everything you type stays inside your browser</li>
<li>The editor automatically saves what you write locally for future use.<br/>
If using a public computer, either empty the left panel before leaving the editor or use your browser's privacy mode</li>
</ul>
</div>
<div class="top_panel" id="settings">
<div class="close">×</div>
<h2>Settings</h2>
<p>
<label>Text size</label>
<a href="#" class="button" id="decrease-font-size"></a>
<a href="#" class="button" id="increase-font-size"></a>
</p>
<p>
<label>Theme</label>
<span class="theme-control theme-control-dark">
Light
<a href="#" class="button" id="use-dark-theme">Change to Dark Theme</a>
</span>
<span class="theme-control theme-control-light">
Dark
<a href="#" class="button" id="use-light-theme">Change to Light Theme</a>
</span>
</p>
<h2>Shortcuts</h2>
<ul>
<li><kbd>Ctrl</kbd> + <kbd>+</kbd> to increase the text size</li>
<li><kbd>Ctrl</kbd> + <kbd>-</kbd> to decrease the text size</li>
</ul>
<h3>Shortcuts on Mac</h3>
<p>On Mac, replace <kbd>Ctrl</kbd> with <kbd>⌘</kbd> (the command key) in the shortcuts above.</p>
</div>
</div>
<div class="wrapper">
<div class="topbar hidden-when-fullscreen">
<div class="buttons-container clearfix">
<a href="#" class="button toppanel" data-toppanel="quick-reference">Quick Reference</a>
<a href="#" class="button toppanel" data-toppanel="about">About</a>
<a href="#" class="button icon-settings toppanel" data-toppanel="settings"></a>
<a href="#" class="button icon-fullscreen feature" data-feature="fullscreen" data-tofocus="markdown" title="Go fullscreen"></a>
</div>
</div>
<a href="#" id="downloadMD"><img src="img/md.png" width="24px" height="24px"></img></a>
<textarea id="markdown" class="full-height" placeholder="Write Markdown"># Minimalist Online Markdown Editor
This is the **simplest** and **slickest** online Markdown editor.
Just write Markdown and see what it looks like as you type. And convert it to HTML in one click.
## Getting started
### How?
Just start typing in the left panel.
### Buttons you might want to use
- **Quick Reference**: that's a reminder of the most basic rules of Markdown
- **HTML | Preview**: *HTML* to see the markup generated from your Markdown text, *Preview* to see how it looks like
### Privacy
- No data is sent to any server – everything you type stays inside your browser
- The editor automatically saves what you write locally for future use.
If using a public computer, either empty the left panel before leaving the editor or use your browser's privacy mode</textarea>
</div>
</div>
<div id="right-column">
<div class="wrapper">
<div class="topbar hidden-when-fullscreen">
<div class="buttons-container clearfix">
<div class="button-group">
<a href="#" class="button switch" data-switchto="html">HTML</a>
<a href="#" class="button switch" data-switchto="preview">Preview</a>
</div>
<a href="#" class="button icon-sync-scroll feature" data-feature="sync-scroll" title="Toggle sync-scrolling (when enabled, the preview panel will automatically scroll with the left panel)"></a>
<a href="#" class="button icon-fullscreen feature" data-feature="fullscreen" data-tofocus="" title="Go fullscreen"></a><!-- data-tofocus is set dynamically by the HTML/preview switch -->
</div>
</div>
<div class="bottom-bar hidden-when-fullscreen clearfix">
<div class="word-count"></div>
</div>
<a href="#" id="downloadHTML"><img src="img/html5.png" width="24px" height="24px"></img></a>
<a href="#" id="downloadPDF" style="display: inline"><img src="img/pdf.png" width="24px" height="24px"></a>
<textarea id="html" class="full-height"></textarea>
<div id="preview" class="full-height"></div>
</div>
</div>
<div class="topbar visible-when-fullscreen">
<div class="buttons-container clearfix">
<div class="button-group">
<a href="#" class="button switch" data-switchto="markdown">Markdown</a>
<a href="#" class="button switch" data-switchto="html">HTML</a>
<a href="#" class="button switch" data-switchto="preview">Preview</a>
</div>
<a href="#" class="button icon-fullscreen feature" data-feature="fullscreen" title="Exit fullscreen"></a>
</div>
</div>
<div class="bottom-bar visible-when-fullscreen clearfix">
<div class="word-count"></div>
</div>
</body>
<script src="js/jspdf.min.js"></script>
<script>
function downloadInnerHtml(filename, elId, mimeType) {
var elHtml = document.getElementById(elId).innerHTML;
var link = document.createElement('a');
mimeType = mimeType || 'text/plain';
link.setAttribute('download', filename);
link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
link.click();
}
var fileNameMD = 'myfile.md';
$('#downloadMD').click(function(){
downloadInnerHtml(fileNameMD, 'markdown','text/html');
});
var fileNameHTML = 'myfile.html';
$('#downloadHTML').click(function(){
downloadInnerHtml(fileNameHTML, 'preview','text/html');
});
//jsPDF test
var fileNamePDF = 'myfile.pdf';
function printPDF() {
var printDoc = new jsPDF();
printDoc.fromHTML($('#preview').get(0), 10, 10, {'width': 180});
printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
//printDoc.autoPrint()
printDoc.save(fileNamePDF)
}
$('#downloadPDF').click(function(){
printPDF();
});
</script>
</html>