CS348Project/llama.cpp
5
0
Fork 0
mirror of https://github.com/ggml-org/llama.cpp.git synced 2025-10-27 08:21:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve code block color theming (#16325)

Browse Source 
* feat: Improve code block theming

* chore: update webui build output

* chore: Update webui static build
This commit is contained in:
Aleksander Grygier
2025-10-01 15:54:42 +02:00
committed by GitHub
parent 1104ca1a1c
commit 2a9b63383a
3 changed files with 29 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
tools/server/public/index.html.gz
View File

Binary file not shown.

6
tools/server/webui/src/app.css
View File

@@ -37,8 +37,8 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--code-background: oklch(0.225 0 0);
--code-foreground: oklch(0.875 0 0);
--code-background: oklch(0.975 0 0);
--code-foreground: oklch(0.145 0 0);
--layer-popover: 1000000;
}
@@ -74,6 +74,8 @@
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--code-background: oklch(0.225 0 0);
--code-foreground: oklch(0.875 0 0);
}
@theme inline {

26
tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte
View File

@@ -8,9 +8,13 @@
import rehypeKatex from 'rehype-katex';
import rehypeStringify from 'rehype-stringify';
import { copyCodeToClipboard } from '$lib/utils/copy';
import 'highlight.js/styles/github-dark.css';
import { browser } from '$app/environment';
import 'katex/dist/katex.min.css';
import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
import githubLightCss from 'highlight.js/styles/github.css?inline';
import { mode } from 'mode-watcher';
interface Props {
content: string;
class?: string;
@@ -21,6 +25,26 @@
let containerRef = $state<HTMLDivElement>();
let processedHtml = $state('');
function loadHighlightTheme(isDark: boolean) {
if (!browser) return;
const existingThemes = document.querySelectorAll('style[data-highlight-theme]');
existingThemes.forEach((style) => style.remove());
const style = document.createElement('style');
style.setAttribute('data-highlight-theme', 'true');
style.textContent = isDark ? githubDarkCss : githubLightCss;
document.head.appendChild(style);
}
$effect(() => {
const currentMode = mode.current;
const isDark = currentMode === 'dark';
loadHighlightTheme(isDark);
});
let processor = $derived(() => {
return remark()
.use(remarkGfm) // GitHub Flavored Markdown