当前位置：首页 > news >正文

Typora-macOS 风格代码块

news 来源：原创 2025/6/4 14:14:48

效果：

替换 Typora安装目录中 themes 文件夹下的 base.user.css 文件，直接替换即可，建议先备份。

css：

/* ================= 语法高亮配色 ================= */
.CodeMirror-line .cm-number { color: #b5cea8; }       /* 数字 - 浅绿色 */
.CodeMirror-line .cm-property { color: #9cdcfe; }    /* 属性 - 浅蓝色 */
.CodeMirror-line .cm-variable-3 { color: #4ec9b0; }  /* 类型/返回值 - 青蓝色 */
.CodeMirror-line .cm-qualifier { color: #d7ba7d; }   /* 限定符 - 金色 */
.CodeMirror-line .cm-variable-2 { color: #9cdcfe; }  /* 变量 - 浅蓝色 */
.CodeMirror-line .cm-meta { color: #569cd6; }        /* 宏/头文件 - 蓝色 */
.CodeMirror-line .cm-atom { color: #569cd6; }        /* true/false - 蓝色 */
.CodeMirror-line .cm-keyword { color: #c586c0; }     /* 关键字 - 紫色 */
.CodeMirror-line .cm-def { color: #dcdcaa; }         /* 函数定义 - 浅黄色 */
.CodeMirror-line .cm-variable { color: #9cdcfe; }    /* 变量 - 浅蓝色 */
.CodeMirror-line .cm-builtin { color: #dcdcaa; }     /* 内置函数 - 浅黄色 */
.CodeMirror-line .cm-comment { color: #6a9955;                  /* 注释 - 绿色 */
}
.CodeMirror-line .cm-string { color: #ce9178; }      /* 字符串 - 橙红色 */
.CodeMirror-line .cm-string-2 { color: #ce9178; }    /* 模板字符串 - 橙红色 */
.CodeMirror-line .cm-operator { color: #d4d4d4; }    /* 操作符 - 白色 */
.CodeMirror-line .cm-tag { color: #569cd6; }         /* HTML标签 - 蓝色 */
.CodeMirror-line .cm-bracket { color: #808080; }     /* 括号 - 灰色 */
.CodeMirror-line .cm-attribute { color: #9cdcfe; }   /* HTML属性 - 浅蓝色 *//* 计数器相关的CSS规则 如需要可启用 */
/*
.sidebar-content {counter-reset: h1
}.outline-h1 {counter-reset: h2
}.outline-h2 {counter-reset: h3
}.outline-h3 {counter-reset: h4
}.outline-h4 {counter-reset: h5
}.outline-h5 {counter-reset: h6
}.outline-h1>.outline-item>.outline-label:before {counter-increment: h1;content: counter(h1) " "
}.outline-h2>.outline-item>.outline-label:before {counter-increment: h2;content: counter(h1) "."counter(h2) " "
}.outline-h3>.outline-item>.outline-label:before {counter-increment: h3;content: counter(h1) "."counter(h2) "."counter(h3) " "
}.outline-h4>.outline-item>.outline-label:before {counter-increment: h4;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
}.outline-h5>.outline-item>.outline-label:before {counter-increment: h5;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
}.outline-h6>.outline-item>.outline-label:before {counter-increment: h6;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
}#write {counter-reset: h1
}h1 {counter-reset: h2
}h2 {counter-reset: h3
}h3 {counter-reset: h4
}h4 {counter-reset: h5
}h5 {counter-reset: h6
}#write h1:before {counter-increment: h1;content: counter(h1) " "
}#write h2:before {counter-increment: h2;content: counter(h1) "."counter(h2) " "
}#write h3:before,
h3.md-focus.md-heading:before{counter-increment: h3;content: counter(h1) "."counter(h2) "."counter(h3) " "
}#write h4:before,
h4.md-focus.md-heading:before {counter-increment: h4;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
}#write h5:before,
h5.md-focus.md-heading:before {counter-increment: h5;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
}#write h6:before,
h6.md-focus.md-heading:before {counter-increment: h6;content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
}
*/#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {color: inherit;border: inherit;border-radius: inherit;position: inherit;left: initial;float: none;top: initial;font-size: inherit;padding-left: inherit;padding-right: inherit;vertical-align: inherit;font-weight: inherit;line-height: inherit;
}.CodeMirror-lines {padding-left: 4px;
}.code-tooltip {box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);border-top: 1px solid #eef2f2;
}.md-fences,
code,
tt {background-color: #f8f8f8;border-radius: 3px;padding: 0;padding-left: 4px !important;padding-right: 4px !important;font-size: 0.9em;
}code {background-color: #f3f4f4;padding: 0 2px 0 2px;
}.md-fences {margin-bottom: 15px;margin-top: 15px;padding-top: 8px;padding-bottom: 6px;
}.md-task-list-item > input {margin-left: -1.3em;
}@media print {html {font-size: 13px;}table,pre {page-break-inside: avoid;}pre {word-wrap: break-word;}
}.md-fences {background-color: #f8f8f8;
}
#write pre.md-meta-block {padding: 1rem;font-size: 85%;line-height: 1.45;background-color: #f7f7f7;border: 0;border-radius: 3px;color: #777777;margin-top: 0 !important;
}.mathjax-block>.code-tooltip {bottom: .375rem;
}#write .md-fences:not([mermaid-type])  {padding-top: 7px;border-radius: 10px;background-color: #282c34;color: #eeeeee;
}.code-tooltip .ty-input,
.code-tooltip input {color: #eee;
}.CodeMirror-wrap .CodeMirror-scroll {padding-top: 20px;
}#write .md-fences:before {content: "";z-index: 4;display: block;position: absolute;top: 7px;left: 13px;width: 15px;height: 15px;border-radius: 50%;float: left;background-color: #fa3534;
}#write .CodeMirror-scroll:before {content: "";display: block;position: absolute;top: 0px;left: 29px;width: 15px;height: 15px;border-radius: 50%;float: left;z-index: 999;background-color: #ff9900;
}
#write .md-fences::after {content: "";z-index: 4;display: block;position: absolute;top: 7px;left: 53px;width: 15px;height: 15px;border-radius: 50%;float: left;background-color: #19be6b;
}