-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
118 lines (104 loc) · 3.91 KB
/
index.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141855237-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141855237-1');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Latex to Markdown - Online Converter & Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="title" content="Latex to Markdown - Online Converter & Editor">
<meta name="description"
content="Convert & Edit online your latex mathematical notation formulae into images ready to be embeded in your markdown.">
<!--
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
-->
<style>
html,
body {
height: 100%;
margin: 0px;
}
textarea {
width: calc(100% - 2px);
padding: 0;
height: 40%;
display: inline-block;
}
h1, h2 {
display: block;
_font-size: initial;
margin-block-start: initial;
margin-block-end: initial;
margin-inline-start: initial;
margin-inline-end: initial;
_font-weight: initial;
}
a:hover {
opacity: .8;
}
</style>
</head>
<body style="display: flex;flex-flow: column;">
<header style="padding: 8px;
background-image: linear-gradient(to right, #5f9ec0, #5a9fb9, #599fb1, #5b9fa8, #5f9ea0); display:flex;
flex-direction: row; align-items: center; flex: 0 1 auto;">
<h1 style="font-size:medium;">Online Converter & Editor - Latex math notation to Markdown</h1>
<a style="margin-left:auto;" href="https://github.com/8HoLoN/latex-to-markdown" target="_blank" title="GitHub">
<img style="height:24px;" src="./github-icon.svg" alt="github-icon">
</a>
</header>
<main style="flex: 1 1 auto;">
<div style="display: table;width: 100%;">
<div style="display: table-cell;width: 50%;">
<h2>Latex</h1>
<textarea id="latex" rows="5"
cols="33">\mathcal{W}(A,f) = (T,\bar{f}) \\ \therefore \mathcal{W}(A,f) = (T,\bar{f})</textarea>
</div>
<div style="display: table-cell;width: 50%;">
<h2>Markdown</h1>
<textarea id="md" rows="5" cols="33"></textarea>
</div>
</div>
<div>
<h2>Render</h1>
<img id="render" style="margin: 10px;" src="">
</div>
</main>
<script>
const baseUrl = `https://latex.codecogs.com/svg.latex?`;// gif png pdf swf emf svg
document.querySelector('#latex').addEventListener('input', e => {
// e.currentTarget.value
displayFormula();
})
/*
<\\> : breakline
<\ > : space
//*/
// decodeURI
// decodeURIComponent
// encodeURI
// encodeURIComponent
const displayFormula = () => {
let latex = document.querySelector('#latex').value;// .textContent;
latex = `\\\\ ${latex}`;
//latex = latex.replace(/ /g," \\ "); handle multiple spaces
latex = latex.replace(/\n/g, " \\\\ ");
//console.log(latex);
const latexEncoded = encodeURIComponent(latex);
const link = `${baseUrl}${latexEncoded}`;
document.querySelector('#render').src = link;
const md = `[](#_)`;
document.querySelector('#md').value = md;
}
displayFormula();
</script>
</body>
</html>