Typora代码块配色和标题自带序号的实现代码

2024-01-27 09:53:34

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

码农公寓

Typora代码块配色和标题自带序号的实现代码

相关文章