arnaucube/md-live-server
1
0
Fork 0
mirror of https://github.com/arnaucube/md-live-server.git synced 2026-02-07 03:46:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add LaTex support

Browse Source
This commit is contained in:
arnaucube
2021-05-28 11:47:34 +02:00
parent c905e2a5b3
commit 0c5629a3a6
5 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -20,5 +20,6 @@ set backupcopy=yes
- [x] server rendering .md files - [x] server rendering .md files
- [x] live reload when .md file changes - [x] live reload when .md file changes
- [x] directory files list on `/` endpoint - [x] directory files list on `/` endpoint
- [x] LaTex support
- [ ] graphviz - [ ] graphviz
- [ ] colour `<code>` with syntax highlighting - [ ] colour `<code>` with syntax highlighting

BIN
md-live-server
View File

Binary file not shown.

BIN
screenshot00.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 149 KiB

58
templates.go
View File

@@ -12,9 +12,12 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.dark { .dark {
background:#000000; background:#1d2021;
color:#cccccc; color:#cccccc;
} }
.dark a, a:hover, a:visited {
color: #458588;
}
</style> </style>
<body class="dark"> <body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;"> <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
@@ -56,9 +59,12 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.dark { .dark {
background:#000000; background:#1d2021;
color:#cccccc; color:#cccccc;
} }
a, a:hover, a:visited {
color: #458588;
}
pre, code{ pre, code{
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
@@ -121,22 +127,23 @@ td{
@media (min-width: 992px) { @media (min-width: 992px) {
.container { .container {
max-width: 900px; max-width: 800px;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
max-width: 900px; max-width: 800px;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.container { .container {
max-width: 900px; max-width: 800px;
} }
} }
</style> </style>
<body class="dark"> <body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;"> <input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
<a href="/" title="go to root">root</a> <a href="/" title="go to root">root</a>
@@ -144,6 +151,33 @@ td{
{{.Content}} {{.Content}}
</div> </div>
<!-- LaTex renderization -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css" integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js" integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: true},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
<script> <script>
(function() { (function() {
var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}"); var conn = new WebSocket("ws://127.0.0.1:8080/ws/{{.Title}}");
@@ -156,6 +190,20 @@ td{
// location.reload(); // location.reload();
// console.log("evt", evt); // console.log("evt", evt);
document.getElementById("content").innerHTML = evt.data; document.getElementById("content").innerHTML = evt.data;
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: true},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
} }
})(); })();

6
test.md
View File

@@ -30,4 +30,10 @@ func main() {
| col 2 is | centered | $12 | | col 2 is | centered | $12 |
| zebra stripes | are neat | $1 | | zebra stripes | are neat | $1 |
## LaTeX example
Through [KaTeX](https://katex.org):
$y^2 = x^3 + 7$
$\left(\frac{1}{\sqrt{x}}\right)$