[Bug] 编辑光标未正确显示 · Issue #5477 · marktext/marktext · GitHub
Skip to content

[Bug] 编辑光标未正确显示 #5477

Closed

Description

@CMOS4000

Description

当前版本鼠标只有移动到标题上时才会变成编辑光标(竖杠),而其他地方(比如正文、代码块)仍然是普通的鼠标光标

Steps to Reproduce

将鼠标分别移动到标题上和正文/代码块上方

Expected Behavior

鼠标移动到可编辑区域时显示为编辑光标(竖杠)

Actual Behavior

当前版本鼠标只有移动到标题上时才会变成编辑光标(竖杠),而其他地方(比如正文、代码块)仍然是普通的鼠标光标

Screenshots / Logs

No response

Operating System

macOS

MarkText Version

0.20.0-rc5

OS Version

Windows11 LTSC 2024

Reproducibility

  • I can reliably reproduce this issue

Activity

  1. CMOS4000 commented on Sep 20, 2026

    @CMOS4000
    Author

    顺便提一句,这个问题很容易修复,改动CSS即可。
    下面是我针对默认主题(Cadmium浅色)追加的自定义CSS,来实现迁移过来的theblue主题。我在这个追加的CSS中已经修复了这个问题,可供参考。

    /* ================================ TheBlue ================================ /
    /
    =================== MarkText 精简定制版 (适配 Cadmium 浅色) =================== /
    /
    ================================================================
    原作者:Github@CMOS4000 知乎@太极
    定制策略:基于 MarkText 官方默认 Light (Cadmium 浅色) 主题定制

    【精准定制模块清单】:
    1. 字体与行距:正文采用鸿蒙黑体 (HarmonyOS Sans SC),代码采用 Maple Mono,行距 1.8;
    2. 标题排版:H1 居中,H2~H6 呈现 TheBlue 标志性彩色装饰竖线;
    3. 行内代码:浅蓝底色搭配主题蓝文字 (#007aff);
    4. 引用块 (Blockquote):TheBlue 标志性 4px 主题蓝竖线边框与 8% 浅蓝背景底色;
    5. 列表与任务列表:正文列表项目符号采用主题蓝点缀,任务列表勾选呈现 TheBlue 核心蓝 (#007aff),行距 1.8;
    6. 选中文本高亮:正文选中文本呈现经典纯蓝底色 (#0078d7) 与纯白文字反白 (#ffffff);
    7. 快捷编辑浮窗保护:严格隔离与保护原生浮动快捷格式弹窗(保持原版白底卡片效果);
    8. 图片样式:居中显示、圆角 8px 与柔和浅阴影;
    9. 独立代码块:框架完全保留原版样式,仅修改深色背景 (#2b2b2b)、代码等宽字体、IntelliJ 语法高亮,
       以及高对比度反白选区;
    10. 其余样式:超链接、高亮标记、表格、粗体、斜体、下划线、删除线、公式等均完全使用 Cadmium 原版,零冲突。
    ================================================================  */
    

    /* ======== 1. 字体定义与全局基础排版 ======== */
    @font-face {
    font-family: "HarmonyOS Sans SC";
    font-style: normal;
    font-weight: 400;
    src: local("HarmonyOS Sans SC Regular"), local("HarmonyOS_Sans_SC_Regular"), local("HarmonyOS Sans SC");
    }
    @font-face {
    font-family: "HarmonyOS Sans SC";
    font-style: normal;
    font-weight: 700;
    src: local("HarmonyOS Sans SC Bold"), local("HarmonyOS_Sans_SC_Bold"), local("HarmonyOS Sans SC");
    }
    @font-face {
    font-family: "Maple Mono NF CN";
    font-style: normal;
    font-weight: 400;
    src: local("Maple Mono NF CN"), local("Maple Mono NF CN-Regular"), local("Maple Mono");
    }

    :root {
    --font-sans-serif: "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --font-monospace: "Maple Mono NF CN", "JetBrains Mono", "Consolas", "Menlo", monospace;
    --blockquote-border-color: transparent !important;
    --blockquoteBorderColor: transparent !important;
    }

    /* 全局正文字体与行距 */
    body {
    font-family: var(--font-sans-serif) !important;
    line-height: 1.8 !important;
    }

    p {
    line-height: 1.8 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    word-break: normal;
    word-wrap: break-word;
    }

    /* 确保页面主体、左右侧空白区及滚动条保持标准默认箭头指针 */
    html,
    body,
    .mu-container,
    ::-webkit-scrollbar,
    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
    cursor: default !important;
    }

    /* 仅在可编辑的具体文本与代码区域显示为文本编辑光标 (I-Beam 竖杠) */
    p,
    li,
    blockquote,
    table td,
    table th,
    pre,
    pre code,
    code,
    .mu-content,
    .mu-paragraph-content,
    .mu-code-content {
    cursor: text !important;
    }

    /* 保护可交互组件的光标为手型指针 */
    input[type="checkbox"],
    a,
    button,
    .mu-copy-header-link,
    .mu-code-copy,
    .mu-inline-format-toolbar,
    .mu-inline-format-toolbar *,
    .mu-format-picker,
    .mu-format-picker * {
    cursor: pointer !important;
    }

    /* ======== 正文选中文本高亮 (图2效果:仅作用于非代码块正文,严禁影响代码块) ======== */
    :not(pre):not(.mu-code-block):not(.mu-code):not(code)::selection,
    p::selection,
    p *::selection,
    h1::selection,
    h1 *::selection,
    h2::selection,
    h2 *::selection,
    h3::selection,
    h3 *::selection,
    h4::selection,
    h4 *::selection,
    h5::selection,
    h5 *::selection,
    h6::selection,
    h6 *::selection,
    li::selection,
    li *::selection,
    blockquote::selection,
    blockquote *::selection,
    table::selection,
    table *::selection,
    code:not(pre code)::selection,
    .mu-selection:not(pre):not(.mu-code-block):not(.mu-code-block *) {
    background: #0078d7 !important;
    background-color: #0078d7 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    }

    /* 保护 Muya 隐藏标记不被选中文本暴露 */
    .mu-hide::selection {
    color: transparent !important;
    background: transparent !important;
    }

    /* ======== 2. 标题样式 (Headings) ======== */
    h1, h2, h3, h4, h5, h6 {
    position: relative !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.65rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    }

    /* H1: 居中对齐、行高 1.4、无左侧竖线、专属底部留白 */
    h1 {
    text-align: center !important;
    font-size: 1.75rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-bottom: none !important;
    }

    /* H2~H6: 左侧彩色装饰竖线 (5px 实线,12px 间距) */
    h2, h3, h4, h5, h6 {
    border-left-width: 5px !important;
    border-left-style: solid !important;
    padding-left: 12px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    }

    h2 {
    font-size: 1.625rem !important;
    line-height: 1.4 !important;
    border-left-color: #000000 !important;
    }

    h3 {
    font-size: 1.375rem !important;
    line-height: 1.5 !important;
    border-left-color: #1565c0 !important;
    }

    h4 {
    font-size: 1.1875rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    border-left-color: #007aff !important;
    }

    h5 {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    border-left-color: #6ec0ff !important;
    }

    h6 {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    border-left-color: #b3e5fc !important;
    }

    /* ======== 3. 行内代码样式 (Inline Code) ======== */
    code:not(pre code) {
    font-family: var(--font-monospace) !important;
    font-size: 0.92rem !important;
    color: #007aff !important;
    background-color: #eef7ff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin: 0 3px !important;
    }

    /* 标题中的行内代码适配 (按标题字号等比例缩放,继承标题粗细与适宜基线,保持 TheBlue 浅蓝底色与核心蓝文字) */
    h1 code:not(pre code),
    h2 code:not(pre code),
    h3 code:not(pre code),
    h4 code:not(pre code),
    h5 code:not(pre code),
    h6 code:not(pre code) {
    font-size: 0.85em !important;
    font-weight: inherit !important;
    padding: 0.12em 0.35em !important;
    margin: 0 0.25em !important;
    border-radius: 0.25em !important;
    vertical-align: 0.04em !important;
    }

    /* ======== 4. 引用块样式 (TheBlue 专属优雅淡蓝背景与核心蓝边框) ======== */
    blockquote {
    position: relative !important;
    border-left: 4px solid #007aff !important;
    background-color: rgba(0, 122, 255, 0.08) !important;
    padding: 10px 16px !important;
    margin: 0.75rem 0 !important;
    border-radius: 0 6px 6px 0 !important;
    box-sizing: border-box !important;
    color: inherit !important;
    }

    /* 彻底屏蔽 MarkText/Muya 原生 Cadmium 主题绘制的绿线伪元素 (blockquote::before) */
    blockquote::before,
    blockquote::after,
    .mu-container blockquote::before,
    .mu-container blockquote::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    }

    blockquote > p {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important;
    }

    blockquote > p:last-child {
    margin-bottom: 0 !important;
    }

    /* ======== 5. 列表样式 (仅作用于文章正文列表,彻底隔离 UI 弹窗) ======== /
    /
    无序列表项目符号颜色 /
    [contenteditable="true"] ul:not([class
    ="toolbar"]):not([class*="menu"]) > li::marker,
    .markdown-body ul > li::marker {
    color: #007aff !important;
    }

    /* 正文列表间距与行高 /
    [contenteditable="true"] ul:not([class
    ="toolbar"]):not([class*="menu"]),
    [contenteditable="true"] ol:not([class*="toolbar"]):not([class*="menu"]),
    .markdown-body ul,
    .markdown-body ol {
    padding-left: 2rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    }

    [contenteditable="true"] ul:not([class*="toolbar"]):not([class*="menu"]) > li,
    [contenteditable="true"] ol:not([class*="toolbar"]):not([class*="menu"]) > li,
    .markdown-body li {
    line-height: 1.8 !important;
    margin-top: 0.25rem !important;
    }

    /* 任务列表已勾选对勾的主题色 (将默认绿色改为 TheBlue 核心蓝,保留其余一切原生样式) */
    li.mu-task-list-item > input.mu-checkbox-checked::before,
    li.mu-task-list-item > span.mu-checkbox-checked::before,
    li.mu-task-list-item > input[type='checkbox']:checked::before,
    .mu-task-list-item > input.mu-checkbox-checked::before,
    .mu-task-list-item > span.mu-checkbox-checked::before,
    .markdown-body input[type='checkbox']:checked {
    background: #007aff !important;
    background-color: #007aff !important;
    border-color: #007aff !important;
    box-shadow: 0 3px 12px 0 rgba(0, 122, 255, 0.28) !important;
    accent-color: #007aff !important;
    }

    /* ======== 6. 严格保护 MarkText 快捷编辑浮动工具栏 (完全恢复原版外观) ======== */
    .mu-inline-format-toolbar,
    .mu-inline-format-toolbar *,
    .mu-format-picker,
    .mu-format-picker *,
    .mu-tooltip,
    .mu-tooltip *,
    .mu-popover,
    .mu-popover * {
    line-height: normal !important;
    }

    .mu-inline-format-toolbar ul,
    .mu-format-picker ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    }

    .mu-inline-format-toolbar li,
    .mu-format-picker li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    list-style: none !important;
    }

    /* ======== 7. 图片样式 (Images) ======== */
    img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0.75rem auto !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    background-color: transparent !important;
    }

    /* ======== 8. 独立代码框 (仅背景色、字体与高亮,框架保留原版) ======== /
    /
    代码框背景色 */
    pre {
    background-color: #2b2b2b !important;
    color: #A9B7C6 !important;
    }

    /* 代码字体 */
    pre code {
    font-family: var(--font-monospace) !important;
    color: #A9B7C6 !important;
    }

    /* 代码块选中文本高对比度优化:完全保持修复后的经典深蓝选区 (#264f78) + 纯白文字反白 */
    pre ::selection,
    pre code ::selection,
    pre *::selection,
    pre .token::selection,
    .mu-code-block ::selection,
    .mu-code-block code ::selection,
    .mu-code-block *::selection,
    .mu-code-block .token::selection,
    .mu-code-block .mu-selection,
    .mu-code-block .mu-selection * {
    background-color: #264f78 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    }

    /* 语法高亮配色 (IntelliJ / Darcula) */
    .token.keyword, .token.boolean, .token.operator, .token.important, .token.atrule,
    .hljs-keyword, .hljs-selector-tag {
    color: #CC7832 !important;
    }

    .token.function, .token.class-name, .token.title,
    .hljs-title, .hljs-function {
    color: #FFD760 !important;
    }

    .token.string, .token.char, .token.attr-value,
    .hljs-string {
    color: #6A8759 !important;
    }

    .token.number, .hljs-number {
    color: #6897BB !important;
    }

    .token.comment, .token.prolog, .token.doctype, .hljs-comment {
    color: #787878 !important;
    font-style: italic !important;
    }

    .token.tag, .hljs-tag {
    color: #E8BF6A !important;
    }

    .token.attr-name, .token.property, .token.variable, .token.symbol,
    .hljs-attr, .hljs-variable {
    color: #9876AA !important;
    }

    .token.builtin, .hljs-built_in {
    color: #FF9E59 !important;
    }

    .token.regex, .token.macro, .hljs-meta {
    color: #BBB529 !important;
    }

    .token.punctuation {
    color: #A9B7C6 !important;
    }

    .token.error {
    color: #BC3F3C !important;
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions