<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>markdown编辑器</title>
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
|
<script src="https://cdn.bootcdn.net/ajax/libs/marked/2.1.3/marked.js"></script>
|
<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
|
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
|
|
<style type="text/css">
|
html, body {
|
margin: 0;
|
padding: 0;
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
color: #333;
|
background-color: #fbfbfb;
|
height: 100%;
|
}
|
textarea {
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
font-size: 12px;
|
resize: none;
|
}
|
header {
|
padding-top: 10px;
|
display: flex;
|
height: 58px;
|
}
|
header h1 {
|
margin: 0;
|
}
|
.containers {
|
display: flex;
|
height: calc(100vh - 10px);
|
}
|
.container {
|
flex-basis: 50%;
|
padding: 5px;
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
.pane, .inputPane {
|
margin-top: 5px;
|
padding: 0.6em;
|
border: 1px solid #ccc;
|
overflow: auto;
|
flex-grow: 1;
|
flex-shrink: 1;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="containers">
|
<div class="container">
|
<input type="button" id="clear" value="清除" style="width: 100px;height: 25px"/>
|
<textarea id="markedSource" class="inputPane"></textarea>
|
</div>
|
<div class="container">
|
<select id="outputType" style="width: 150px;height: 25px">
|
<option value="markedResult">markedResult</option>
|
<option value="html">HTML Source</option>
|
<option value="lexer">Lexer Data</option>
|
</select>
|
<div id="markedResult" class="pane"></div>
|
<textarea id="html" class="pane" readonly="readonly" style="display: none;"></textarea>
|
<textarea id="lexer" class="pane" readonly="readonly" style="display: none;"></textarea>
|
<textarea id="quickref" class="pane" readonly="readonly" style="display: none;"></textarea>
|
</div>
|
</div>
|
|
|
<script>
|
var rendererMD = new marked.Renderer();
|
marked.setOptions({
|
renderer: rendererMD,
|
gfm: true,
|
tables: true,
|
breaks: false,//允许回车换行。该选项要求 gfm 为true
|
pedantic: false,
|
sanitize: false,//不输出HTML
|
smartLists: true,
|
smartypants: false,
|
highlight: function (code) {
|
return hljs.highlightAuto(code).value;
|
}
|
});
|
|
// 监听输入值变化
|
$('#markedSource').on('keyup', (cm) => {
|
document.getElementById('markedResult').innerHTML = marked(cm.currentTarget.value);
|
|
var lexed = marked.lexer(cm.currentTarget.value);
|
var lexedList = jsonString(lexed);
|
var parsed = marked.parser(lexed);
|
document.getElementById('lexer').value=lexedList
|
document.getElementById('html').value=parsed
|
})
|
|
$('#clear').on('click',function (e){
|
document.getElementById('markedSource').value = '';
|
document.getElementById('markedResult').innerHTML= '';
|
})
|
$('#outputType').on('change',function (e){
|
for(var i = 0; i< $('.pane').length; i++) {
|
if ($('.pane')[i].id === e.currentTarget.value) {
|
$('.pane')[i].style.display = '';
|
active = $('.pane')[i];
|
} else {
|
$('.pane')[i].style.display = 'none';
|
}
|
}
|
})
|
|
function stringRepeat(char, times) {
|
var s = '';
|
for (var i = 0; i < times; i++) {
|
s += char;
|
}
|
return s;
|
}
|
function jsonString(input, level) {
|
level = level || 0;
|
if (Array.isArray(input)) {
|
if (input.length === 0) {
|
return '[]';
|
}
|
var items = [],
|
i;
|
if (!Array.isArray(input[0]) && typeof input[0] === 'object' && input[0] !== null) {
|
for (i = 0; i < input.length; i++) {
|
items.push(stringRepeat(' ', 2 * level) + jsonString(input[i], level + 1));
|
}
|
return '[\n' + items.join('\n') + '\n]';
|
}
|
for (i = 0; i < input.length; i++) {
|
items.push(jsonString(input[i], level));
|
}
|
return '[' + items.join(', ') + ']';
|
} else if (typeof input === 'object' && input !== null) {
|
var props = [];
|
for (var prop in input) {
|
props.push(prop + ':' + jsonString(input[prop], level));
|
}
|
return '{' + props.join(', ') + '}';
|
} else {
|
return JSON.stringify(input);
|
}
|
}
|
|
</script>
|
</body>
|
</html>
|
