写在前面
最近偏爱一款Typora主题, 叫做Monospace-dark, 其GitHub主页如下:
typora/typora-monospace-theme: A monospace theme for Typora (github.com);
我做了一些修改, 其实就是CSS文件, 放在了dotfile/typora-theme at main · Apocaly-pse/dotfile (github.com);
字体上我用了JetBrainsMono Nerd Font Mono这款支持字符合并的字体, 之前在终端和sublime上用起来还不错, 于是就想着移植到typora了, 但是这也走了很多弯路, 因为我没学过CSS, 都是依靠一点一点尝试和查看文档来做的.
下面的修改都是基于Monospace-dark这款主题的.
字体的下载:
字体的修改
这里我修改了代码字体和正文字体, 这样在正文中使用->就会显示出一个箭头了.
/* 更改正文的英文&符号的字体 */
html, body {
font-size: 18px;
color: #ebebeb;
background: #222;
background: var(--bg-color);
font-family: 'JetBrainsMono Nerd Font Mono', monospace;
}
/* 更改代码字体 */
.CodeMirror {
font-family: 'JetBrainsMono Nerd Font Mono', monospace;
}
然后退出typora再打开就可以看到字体的变化了.
数学公式
行内公式
这里的行内公式指的是形如$\sin$这样的公式, 一开始这里的字体颜色不好看, 并且由于是暗色主题, 看起来对比不明显, 下面参考了默认的typora主题github-dark, 使用下面的代码修改:
:root {
--bg-color: #222;
--side-bar-bg-color: #5F5F5F;
--active-file-text-color: #222;
--text-color: #ebebeb;
--window-border: 1px solid #606060;
--active-file-bg-color: rgba(219, 219, 253, 0.4);
/*--active-file-text-color: white;*/
--control-text-color: #ccc;/* 边栏字体颜色*/
--item-hover-bg-color: #161b22; /*鼠标悬停时控件项的背景，如侧边栏中的菜单*/
}
/* math */
.md-inline-math g,
.md-inline-math svg {
stroke: #b8bfc6 !important;
fill: #b8bfc6 !important;
}
/* Inline Math Editing */
.md-inline-math script {
color: #f9826c;
}
/* Edit Math Blocks */
.md-rawblock-control:not(.md-rawblock-tooltip) {
font-size: 1rem;
background-color: var(--item-hover-bg-color);
}
.MathJax_SVG:focus {
outline: none;
background-color: transparent;
}
/* cover color */
[md-inline='inline_math'] {
color: #F1BFE9;
}
行间公式(公式块,block)
这里一开始的鼠标悬停颜色是纯白色, 然后字体还是白的, 啥也看不到, 后来看了issue1知道了要这样改:
:root {/* 添加 */
--rawblock-edit-panel-bd: #161b01; /* 数学公式块的鼠标悬停颜色 */
}