folkert/MarkdownPreviewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Folkert Kevelam 2025-08-18 23:03:58 +02:00
parent 0eaacc1a3e
commit 8d7ed39817
1 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
Server/template/index.html Normal file
View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="highlight/styles/tokyo-night-dark.min.css">
<script src="highlight/highlight.min.js"></script>
<link href="katex/katex.min.css" rel="stylesheet" type="text/css">
<script src="katex/katex.min.js"></script>
<script src="katex/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="page-container">
<header class="page-header">
<h1 class="page-title">Your Note Title</h1>
<div class="page-subtitle">
<div class="page-author">Author: Your Name</div>
<div class="page-date">Date: August 1, 2025</div>
</div>
</header>
<div id="page-content" class="page-content">
{% raw body_content %}
</div>
<script>
hljs.highlightAll();
renderMathInElement(
document.body,
{
delimiters : [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
]
});
const socket = new WebSocket("ws://localhost:8888/ws");
socket.addEventListener("open", (event) => {
socket.send("ping");
});
socket.addEventListener("message", (event) => {
var data = JSON.parse(event.data);
var node = document.getElementById("page-content");
var wrapper = document.createElement('div');
wrapper.innerHTML = data['show'];
node.replaceChildren(wrapper);
hljs.highlightAll();
renderMathInElement(
node,
{
delimiters : [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
]
});
});
</script>
</body>
</html>