Typora代码块怎么操作配色和标题自带序号

本篇内容主要讲解“Typora代码块怎么操作配色和标题自带序号”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Typora代码块怎么操作配色和标题自带序号”吧!

效果：标题自带序号，代码块配色，代码块左上角仿mac图标

先打开主题文件夹

文件>偏好设置>外观>打开主题文件夹

然后编辑base.user.css（如果没有就新建一个）文件

将以下代码加入即可

.sidebar-content {    counter-reset: h2}.outline-h2 {    counter-reset: h3}.outline-h3 {    counter-reset: h4}.outline-h4 {    counter-reset: h5}.outline-h5 {    counter-reset: h6}.outline-h6 {    counter-reset: h7}.outline-h2>.outline-item>.outline-label:before {    counter-increment: h2;    content: counter(h2) " "}.outline-h3>.outline-item>.outline-label:before {    counter-increment: h3;    content: counter(h2) "."counter(h3) " "}.outline-h4>.outline-item>.outline-label:before {    counter-increment: h4;    content: counter(h2) "."counter(h3) "."counter(h4) " "}.outline-h5>.outline-item>.outline-label:before {    counter-increment: h5;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "}.outline-h6>.outline-item>.outline-label:before {    counter-increment: h6;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "}.outline-h7>.outline-item>.outline-label:before {    counter-increment: h7;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) "."counter(h7) " "}#write {    counter-reset: h2}h2 {    counter-reset: h3}h3 {    counter-reset: h4}h4 {    counter-reset: h5}h5 {    counter-reset: h6}h6 {    counter-reset: h7}#write h2:before {    counter-increment: h2;    content: counter(h2) " "}#write h3:before {    counter-increment: h3;    content: counter(h2) "."counter(h3) " "}#write h4:before,h4.md-focus.md-heading:before    {    counter-increment: h4;    content: counter(h2) "."counter(h3) "."counter(h4) " "}#write h5:before,h5.md-focus.md-heading:before {    counter-increment: h5;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "}#write h6:before,h6.md-focus.md-heading:before {    counter-increment: h6;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "}#write h7:before,h7.md-focus.md-heading:before {    counter-increment: h7;    content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) "."counter(h7) " "}#write>h4.md-focus:before,#write>h5.md-focus:before,#write>h6.md-focus:before,#write>h7.md-focus:before,h4.md-focus:before,h5.md-focus:before,h6.md-focus:before,h7.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;}.CodeMirror-line .cm-number,.CodeMirror-line .cm-property {    color: #f08d49;}.CodeMirror-line .cm-variable-3,.CodeMirror-line .cm-qualifier,.CodeMirror-line .cm-variable-2 {    color: #FFCB6B;}.CodeMirror-line .cm-meta,.CodeMirror-line .cm-atom,.CodeMirror-line .cm-keyword{    color: #cc99cd;}.CodeMirror-line .cm-def,.CodeMirror-line .cm-variable {    color: #FFCB6B;}.CodeMirror-line .cm-builtin {    color: #82AAFF;}.CodeMirror-line .cm-comment {    color: #888;}.CodeMirror-line .cm-string,.CodeMirror-line .cm-string-2 {    color: #7ec699}.CodeMirror-line .cm-operator {    color: #67cdcc}.CodeMirror div.CodeMirror-cursor {    border-left: 1px solid #fff;    z-index: 3;}.CodeMirror-selected,.CodeMirror-selectedtext {    background: #666 !important;}.CodeMirror-line .cm-tag{    color: #F07178;}.CodeMirror-line .cm-bracket{    color: #FFF;}.CodeMirror-line .cm-attribute{    color: #FFCB6B;}

到此，相信大家对“Typora代码块怎么操作配色和标题自带序号”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！