-
Notifications
You must be signed in to change notification settings - Fork 2
/
editor.html
executable file
·88 lines (73 loc) · 2.79 KB
/
editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Math Blog Editor</title>
<link rel="shortcut icon" href="lib/img/tiles.png" type="image/png"/>
<script src="lib/js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="lib/js/showdown.min.js"></script>
<script src="lib/js/codemirror.js"></script>
<script src="lib/js/markdown.js"></script>
<link href="lib/css/codemirror.css" rel="stylesheet">
<link href="lib/css/style.css" rel="stylesheet">
</head>
<body>
<div id="MathInput">
<div class="header">
<h1>
JFourier Editor<br/>
<small>Type your latex below, see the formatted output on the right!</small>
</h1>
</div>
<form>
<textarea name="code" id="code">
# Let's write some math!
---
## Latex enabled Editor
This is a LaTeX enabled text editor that lets you write math formulas.
$ \frac{2}{3}$
</textarea>
</form>
<div class="footer">
<p>Code on <a href="http://github.com/katychuang/jfourier">Github</a>. Designed by <a href="http://katychuang.com">Dr. Kat</a></p>
</div>
</div>
<div id="MathOutput"></div>
<div style="clear:both"></div>
</body>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
t = document.getElementById('code');
var delay;
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
lineWrapping: true,
fixedGutter: true,
gutter: true,
mode: 'markdown',
tabMode: 'indent',
keyMap: 'default',
});
editor.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
updatePreview();
function updatePreview() {
console.log("test change");
var converter = new Showdown.converter();
var TeX = editor.getValue();
document.getElementById("MathOutput").innerHTML = converter.makeHtml(TeX);
//reprocess the MathOutput Element
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"MathOutput"]);
}
});//]]>
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
</html>