happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: enhance CodeBlock component with theme-aware syntax highlighting

This commit is contained in:
Steven 2025-09-16 19:08:28 +08:00
parent c3d4f8e9d1
commit f44b0850f4
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/MemoContent/CodeBlock.tsx
View File

@ -2,9 +2,11 @@ import copy from "copy-to-clipboard";
import DOMPurify from "dompurify"; import DOMPurify from "dompurify";
import hljs from "highlight.js"; import hljs from "highlight.js";
import { CopyIcon } from "lucide-react"; import { CopyIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { workspaceStore } from "@/store";
import MermaidBlock from "./MermaidBlock"; import MermaidBlock from "./MermaidBlock";
import { BaseProps } from "./types"; import { BaseProps } from "./types";
@ -87,6 +89,9 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
return <MermaidBlock content={content} />; return <MermaidBlock content={content} />;
} }
const appTheme = workspaceStore.state.theme;
const isDarkTheme = appTheme.includes("dark");
useEffect(() => { useEffect(() => {
const dynamicImportStyle = async () => { const dynamicImportStyle = async () => {
// Remove any existing highlight.js style // Remove any existing highlight.js style
@ -96,13 +101,14 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
} }
try { try {
// Always use the github light theme const cssModule = isDarkTheme
const cssModule = await import("highlight.js/styles/github.css?inline"); ? await import("highlight.js/styles/github-dark-dimmed.css?inline")
: await import("highlight.js/styles/github.css?inline");
// Create and inject the style // Create and inject the style
const style = document.createElement("style"); const style = document.createElement("style");
style.textContent = cssModule.default; style.textContent = cssModule.default;
style.setAttribute("data-hljs-theme", "light"); style.setAttribute("data-hljs-theme", isDarkTheme ? "dark" : "light");
document.head.appendChild(style); document.head.appendChild(style);
} catch (error) { } catch (error) {
console.warn("Failed to load highlight.js theme:", error); console.warn("Failed to load highlight.js theme:", error);
@ -110,7 +116,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
}; };
dynamicImportStyle(); dynamicImportStyle();
}, []); }, [appTheme, isDarkTheme]);
const highlightedCode = useMemo(() => { const highlightedCode = useMemo(() => {
try { try {
@ -154,4 +160,4 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
); );
}; };
export default CodeBlock; export default observer(CodeBlock);