switched to marked

This commit is contained in:
Ell 2023-08-11 20:51:34 +02:00
parent e4b04174b7
commit 7a5f3f5b38
2 changed files with 50 additions and 16 deletions

View file

@ -8,12 +8,24 @@
<title>Just Share Please</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@7.0.2/lib/marked.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-katex-extension@3.0.3/lib/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked-highlight@2.0.4/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/github.min.css">
<link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/github-dark.min.css" media="(prefers-color-scheme:dark)" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/github.min.css" media="(prefers-color-scheme:light),(prefers-color-scheme:no-preference)" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<!-- TODO consider improving the style or using Obsidian's default style as a basis? -->
<style>
html {
position: relative;
@ -26,6 +38,8 @@
code {
font-family: "JetBrains Mono", monospace;
font-variant-ligatures: none;
border-radius: 5px;
}
img {
@ -52,7 +66,7 @@
body {
color: #d8d8d8;
background-color: #1b1b1b;
background-color: #1e1e1e;
}
}
@ -66,7 +80,7 @@
let main = $("#main");
// TODO display nice message when there is no hash
$(window).on("hashchange", display);
display();
@ -78,14 +92,15 @@
method: "get",
url: `share.php?id=${hash}`,
success: t => {
let converter = new showdown.Converter({
simplifiedAutoLink: true,
strikethrough: true,
tables: true,
tasklists: true,
metadata: true
});
main.html(converter.makeHtml(t));
marked.use(markedKatex());
marked.use(markedHighlight.markedHighlight({
langPrefix: "hljs language-",
highlight: (c, l) => {
const language = hljs.getLanguage(l) ? l : "plaintext";
return hljs.highlight(c, {language}).value;
}
}));
main.html(DOMPurify.sanitize(marked.parse(t)));
},
// TODO display this error more nicely
error: (r, s, e) => main.html(e)

View file

@ -4,11 +4,30 @@ This is a cool test note, my friends!
> How are you?
```cs
public class VeryGood {
}
```js
$.ajax({
method: "get",
url: `share.php?id=${hash}`,
success: t => {
marked.use(markedKatex());
marked.use(markedHighlight.markedHighlight({
langPrefix: "hljs language-",
highlight: (c, l) => {
const language = hljs.getLanguage(l) ? l : "plaintext";
return hljs.highlight(c, {language}).value;
}
}));
main.html(DOMPurify.sanitize(marked.parse(t)));
},
// TODO display this error more nicely
error: (r, s, e) => main.html(e)
});
```
http://localhost:8080#ff3ebb34
cool!!
cool!!
The following is $x^2 = 7$, but more complicated!
$$
x^2 + \sum_{i = 1}^{10000} x^2 \cdot 0 = 7
$$