electron-markdownify
Version:
A minimalist Markdown Editor
161 lines (158 loc) • 8.28 kB
HTML
<html>
<head>
<title>New document - Markdownify</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/base16-dark.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/dialog.css">
<link rel="stylesheet" href="css/default.css">
</head>
<body class="container-fluid">
<div class="optContainer">
<div class="mode">
<span class="toolContainer">
<a id="angleToolBar" title="Toolbar" class="fa fa-angle-double-right" onclick="showToolBar();" style="cursor: pointer;text-decoration:none;"></a>
</span>
<span>
<label style="vertical-align: middle;" title="Light Mode"><input type="radio" name="changeTheme" value="light" onclick="changeTheme(this);" title="Light Mode" checked="checked"> <b>Light</b></label>
<label style="vertical-align: middle;" title="Dark Mode"><input type="radio" name="changeTheme" value="dark" onclick="changeTheme(this);" title="Dark Mode"> <b>Dark</b></label>
</span>
</div>
<div class="pref" id="pref">
<div class="module">
<label><input type="checkbox" id="syncScroll" checked> Sync Scrolling</label>
</div>
<div class="module format">
<label><input type="radio" name="showPreference" value="html" onclick="clkPref(this);"> <b>HTML</b></label>
<label><input type="radio" name="showPreference" value="preview" onclick="clkPref(this);" checked="checked"> <b>Preview</b></label>
</div>
</div>
</div>
<div id="toolbarArea">
<div style="padding-left:10px;">
<a onclick="toggleFormat('bold');" title="Bold [Ctrl+B]" class="fa fa-bold editor-toolbar"></a>
<a onclick="toggleFormat('italic');" title="Italic [Ctrl+I]" class="fa fa-italic editor-toolbar"></a>
<a onclick="toggleHeadingSmaller();" title="Header [Ctrl+H]" class="fa fa-header editor-toolbar"></a>
<a onclick="toggleFormat('strikethrough');" title="StrikeThrough [Ctrl+/]" class="fa fa-strikethrough editor-toolbar"></a>
<i class="separator">|</i>
<a onclick="toggleBlockquote();" title="Quote" class="fa fa-quote-left editor-toolbar"></a>
<a onclick="toggleUnorderedList();" title="Unordered List" class="fa fa-list-ul editor-toolbar"></a>
<a onclick="toggleOrderedList();" title="Ordered List" class="fa fa-list-ol editor-toolbar"></a>
<i class="separator">|</i>
<a onclick="drawLink();" title="Create Link [Ctrl+L]" class="fa fa-link editor-toolbar"></a>
<a onclick="drawImage();" title="Insert Image [Ctrl+Alt+I]" class="fa fa-picture-o editor-toolbar"></a>
<a onclick="drawTable();" title="Insert Table [Ctrl+Shift+T]" class="fa fa-table editor-toolbar"></a>
<a onclick="drawHorizontalRule();" title="Insert Horizontal Rule" class="fa fa-minus editor-toolbar"></a>
<i class="separator">|</i>
<a onclick="toggleSidePanel();" title="Side-By-Side Panel Toggle" class="fa fa-columns editor-toolbar"></a>
<a data-toggle="modal" data-target="#myModal" title="Markdown Help" class="fa fa-question-circle editor-toolbar"></a>
</div>
</div>
<section class="row" id="editArea" style="padding-top: 24px;">
<div class="col-md-6 full-height cmpad" style="box-shadow: -10px 13px 6px 10px rgba(0,0,0,0.4);" id="textPanel">
<textarea id="plainText" placeholder="Write your Markdown here.." autofocus></textarea>
</div>
<div class="col-md-6 full-height" style="overflow-y: auto;display:block;" id="previewPanel">
<div id="markdown"></div>
<textarea id="htmlPreview" class="mdHtml"></textarea>
</div>
</section>
<!-- Markdown Help Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Markdown Help</h4>
</div>
<div class="modal-body">
<section class="modal--default__content" id="modal-body-region">
<table class="markdown-help-content">
<tbody>
<tr>
<td><strong>Bold</strong></td>
<td>**bold**</td>
</tr>
<tr>
<td><i>Italics</i></td>
<td>*italics*</td>
</tr>
<tr>
<td><del>Strikethrough</del></td>
<td>~~strikethrough~~</td>
</tr>
<tr>
<td>Header</td>
<td># H1 ## H2 ### H3</td>
</tr>
<tr>
<td><li>item</li></td>
<td>* item</td>
</tr>
<tr>
<td>Blockquote</td>
<td>> blockquote</td>
</tr>
<tr>
<td><span class="issue open">#123</span> (issue)</td>
<td>#123</td>
</tr>
<tr>
<td><a href="https://github.com/amitmerchant1990/electron-markdownify" target="_rick">Link</a></td>
<td>[title](http://)</td>
</tr>
<tr>
<td>Image</td>
<td></td>
</tr>
<tr>
<td><code>code</code></td>
<td>`code`</td>
</tr>
<tr>
<td>L<sup>a</sup>T<sub>e</sub>X</td>
<td>$$LaTeX code$$</td>
</tr>
<tr>
<td><pre style="display: inline-block; margin: 4px 0"><code><span class="keyword">var </span>code = <span class="string">"formatted"</span>;</code></pre></td>
<td style="line-height: 100%">``` <i style="color: rgba(0,0,0,0.5)">(shift+enter for line break)</i><br>var code = "formatted";<br>```</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="js/libs/marked.min.js"></script>
<script src="js/libs/codemirror.js"></script>
<script src="js/libs/search.js"></script>
<script src="js/libs/searchcursor.js"></script>
<script src="js/libs/dialog.js"></script>
<script src="js/libs/closebrackets.js"></script>
<script src="js/markdown/markdown.js"></script>
<script src="js/app.js"></script>
<script src="js/format.js"></script>
<script src="js/functions.js"></script>
<script src="js/ipc_renderer.js"></script>
<script src="js/emoji.js"></script>
<script>
document.addEventListener("keydown", function (e) {
if (e.which === 123) {
require('remote').getCurrentWindow().toggleDevTools();
}
});
</script>
</body>
</html>