Skip to content

Instantly share code, notes, and snippets.

@Sup3rc4l1fr4g1l1571c3xp14l1d0c10u5

Sup3rc4l1fr4g1l1571c3xp14l1d0c10u5/memo.html

Created April 6, 2017 19:35
Show Gist options
  • Save Sup3rc4l1fr4g1l1571c3xp14l1d0c10u5/85a3737ec4059aaf8654dc0959fd21c9 to your computer and use it in GitHub Desktop.
Save Sup3rc4l1fr4g1l1571c3xp14l1d0c10u5/85a3737ec4059aaf8654dc0959fd21c9 to your computer and use it in GitHub Desktop.
Download ZIP
A simple notepad that can interactively write Markdown syntax.
Raw
memo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>memo.md</title>
<meta name="description" content="README.md">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.js" crossorigin="anonymous"></script>
<script type="text/javascript" >
var editor = null;
$(document).ready( function (){
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
editor = CodeMirror.fromTextArea($('#markdown_textarea')[0], { lineNumbers: true, lineWrapping: true });
editor.setSize("100%","100vh");
var text = editor.getValue();
var html = marked(text);
$("#markdown").html(html);
editor.on('change', function() { $("#markdown").html(marked(editor.getValue())); });
});
function toggleEditArea() {
if ($('#editarea').hasClass('col-sm-0')) {
showEditArea();
} else {
hideEditArea();
}
}
function hideEditArea() {
$('#editarea').removeClass('col-sm-6').addClass('col-sm-0');
$('#markdown').removeClass('col-sm-6').addClass('col-sm-12');
}
function showEditArea() {
$('#editarea').removeClass('col-sm-0').addClass('col-sm-6');
$('#markdown').removeClass('col-sm-12').addClass('col-sm-6');
}
function save() {
var md = editor.getValue();
var parent = $('#editarea').parent();
var editarea = $('#editarea');
editarea.detach();
var textarea = $('<textarea id="markdown_textarea"></textarea>');
textarea.text(md);
var fakeeditarea = $('<div id="editarea" class="col col-sm-6"></div>');
fakeeditarea.append(textarea);
parent.append(fakeeditarea);
var markdown = $('#markdown');
markdown.detach();
var fakemarkdown = $('<div id="markdown" class="col col-sm-6"></div>');
parent.append(fakemarkdown);
var text = $('html').prop('outerHTML');
fakeeditarea.remove();
fakemarkdown.remove();
parent.append(editarea);
parent.append(markdown);
var blob = new Blob([text], {type : "application/octet-stream"});
var a = document.createElement("a");
a.download = location.href.substring(location.href.lastIndexOf('/')+1);
a.href = URL.createObjectURL(blob);
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
<style>
html, body { width: 100%; height: 100%; }
.col-sm-0 { display: none; }
.col-sm-12 { padding-left: 3em; }
</style>
</head>
<body>
<div class="sidebar-nav affix" role="complementary">
<ul id="sidemenu" class="nav nav-pills nav-stacked" style="float: left; background-color: #cccccc; margin: 0; padding: 0; height: 100vh">
<li><a href="#" onclick="toggleEditArea(); return false;"><i class="glyphicon glyphicon-pencil"></i></a></li>
<li><a href="#" onclick="save(); return false;"><i class="glyphicon glyphicon-download"></i></a></li>
</ul>
</div>
<div class="container-fluid" style="width: 100%; padding-left: 3em">
<div class="row">
<div id="editarea" class="col col-sm-6">
<textarea id="markdown_textarea"></textarea>
</div>
<div id="markdown" class="col col-sm-6">
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment