Compare commits
No commits in common. 'fb5df71101de0f42b45cee74316bf7fbdcc3f066' and '7e19ede4708dcb363747415244d1f83940c0d4b0' have entirely different histories.
fb5df71101
...
7e19ede470
4 changed files with 2 additions and 244 deletions
@ -1,35 +0,0 @@ |
|||||||
<?php declare(strict_types=1); |
|
||||||
|
|
||||||
require __DIR__."/../vendor/autoload.php"; |
|
||||||
|
|
||||||
$source = file_get_contents("php://input"); |
|
||||||
|
|
||||||
try { |
|
||||||
$Instance = new parkdown\Parkdown($source, false); |
|
||||||
echo $Instance->html(); |
|
||||||
} catch (parkdown\ParserError $error) { |
|
||||||
echo "<pre>"; |
|
||||||
|
|
||||||
$message = explode(" ", $error->getMessage()); |
|
||||||
$location = array_shift($message); |
|
||||||
$loc = explode(":", $location); |
|
||||||
$file = array_shift($loc); |
|
||||||
$line = substr(implode(":", $loc), 0, -1); |
|
||||||
[$row, $col] = explode(":", $line); |
|
||||||
|
|
||||||
echo "<a class='error' href=\"javascript: highlight($col, $row);\">$location</a> ".implode(" ", $message); |
|
||||||
|
|
||||||
|
|
||||||
$stackTrace = explode("\n", $error->getTraceAsString()); |
|
||||||
|
|
||||||
echo "<p><small>"; |
|
||||||
foreach ($stackTrace as $step) { |
|
||||||
$step = explode(" ", $step); |
|
||||||
array_shift($step); |
|
||||||
$location = array_shift($step); |
|
||||||
$location = preg_replace("/\(([0-9]+)\):/", ":\$1:", $location); |
|
||||||
|
|
||||||
echo "<a class='error' href='vscode://file/".substr($location, 0, -1)."'>$location</a> ".implode(" ", $step)."<br>"; |
|
||||||
} |
|
||||||
echo "</small></p>"; |
|
||||||
} |
|
||||||
@ -1,204 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
<title>parkdown playground</title> |
|
||||||
<script type="module"> |
|
||||||
const $ = selector => { |
|
||||||
const elements = document.querySelectorAll(selector); |
|
||||||
|
|
||||||
return elements.length < 2 ? elements[0] : elements; |
|
||||||
}; |
|
||||||
|
|
||||||
const output = $("#output"); |
|
||||||
const input = $("#input"); |
|
||||||
const numbers = $(".linenumbers"); |
|
||||||
let timeout; |
|
||||||
|
|
||||||
const updateOutput = (event) => { |
|
||||||
const text = event ? event.target.value : input.value; |
|
||||||
const lines = text.split("\n").length; |
|
||||||
let html = ""; |
|
||||||
for (let i = 1; i <= lines; i++) { |
|
||||||
html += `${i}<br>`; |
|
||||||
} |
|
||||||
numbers.innerHTML = html; |
|
||||||
|
|
||||||
timeout = setTimeout(() => { |
|
||||||
|
|
||||||
fetch("ajax.php", { |
|
||||||
method : "POST", |
|
||||||
headers: { |
|
||||||
"Content-Type" : "application/json" |
|
||||||
}, |
|
||||||
body : text |
|
||||||
}).then(response => response.text()).then(text => output.innerHTML = text); |
|
||||||
}, 1000); |
|
||||||
} |
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => { |
|
||||||
updateOutput(); |
|
||||||
|
|
||||||
input.addEventListener("keydown", event => { |
|
||||||
if (event.key !== "Tab") |
|
||||||
return; |
|
||||||
event.preventDefault(); |
|
||||||
const start = input.selectionStart; |
|
||||||
const end = input.selectionEnd; |
|
||||||
const value = input.value; |
|
||||||
|
|
||||||
input.value = value.substring(0, start) + "\t" + value.substring(end); |
|
||||||
input.selectionStart = input.selectionEnd = (start + 1); |
|
||||||
}); |
|
||||||
|
|
||||||
input.addEventListener("input", event => { |
|
||||||
clearTimeout(timeout); |
|
||||||
updateOutput(event); |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
window.highlight = (col, row) => { |
|
||||||
const lines = input.value.split("\n"); |
|
||||||
|
|
||||||
let start = 0; |
|
||||||
let end = 0; |
|
||||||
let i = 0; |
|
||||||
|
|
||||||
for (const line of lines) { |
|
||||||
if (++i === row) { |
|
||||||
end = start + line.length; |
|
||||||
break; |
|
||||||
} |
|
||||||
start += line.length + 1; |
|
||||||
} |
|
||||||
|
|
||||||
start = start + col - 1 === end ? start : start + col; |
|
||||||
|
|
||||||
input.focus(); |
|
||||||
input.setSelectionRange(start, end); |
|
||||||
const lineHeight = input.clientHeight / lines.length; |
|
||||||
$(".editor").scrollTop = lineHeight * (row - 10); |
|
||||||
input.scrollLeft = 0; |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style rel="stylesheet"> |
|
||||||
* { |
|
||||||
box-sizing: border-box; |
|
||||||
outline: 0 !important; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: dodgerblue; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
a:hover { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
a.error { |
|
||||||
color: palevioletred; |
|
||||||
} |
|
||||||
|
|
||||||
body { |
|
||||||
display: grid; |
|
||||||
grid-template-columns: 1fr 1fr; |
|
||||||
font-family: sans-serif; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
height: 100vh; |
|
||||||
overflow: hidden; |
|
||||||
background: #333; |
|
||||||
color: #eee; |
|
||||||
} |
|
||||||
|
|
||||||
body > * { |
|
||||||
width: 100%; |
|
||||||
border: solid 1px #111; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
textarea { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
font-family: monospace; |
|
||||||
box-sizing: content-box; |
|
||||||
background: transparent; |
|
||||||
tab-size: 4; |
|
||||||
border: none; |
|
||||||
padding-bottom: 4rem; |
|
||||||
font-size: 1.2rem; |
|
||||||
overflow-y: clip; |
|
||||||
overflow-x: scroll; |
|
||||||
white-space: nowrap; |
|
||||||
resize: none; |
|
||||||
margin: 1rem 0; |
|
||||||
color: #FAF08B; |
|
||||||
} |
|
||||||
textarea::selection { |
|
||||||
background-color: dodgerblue; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.editor { |
|
||||||
display: grid; |
|
||||||
grid-template-columns: 80px auto; |
|
||||||
gap: 2rem; |
|
||||||
height: 100%; |
|
||||||
border-right: none; |
|
||||||
overflow-y: auto; |
|
||||||
overflow-x: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.linenumbers { |
|
||||||
font-size: 1.2rem; |
|
||||||
text-align: right; |
|
||||||
padding: 1rem; |
|
||||||
color: #aaa; |
|
||||||
font-family: monospace; |
|
||||||
background: #222; |
|
||||||
} |
|
||||||
|
|
||||||
#output { |
|
||||||
overflow-y: auto; |
|
||||||
padding: 4rem; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
background-color: transparent; |
|
||||||
width: 16px; |
|
||||||
} |
|
||||||
::-webkit-scrollbar-track { |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
background-color: rgba(255,255,255,0.1); |
|
||||||
border-radius: 16px; |
|
||||||
border: 4px solid #333; |
|
||||||
} |
|
||||||
::-webkit-scrollbar-button { |
|
||||||
display:none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
|
|
||||||
<section class="editor"> |
|
||||||
<section class="linenumbers">1</section> |
|
||||||
<textarea id="input"> |
|
||||||
# parkdown playground |
|
||||||
|
|
||||||
 |
|
||||||
|
|
||||||
* use markdown in the editor |
|
||||||
* view result over there |
|
||||||
|
|
||||||
View parkdown code [here][code]. |
|
||||||
|
|
||||||
[code]: https://git.mike-ochmann.de/MassiveDynamic/Parkdown |
|
||||||
</textarea> |
|
||||||
</section> |
|
||||||
<section id="output"></section> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue