新增选项，解决问题：在某些主题下代码块内图标显示不清晰
Closed this issue · 9 comments
我发现在有些主题下，（不是全部，比如默认github主题就没这问题）你额外添加的例如```abc 这些的代码块应该是有更改过图标的一些颜色的，就刚好和我代码块设置的背景色高度相似，就导致在我的主题下就基本看不见了。如图，背景是黑的而光标也是黑的可以说完全看不见光标了，右上角的编辑按钮可以说直接隐身了。我还是截图放大放大才隐约发现是有那么个图案。你能告诉我这些图标具体到哪修改颜色吗？这样我改下也能看清楚。
你好，感谢反馈。
问题反馈
fence_enhance 在新版本中新增了 BUTTON_COLOR 选项，可以自行决定按钮的颜色。
[fence_enhance]
# 按钮的颜色
BUTTON_COLOR = "currentColor"光标看不见的情况我这边复现不了，麻烦给一下对应主题，如果是自定义的，麻烦给一下对应的主题文件。
附加说明
主题适配问题是硬伤，没用一劳永逸的解决方法，因为主题的作者不会主动兼容此项目，我也无法主动兼容茫茫多的主题。
很多主题作者不遵守 Typora 的主题实现规范，所以有些主题是无法全部兼容的，兼容了主题 A 就会导致主题 B 有问题。
如果您懂 CSS，遇到主题兼容问题，可以考虑在 user_styles 目录下创建 customize.css 文件，并在里面写兼容代码。
@obgnail
你提到的这个选项在哪改呀？我更新后在右键菜单里没找到。你没提交代码在哪个文件夹。我就到这个文件里改了下没有作用。
光标的问题这是我用的主题文件附件里。它提示不支持CSS上传我改了下后缀你把后缀改回CSS就行。
gitbook-改.zip
光标问题，是这个主题本身设计不完善导致的。我这边兼容不了。
如下图，能正常显示光标：
原因：主题设置了 .CodeMirror { padding: 1rem; }，具体行的盒子尺寸很小，你只有点到下图高亮区域才能显示光标，很容易点错。
盲猜这个主题可能是你自己改的。总之，插件没有对光标做任何修改，如果发现光标问题，大概率需要修改主题文件
此 issue 关闭，如有问题，麻烦在下面留言，或者另开 issue。
嗯你说的对。我把padding去了确实都显示正常了。但是我之所以怀疑的问题在于插件上。因为typora本身内置的比如mermaid，Python，C。呀这些我的光标都没有问题。插件额外添加的那些就全军覆没了。额外添加的这些它会出现光标被遮了的现象。还能漏出来一点。然后第1次使用只要按一个字符进去就开始自动出图了。我在点击编辑把字符删掉重新按就又好了。然后呢我如果把padding去掉注释了。又发生了一个很奇怪的事。代码块里面没字会直接坍缩掉。这让我想起来CSS里的margin坍缩问题，什么浮动呀绝对定位呀那些事。具体过程就是比如我```abc 生成之后里面不输入任何字符。然后呢我把光标点到外面任何地方。关掉文件再点开他就坍缩了。而自带的比如mermaid，Python，C这些都不会有这个问题。你可以试试。这里我又测试了下用github的默认主题以及手上有的其他主题都试了一遍也能100%复现
你好，感谢反馈。
确实是插件的锅，原因是：当内容为空时我直接 return 了，没有执行后续的渲染任务。现在我仿照 mermaid，加了个 whenEmptyContent 的默认渲染样式。
修复代码在 dev，麻烦试用一下，看看还没有问题。
试了下把文件替换掉目前光标问题和坍塌都没有了。就是改变了输入逻辑。原先```calendar然后回车进入能直接处于文本框输入光标闪烁的状态。现在是直接会生成一个空的渲染图然后呢。我点右上角进入编辑。能改回原先直接进入编辑的状态吗？还是说这正是问题所在所以改动了逻辑吗？现在这样其实也还好麻烦一些。如果用曲线救国的方法在生成完图后再触发进入编辑状态也该也能模拟原来的操作吧。组件渲染目前都没有发生问题呀忽略我之前的编辑。之前编辑都是直接OCR readme文件里的示例OCR结果没有识别出空格。我还以为渲染有问题了。之前都是手搓知道要加空格这次OCR直接copy还以为出问题了
这种情况其实是我主动选择的。
所有的代码块插件都有一个 INTERACTIVE_MODE 选项，此选项为 true 时，只能通过点击那个【铅笔 icon】才能展开代码块的输入区。
设计这个选项的原因是：echarts、chart、calendar 可以运行 Node.js 代码，是可以监听 click 事件的，如果关闭这个选项，那么当 click 事件触发时将自动展开代码块的输入区，起不到交互的效果。
这也是为什么 mermaid 没有这个问题 —— mermaid 不会响应 click 事件。至于 kanban、abc 等不能响应 click 的插件，也只是出于统一目的设置为 false。
也就是说，如果你确定你的代码块不需要和鼠标进行 click 交互，可以将这些插件的 INTERACTIVE_MODE 全部置为 false，这样就和 mermaid 保持一致了。
[kanban]
# 默认处于交互模式（处于交互模式下，鼠标点击图表并不会展开代码块）
INTERACTIVE_MODE = true所有的代码块插件都有一个 TEMPLATE 选项，用于编辑示例。
通过 【右键菜单 -> 常用插件 -> 二级插件 -> kanban】就可以自动插入 TEMPLATE 的内容。