diff --git a/src/codemirror/liveMarkdownDecorations.js b/src/codemirror/liveMarkdownDecorations.js index db4ced0..2141400 100644 --- a/src/codemirror/liveMarkdownDecorations.js +++ b/src/codemirror/liveMarkdownDecorations.js @@ -311,14 +311,19 @@ const buildDecorations = (state, filePath) => { const startLine = doc.lineAt(nodeFrom) const endLine = doc.lineAt(nodeTo) const cursorInBlock = isCursorInRange(state, nodeFrom, nodeTo) - const blockClass = cursorInBlock ? 'cm-md-fenced-code cm-active' : 'cm-md-fenced-code' + const baseClass = cursorInBlock ? 'cm-md-fenced-code cm-active' : 'cm-md-fenced-code' for (let l = startLine.number; l <= endLine.number; l++) { const lineInfo = doc.line(l) + let lineClass = baseClass + + if (l === startLine.number) lineClass += ' cm-md-fenced-code-start' + if (l === endLine.number) lineClass += ' cm-md-fenced-code-end' + decorations.push({ from: lineInfo.from, to: lineInfo.from, - value: Decoration.line({ class: blockClass }) + value: Decoration.line({ class: lineClass }) }) } } diff --git a/src/components/LivePreviewEditor.vue b/src/components/LivePreviewEditor.vue index 647ef6f..4645f89 100644 --- a/src/components/LivePreviewEditor.vue +++ b/src/components/LivePreviewEditor.vue @@ -232,6 +232,17 @@ const liveEditorTheme = computed(() => { paddingLeft: "16px", fontSize: "0.9em", }, + // 代码块圆角处理 + ".cm-line.cm-md-fenced-code-start": { + borderTopLeftRadius: "8px", + borderTopRightRadius: "8px", + paddingTop: "6px", + }, + ".cm-line.cm-md-fenced-code-end": { + borderBottomLeftRadius: "8px", + borderBottomRightRadius: "8px", + paddingBottom: "6px", + }, ".cm-line.cm-md-fenced-code.cm-active": { backgroundColor: "var(--hover-background)", outline: "1px solid var(--border-color)",