nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed math + theme

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 01:10:23 +01:00
parent 7aaa469141
commit 7296638091
2 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/pages/posts/[slug].astro
View File

@@ -76,9 +76,12 @@ function formatSlug(slug: string) {
</article> </article>
<!-- KaTeX for LaTeX Math Rendering --> <!-- KaTeX for LaTeX Math Rendering -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" integrity="sha384-wcixnb4m+ezBfu/FvC5sOkwP9b22Rk/Bq43H1rEof80A8o2D46rG1E+mI1R2bFwY" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" crossorigin="anonymous">
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-bO3k+X9sX7L9yI1eKRA32gSbx6Hj5v/F7rV+6hD4S7tU09QZfOa0W1B9TjJkC3O" crossorigin="anonymous"></script> <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" crossorigin="anonymous"></script>
<script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-ks2B3Fey1s3qC3pS2aT5lC00u0d3W8e/2X2o551u0hGkQWjR0L0rYxYpA2Wn5+iA" crossorigin="anonymous"></script> <script is:inline src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
<!-- Highlight.js for Code Blocks -->
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script> <script>
if (localStorage.getItem('admin_token')) { if (localStorage.getItem('admin_token')) {
@@ -88,7 +91,7 @@ function formatSlug(slug: string) {
} }
} }
// Initialize KaTeX auto-render on the post content // Initialize KaTeX and Highlight.js
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const content = document.getElementById('post-content'); const content = document.getElementById('post-content');
if (content) { if (content) {
@@ -102,6 +105,9 @@ function formatSlug(slug: string) {
], ],
throwOnError: false throwOnError: false
}); });
// @ts-ignore
hljs.highlightAll();
} }
}); });
</script> </script>

19
frontend/src/styles/global.css
View File

@@ -102,6 +102,25 @@ body {
.cm-s-narlblog .CodeMirror-line::selection, .cm-s-narlblog .CodeMirror-line > span::selection, .cm-s-narlblog .CodeMirror-line > span > span::selection { background: var(--surface2); } .cm-s-narlblog .CodeMirror-line::selection, .cm-s-narlblog .CodeMirror-line > span::selection, .cm-s-narlblog .CodeMirror-line > span > span::selection { background: var(--surface2); }
.cm-s-narlblog .CodeMirror-line::-moz-selection, .cm-s-narlblog .CodeMirror-line > span::-moz-selection, .cm-s-narlblog .CodeMirror-line > span > span::-moz-selection { background: var(--surface2); } .cm-s-narlblog .CodeMirror-line::-moz-selection, .cm-s-narlblog .CodeMirror-line > span::-moz-selection, .cm-s-narlblog .CodeMirror-line > span > span::-moz-selection { background: var(--surface2); }
/* Dynamic Highlight.js Theme */
.hljs { color: var(--text); background: transparent; }
.hljs-comment, .hljs-quote { color: var(--subtext0); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--mauve); font-weight: bold; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: var(--peach); }
.hljs-string, .hljs-doctag { color: var(--green); }
.hljs-title, .hljs-section, .hljs-selector-id { color: var(--blue); font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type, .hljs-class .hljs-title { color: var(--yellow); font-weight: bold; }
.hljs-tag, .hljs-name, .hljs-attribute { color: var(--blue); font-weight: normal; }
.hljs-regexp, .hljs-link { color: var(--sky); }
.hljs-symbol, .hljs-bullet { color: var(--pink); }
.hljs-built_in, .hljs-builtin-name { color: var(--red); }
.hljs-meta { color: var(--overlay1); font-weight: bold; }
.hljs-deletion { background: var(--maroon); color: var(--crust); }
.hljs-addition { background: var(--green); color: var(--crust); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Typography styles for Markdown */ /* Typography styles for Markdown */
.prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; } .prose h1 { @apply text-3xl md:text-4xl font-bold mb-4 md:mb-6 text-mauve; }
.prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; } .prose h2 { @apply text-2xl md:text-3xl font-semibold mb-3 md:mb-4 mt-6 md:mt-8 text-lavender; }