tags: CSS Frontend Tips

写在前面

最近偏爱一款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这款主题的.

字体的下载:

[nerd-fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf at master · ryanoasis/nerd-fonts (github.com)](https://github.com/ryanoasis/nerd-fonts/blob/master/patched-fonts/JetBrainsMono/Ligatures/Regular/complete/JetBrains Mono Regular Nerd Font Complete Mono.ttf);

字体的修改

这里我修改了代码字体和正文字体, 这样在正文中使用->就会显示出一个箭头了.

/* 更改正文的英文&符号的字体 */
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)

这里一开始的鼠标悬停颜色是纯白色, 然后字体还是白的, 啥也看不到, 后来看了issue¹知道了要这样改:

:root {/* 添加 */
    --rawblock-edit-panel-bd: #161b01; /* 数学公式块的鼠标悬停颜色 */
}