0
点赞
收藏
分享

微信扫一扫

Typora主题定制之数学公式和字体篇


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​​1​​知道了要这样改:

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

  1. ​​Math edit interface background · Issue #5 · typora/typora-monospace-theme (github.com)​​; ↩︎


举报

相关推荐

0 条评论