【免费下载链接】markraA WYSIWYG Markdown editor with native AI. Fully open source. Free to use. Your data stays local.项目地址https://gitcode.com/gh_mirrors/mar/markra点击查看免费下载Markra 是一款完全免费、开源的 WYSIWYG Markdown 编辑器数据保存在本地。它的主题系统支持 CSS 自定义并且能自动识别、适配你现成的 Typora 主题——本教程将带你在 3 步内完成 Markra 主题定制并附上一份常用 CSS 变量速查表和 Typora 主题迁移指南。一、Markra 主题定制 3 步流程整个过程在「设置 → 外观」中完成无需重启应用。第 1 步确认主题文件夹打开「设置 → 外观」可以点「选择主题文件夹」指向任意已有 CSS 目录也可以保留默认目录。点「打开主题文件夹」会直接打开当前生效的目录——浅色/深色模板starter-light.css和starter-dark.css就存放在这里复制一份当作自己的起点最省事。第 2 步分别指定浅色与深色 CSS 文件开启「自定义主题」后分别为浅色、深色外观各选一个 CSS 文件。一次只生效一个目录路径会显示在设置里重启后依然保留并且多个窗口之间自动同步。第 3 步编辑保存后点击「刷新主题」用任意文本编辑器修改 CSS 并保存回到 Markra 点击「刷新主题」新样式立刻应用到所有窗口。如果文件暂时丢失或无法读取Markra 会回退到设置中保存的 CSS 并保留你的选择修复文件后再次刷新即可恢复。二、Markra 主题 CSS 变量速查自定义 CSS 只需盯住两个作用域作用域选择器影响范围应用界面:root[data-themecustom]侧边栏、按钮等整体 UIMarkdown 正文.markdown-paper[data-editor-themecustom]文档纸面、标题、代码块界面常用变量浅色模板见 light.css深色模板见 dark.css变量含义--bg-primary主背景色--bg-secondary次级背景侧边栏等--text-primary/--text-secondary主文字 / 次要文字颜色--accent强调色选中、按钮高亮--border-default默认边框颜色正文常用变量变量含义--editor-paper-bg文档纸面背景--editor-font-family正文字体需在「主题默认」生效--editor-heading-font-family标题字体--editor-code-font-family代码字体行内代码、围栏代码块、预览代码--editor-h1-font-size~--editor-h6-font-size各级标题字号--editor-h1-color等各级标题颜色--editor-code-bg/--editor-inline-code-bg代码块 / 行内代码背景--editor-hl-keyword、--editor-hl-string等代码高亮配色一段最小可用的自定义主题:root[data-themecustom] .markdown-paper[data-editor-themecustom] { --editor-font-family: Noto Serif SC, serif; --editor-h1-font-size: 40px; --editor-h1-color: #2563eb; --editor-code-bg: #f6f8fa; }字体请写本机已安装的字族名。注意编辑器字体设置优先于主题正文字体要使用主题字体请把编辑器字体选为「主题默认」。三、Typora 主题 1 分钟迁移到 Markra用惯了 Typora 的朋友不用从零写 CSS——Markra 内置了 Typora 主题兼容层实现见 typora.ts直接把 Typora 主题目录设为「主题文件夹」或选择其中的 CSS 文件也可通过「导入 CSS」加载Markra 加载时自动识别 Typora 选择器和变量把基础样式转换为 Markra 原生变量原始文件保持只读不被修改从设置编辑器导出时同样不变。自动映射的变量举例--bg-color → --bg-primary 主背景 --text-color → --text-primary 正文颜色 --primary-color → --accent 强调色 --side-bar-bg-color → --bg-secondary 侧边栏背景 --monospace → --editor-code-font-family除变量外html/body/#write上的字体与颜色、H1–H6 的字号支持 px/pt/em/rem/%相对值会按源主题换算、链接/行内代码/代码块配色、常见.cm-keyword等高亮色都会被转换。兼容边界要心里有数这是基础适配器而非 Typora 完整复刻。布局间距、表格/列表/引用布局、伪元素、media等条件规则、自带字体和图片都不会加载缺失部分自动使用对应浅色/深色 Markra 基础配色兜底。设置面板会明确报告被跳过的规则、资源依赖和 CSS 解析错误看到提示就知道哪些样式未生效。四、避坑清单4 个常见坑 ️别动.cm-line编辑行的行高、高度、内边距由 CodeMirror 管理强行修改会导致光标错位和选区异常。字号、行高不开放成变量是有意为之请优先用变量。文件限制仅支持 ≤ 1 MiB 的自包含 UTF-8 CSS相对路径url(...)、import主题包暂不支持。换目录会清空文件选择切换到不同主题目录时浅色/深色文件选择会被重置需重新选择这是为了避免误用同名文件。导出样式独立自定义主题只影响应用与编辑器HTML/PDF 导出使用各自独立的导出样式。完整说明见 主题 README界面文案对应 zh-CN.ts。把「自定义主题」关掉即可随时回到内置色板。赞分享【免费下载链接】markraA WYSIWYG Markdown editor with native AI. Fully open source. Free to use. Your data stays local.项目地址https://gitcode.com/gh_mirrors/mar/markra点击查看免费下载相关推荐3步搞定Cloudreve主题定制CSS变量与无缝切换指南3步搞定Cloudreve主题定制CSS变量与无缝切换指南 你是否还在为云盘系统界面单调而烦恼想让Cloudreve的界面更符合品牌调性却不知从何下手本文后端对象存储存储Chewy搜索API完全指南构建高效Elasticsearch查询的10个技巧Chewy搜索API完全指南构建高效Elasticsearch查询的10个技巧 Chewy是一个基于官方elasticsearch ruby客户端的高级Ela后端Grommet CSS变量主题简化主题定制与切换Grommet CSS变量主题简化主题定制与切换 你是否还在为前端项目中的主题定制和切换而烦恼手动修改大量样式文件、面对复杂的主题逻辑、担心不同组件样式冲突前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考