Skip to content

Instantly share code, notes, and snippets.

@sslotsky

sslotsky/md.html

Created November 8, 2015 06:41
Show Gist options
  • Save sslotsky/e7fafc0e162a201a26bf to your computer and use it in GitHub Desktop.
Save sslotsky/e7fafc0e162a201a26bf to your computer and use it in GitHub Desktop.
Download ZIP
Simple knockout example shows markdown text on the right as you enter text on the left
Raw
md.html
<html>
<head>
<script src="./marked.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="./tomorrow-night-eighties.css">
<script src="http://cdn.jsdelivr.net/highlight.js/8.9.1/highlight.min.js"></script>
<style>
#marked pre {
word-wrap: normal;
white-space: pre;
overflow: auto;
background-color: beige;
margin: 0;
}
div.column {
width: 45%;
float: left;
padding-right: 10px;
}
textarea {
border: none;
outline: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/html" id="panes-template">
<div class="column">
<textarea data-bind="value: content, valueUpdate: 'afterkeydown'"></textarea>
</div>
<div class="column">
<span id="marked" data-bind="html: marked"></span>
</div>
</script>
<div id="md" class="row">
<div data-bind="template: { name: 'panes-template', data: $data }"></div>
</div>
<script type="text/javascript">
marked.setOptions({
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
var Post = function() {
this.content = ko.observable();
this.marked = ko.computed(function() {
return marked(unescape(this.content() || ""));
}, this);
};
var post = new Post();
ko.applyBindings(post, document.getElementById("md"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment