-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
84 lines (70 loc) · 3.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Markdown Table Formatter</title>
<script type="text/javascript" src="src/MarkdownTableFormatter.js"></script>
<script>
function format_table() {
var md_table_holder = document.getElementById('md_table_holder');
var mtf = new MarkdownTableFormatter();
mtf.format_table(md_table_holder.value)
md_table_holder.value = mtf.output_table;
}
function loadExample(example_number) {
var md_table_holder = document.getElementById('md_table_holder');
switch (example_number) {
case 1:
document.getElementById('md_table_holder').value = "| h1 | h2 | h3 |\n|-|-|-|\n| data1 | data2 | data3 |";
break;
case 2:
document.getElementById('md_table_holder').value = "h1 | h2 | h3\n-|-|-\ndata-1 | data-2 | data-3";
break;
case 3:
document.getElementById('md_table_holder').value = "| Header 1 | Header 2 | Header 3 |\n|----|---|-|\n| data1a | Data is longer than header | 1 |\n| d1b | add a cell|\n|lorem|ipsum|3|\n| | empty outside cells\n| skip| | 5 |\n| six | Morbi purus | 6 |";
}
}
</script>
<style type="text/css">
body { background-color: #e6e6e2; }
#mainWrapper { width: 850px; margin: auto;}
textarea { width: 850px; height: 300px; font-family: monospace; font-size: 14px; white-space: pre; word-wrap: normal; overflow-wrap: normal; overflow-x: scroll; }
.footer { font-size: 13px; }
#button_wrapper { text-align: right; padding-bottom: 18px; }
</style>
</head>
<body>
<div id="mainWrapper">
<h1>Markdown Table Formatter</h1>
<p>This tool formats basic MultiMarkdown style tables for easier plain text reading. It adds padding to all the cells to line up the pipe separators when using a mono-space font.</p>
<p>To see what it's all about, try one of these examples, or format your own.</p>
<p>Load:
<a href="#" onClick="loadExample(1); return false;">Example 1</a> -
<a href="#" onClick="loadExample(2); return false;">Example 2</a> -
<a href="#" onClick="loadExample(3); return false;">Example 3</a>
</p>
<form>
<textarea id="md_table_holder"></textarea>
<div id="button_wrapper">
<input id="format_button" type="button" value="Format Table" onclick="format_table();"></input>
</div>
</form>
<hr>
<p class="footer">
For more information:<br>
I'm on Twitter as <a href="https://twitter.com/TheIdOfAlan">@TheIdOfAlan</a><br>
I sometimes post on my personal site <a href="http://alanwsmith.com/">alanwsmith.com</a><br>
This is an Open Source <a href="https://github.com/alanwsmith/markdown_table_formatter">GitHub Project</a>.<br>
It has a <a href="test_run.html">Jasmine Test Suite</a>.<br>
What to show your appreciation? <a href="http://amzn.com/w/3PH1RJFZZFCO2">Buy me a book</a><br>
</p>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54483606-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>