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