style(编辑器): 为行内代码添加样式并移除文本装饰
- 为行内代码添加等宽字体、背景色和圆角样式,提升可读性 - 移除 CodeMirror 特定元素下的文本装饰线,保持界面整洁
This commit is contained in:
parent
b550b8b603
commit
d5d594fb7f
|
|
@ -367,6 +367,15 @@ const buildDecorations = (view, filePath) => {
|
||||||
value: Decoration.mark({ class: 'cm-md-code-info' })
|
value: Decoration.mark({ class: 'cm-md-code-info' })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 5.3 行内代码 (InlineCode)
|
||||||
|
if (typeName === 'InlineCode') {
|
||||||
|
decorations.push({
|
||||||
|
from: nodeFrom,
|
||||||
|
to: nodeTo,
|
||||||
|
value: Decoration.mark({ class: 'cm-md-monospace' })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 6. 链接 (Link) -> LinkMark, URL, LinkTitle...
|
// 6. 链接 (Link) -> LinkMark, URL, LinkTitle...
|
||||||
// 结构通常是: Link( [ LinkMark( [ ) ... LinkMark( ] ) LinkMark( ( ) URL ... LinkMark( ) ) ] )
|
// 结构通常是: Link( [ LinkMark( [ ) ... LinkMark( ] ) LinkMark( ( ) URL ... LinkMark( ) ) ] )
|
||||||
|
|
|
||||||
|
|
@ -134,6 +134,15 @@ const liveEditorTheme = computed(() => {
|
||||||
paddingLeft: '4px'
|
paddingLeft: '4px'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 行内代码样式
|
||||||
|
'.cm-md-monospace': {
|
||||||
|
fontFamily: monospaceFont,
|
||||||
|
backgroundColor: 'var(--hover-background)',
|
||||||
|
padding: '2px 4px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '0.9em'
|
||||||
|
},
|
||||||
|
|
||||||
// 代码块样式
|
// 代码块样式
|
||||||
'.cm-line.cm-md-fenced-code': {
|
'.cm-line.cm-md-fenced-code': {
|
||||||
fontFamily: monospaceFont,
|
fontFamily: monospaceFont,
|
||||||
|
|
@ -284,4 +293,8 @@ onUnmounted(() => {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--card-background);
|
background: var(--card-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.ͼ7) {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue