Markdown_editor/Markdown_Editor.html at master · andywis/Markdown_editor · GitHub

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
119
120
121
122
123
124
<!DOCTYPE HTML>
<html>
<!--
 | Uses the Showdown library, as per
 | https://github.com/showdownjs/showdown/wiki/Tutorial:-Markdown-editor-using-Showdown
 | https://github.com/showdownjs/showdown
 | -->
<head>
  <meta charset="UTF-8"/>
  <title>MD Editor</title>
  <script src=".showdown/showdown.min.js"></script>
  <style>
    body {
		margin: 0;
	}
    #sourceTA {
      display: block;
	  min-width:640px;
	  margin: 8px 8px 8px 8px;
    }
    #targetDiv {
      border: 1px dashed #333333;
	  padding: 12px;
      min-width: 600px;
      min-height: 500px;
	  margin: 8px;
    }

	button {
		margin-left:16px;
	}

	#gutter {
		color: white; background-color: #555;
		padding: 20px;
		font-family: Arial,sans-serif;
		font-size:12px;
	}
	#gutter a {
		color: #ddf;
		text-decoration:none;
	}
	#gutter a:hover {
		color: #bbf;
	}

	/* Atlassian CSS */
	.atlassian {
		font-family: Arial,sans-serif;
		font-size: 14px;
	}
	.atlassian h1, .atlassian h2 {
		margin: 10px 0 20px 0;
		color #333;
		font-weight:normal;
		line-height:1.25;
	}
	.atlassian h1 {
		font-size: 32px;
	}
	.atlassian h2 {
		font-size: 24px;
	}
	.atlassian code {
	    display: block;
		font-size:12px;
		line-height: 18px;
		overflow: auto;
		padding: 6px 10px;
		background-clip: padding-box;
		border-radius: 3px;
		border: 1px solid #ccc;
		background-color: #f5f5f5;
		font-family: monospace;
	}
	.atlassian a {
		color: #3572b0;
	}
  </style>

  <script>
    function run() {
      var text = document.getElementById('sourceTA').value,
    	  target = document.getElementById('targetDiv'),
    	  converter = new showdown.Converter(),
    	  html = converter.makeHtml(text);
	  target.innerHTML = html;
	}

	/* Empty the form and Markdown div */
	function reset() {
		document.getElementById('sourceTA').value = "";
		run();
		set_focus();
	}
	function set_focus() {
		document.getElementById('sourceTA').focus();
	}
</script>
</head>
<body>
  <textarea id="sourceTA" rows="10" cols="82"></textarea>
  <br>
  <button id="runBtn" onClick="run()">Convert</button>
  <button id="runBtn" onClick="reset()">Clear</button>
  <br><br>
  <div id="targetDiv" class="atlassian"></div>

  <br><br>
  <div id="gutter">
	  Markdown editor based on
		<a href="https://github.com/showdownjs/showdown" target="_blank">Showdown</a>  <br>
	  <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Syntax</a><br>
	  <a href="https://confluence.atlassian.com/bitbucketserver/markdown-syntax-guide-776639995.html" target="_blank">Atlassian Markdown reference</a><br>
	  <a href="https://bitbucket.org/tutorials/markdowndemo" target="_blank">Atlassian Markdown tutorial</a><br>
	  <a href="https://help.github.com/categories/writing-on-github/" target="_blank">Github Flavoured Markdown</a><br>
	  By <a href="https://github.com/andywis" target="_blank">Andy Watkins</a>
  </div>
  <script>
	/* Force initial focus on type-in box */
	set_focus();
  </script>
</body>
</html>