diff --git a/src/app/article/components/MD/index.scss b/src/app/article/components/MD/index.scss index 40bbafe..af238ff 100755 --- a/src/app/article/components/MD/index.scss +++ b/src/app/article/components/MD/index.scss @@ -267,3 +267,37 @@ margin: 10px 0; } } + +// 代码块带行号样式 +.mac-style.with-line-number { + position: relative; + .hljs { + display: block; + padding: 0; + background: none; + } + .code-line { + display: flex; + align-items: flex-start; + min-height: 1.6em; + font-size: 1em; + line-height: 1.6; + white-space: pre; + } + .line-number { + display: inline-block; + width: 2.5em; + text-align: right; + color: #888; + user-select: none; + opacity: 0.6; + margin-right: 1em; + font-size: 0.95em; + font-family: inherit; + } + .line-content { + flex: 1; + word-break: break-all; + white-space: pre; + } +} diff --git a/src/app/article/components/MD/index.tsx b/src/app/article/components/MD/index.tsx index ca6528c..8a3c657 100755 --- a/src/app/article/components/MD/index.tsx +++ b/src/app/article/components/MD/index.tsx @@ -92,15 +92,23 @@ const ContentMD = ({ data }: Props) => { const [expanded, setExpanded] = useState(false); const isLong = value.split("\n").length > 10; - const highlighted = useMemo(() => { + // 新增:将代码按行分割 + const codeLines = useMemo(() => value.split("\n"), [value]); + + const highlightedLines = useMemo(() => { try { if (hljs.getLanguage(language)) { - return hljs.highlight(value, { language }).value; + return hljs.highlight(value, { language }).value.split("\n"); } } catch { } - return hljs.highlightAuto(value).value; + return hljs.highlightAuto(value).value.split("\n"); }, [value, language]); + const linesToRender = highlightedLines; + if (linesToRender.length > 1 && linesToRender[linesToRender.length - 1] === "") { + linesToRender.pop(); + } + const handleCopy = () => { navigator.clipboard.writeText(value).then( () => toast.success("代码已复制 🎉"), @@ -110,8 +118,7 @@ const ContentMD = ({ data }: Props) => { return (
{
if (isLong && !expanded) setExpanded(true);
}}
@@ -130,10 +137,19 @@ const ContentMD = ({ data }: Props) => {
-
+ {/* 新增:带行号的代码渲染 */}
+
+ {linesToRender.map((line, idx) => (
+
+ {idx + 1}
+
+
+ ))}
+
+
{isLong && (
)}
@@ -231,6 +247,7 @@ const ContentMD = ({ data }: Props) => {
autoClose={1000}
hideProgressBar
/>
+