标签：md Typora outline color 代码 counter 配色 CodeMirror before
Typora代码块配色和标题自带序号的实现代码
- 先打开主题文件夹
- 文件>偏好设置>外观>打开主题文件夹
- 然后编辑base.user.css（如果没有就新建一个）文件
/*标题自动添加序号*/
.sidebar-content {
``counter-reset``: h``1
}
.outline-h``1` `{
``counter-reset``: h``2
}
.outline-h``2` `{
``counter-reset``: h``3
}
.outline-h``3` `{
``counter-reset``: h``4
}
.outline-h``4` `{
``counter-reset``: h``5
}
.outline-h``5` `{
``counter-reset``: h``6
}
.outline-h``1``>.outline-item>.outline-label:before {
``counter-increment``: h``1``;
``content``: ``counter``(h``1``) ``" "
}
.outline-h``2``>.outline-item>.outline-label:before {
``counter-increment``: h``2``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``" "
}
.outline-h``3``>.outline-item>.outline-label:before {
``counter-increment``: h``3``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``" "
}
.outline-h``4``>.outline-item>.outline-label:before {
``counter-increment``: h``4``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``" "
}
.outline-h``5``>.outline-item>.outline-label:before {
``counter-increment``: h``5``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``"."``counter``(h``5``) ``" "
}
.outline-h``6``>.outline-item>.outline-label:before {
``counter-increment``: h``6``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``"."``counter``(h``5``) ``"."``counter``(h``6``) ``" "
}
#write {
``counter-reset``: h``1
}
h``1` `{
``counter-reset``: h``2
}
h``2` `{
``counter-reset``: h``3
}
h``3` `{
``counter-reset``: h``4
}
h``4` `{
``counter-reset``: h``5
}
h``5` `{
``counter-reset``: h``6
}
#write h``1:``before {
``counter-increment``: h``1``;
``content``: ``counter``(h``1``) ``" "
}
#write h``2:``before {
``counter-increment``: h``2``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``" "
}
#write h``3:``before,
h``3``.md-focus.md-heading:before
``{
``counter-increment``: h``3``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``" "
}
#write h``4:``before,
h``4``.md-focus.md-heading:before {
``counter-increment``: h``4``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``" "
}
#write h``5:``before,
h``5``.md-focus.md-heading:before {
``counter-increment``: h``5``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``"."``counter``(h``5``) ``" "
}
#write h``6:``before,
h``6``.md-focus.md-heading:before {
``counter-increment``: h``6``;
``content``: ``counter``(h``1``) ``"."``counter``(h``2``) ``"."``counter``(h``3``) ``"."``counter``(h``4``) ``"."``counter``(h``5``) ``"."``counter``(h``6``) ``" "
}
#write>h``3``.md-focus:before,
#write>h``4``.md-focus:before,
#write>h``5``.md-focus:before,
#write>h``6``.md-focus:before,
h``3``.md-focus:before,
h``4``.md-focus:before,
h``5``.md-focus:before,
h``6``.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;
}
/*因为不同主题的代码块部分不一样，code部分统一*/
.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``: ``1``rem;
``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``: .``375``rem;
}
/*深色背景*/
#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``;
}
/*MAC的三个图标*/
.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,``/*css class*/
.CodeMirror-line .cm-variable``-2` `{``/*被使用的形参*/
``color``: ``#FFCB6B``;
}
.CodeMirror-line .cm-meta,``/*省略号,注解等*/
.CodeMirror-line .cm-atom,``/*css属性值，布尔值等等*/
.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``;
}
/*html*/
.CodeMirror-line .cm-tag{``/*标签名字*/
``color``: ``#F07178``;
}
.CodeMirror-line .cm-bracket{``/*标签尖括号*/
``color``: ``#FFF``;
}
.CodeMirror-line .cm-attribute{``/*属性*/
``color``: ``#FFCB6B``;
}
参考：https://www.jb51.net/css/753133.html
标签：md,Typora,outline,color,代码,counter,配色,CodeMirror,before 来源： https://www.cnblogs.com/aslanvon/p/15049603.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。