YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update codeblock style

Browse Source
This commit is contained in:
Steven
2024-02-01 21:38:28 +08:00
parent c342c464a2
commit c522e1450a
1 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,3 @@
import { IconButton } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import hljs from "highlight.js";
@@ -12,7 +11,7 @@ interface Props extends BaseProps {
}
const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
const formatedLanguage = (language || "").toLowerCase() || "plaintext";
const formatedLanguage = (language || "").toLowerCase() || "text";
let highlightedCode = hljs.highlightAuto(content).value;
// Users can set Markdown code blocks as `__html` to render HTML directly.
@@ -35,22 +34,18 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
};
return (
<pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-700 whitespace-pre-wrap relative">
<IconButton
size="sm"
className="!absolute top-0.5 right-0.5 opacity-50"
sx={{
"--IconButton-size": "24px",
}}
onClick={handleCopyButtonClick}
>
<Icon.Copy className="w-4 h-auto" />
</IconButton>
<code
className={classNames(`language-${formatedLanguage}`, "block text-sm")}
dangerouslySetInnerHTML={{ __html: highlightedCode }}
></code>
</pre>
<div className="w-full my-1 bg-amber-100 border-l-4 border-amber-400 rounded overflow-clip hover:shadow dark:bg-zinc-600 dark:border-zinc-400">
<div className="w-full px-2 py-1 flex flex-row justify-between items-center text-amber-500 dark:text-zinc-400">
<span className="text-sm font-mono">{formatedLanguage}</span>
<Icon.Copy className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
</div>
<pre className="w-full p-2 bg-amber-50 dark:bg-zinc-700 whitespace-pre-wrap relative">
<code
className={classNames(`language-${formatedLanguage}`, "block text-sm leading-5")}
dangerouslySetInnerHTML={{ __html: highlightedCode }}
></code>
</pre>
</div>
);
};