经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
Typora代码块配色和标题自带序号的实现代码_CSS教程_CSS
来源:jb51  时间:2020/11/23 11:51:07  对本文有异议

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

在这里插入图片描述

先打开主题文件夹

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

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

将以下代码加入即可

  1. /*标题自动添加序号*/
  2. .sidebar-content {
  3. counter-reset: h1
  4. }
  5.  
  6. .outline-h1 {
  7. counter-reset: h2
  8. }
  9.  
  10. .outline-h2 {
  11. counter-reset: h3
  12. }
  13.  
  14. .outline-h3 {
  15. counter-reset: h4
  16. }
  17.  
  18. .outline-h4 {
  19. counter-reset: h5
  20. }
  21.  
  22. .outline-h5 {
  23. counter-reset: h6
  24. }
  25.  
  26. .outline-h1>.outline-item>.outline-label:before {
  27. counter-increment: h1;
  28. content: counter(h1) " "
  29. }
  30.  
  31. .outline-h2>.outline-item>.outline-label:before {
  32. counter-increment: h2;
  33. content: counter(h1) "."counter(h2) " "
  34. }
  35.  
  36. .outline-h3>.outline-item>.outline-label:before {
  37. counter-increment: h3;
  38. content: counter(h1) "."counter(h2) "."counter(h3) " "
  39. }
  40.  
  41. .outline-h4>.outline-item>.outline-label:before {
  42. counter-increment: h4;
  43. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
  44. }
  45.  
  46. .outline-h5>.outline-item>.outline-label:before {
  47. counter-increment: h5;
  48. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
  49. }
  50.  
  51. .outline-h6>.outline-item>.outline-label:before {
  52. counter-increment: h6;
  53. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
  54. }
  55.  
  56. #write {
  57. counter-reset: h1
  58. }
  59.  
  60. h1 {
  61. counter-reset: h2
  62. }
  63.  
  64. h2 {
  65. counter-reset: h3
  66. }
  67.  
  68. h3 {
  69. counter-reset: h4
  70. }
  71.  
  72. h4 {
  73. counter-reset: h5
  74. }
  75.  
  76. h5 {
  77. counter-reset: h6
  78. }
  79.  
  80. #write h1:before {
  81. counter-increment: h1;
  82. content: counter(h1) " "
  83. }
  84.  
  85. #write h2:before {
  86. counter-increment: h2;
  87. content: counter(h1) "."counter(h2) " "
  88. }
  89.  
  90. #write h3:before,
  91. h3.md-focus.md-heading:before
  92.  
  93. {
  94. counter-increment: h3;
  95. content: counter(h1) "."counter(h2) "."counter(h3) " "
  96. }
  97.  
  98. #write h4:before,
  99. h4.md-focus.md-heading:before {
  100. counter-increment: h4;
  101. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) " "
  102. }
  103.  
  104. #write h5:before,
  105. h5.md-focus.md-heading:before {
  106. counter-increment: h5;
  107. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) " "
  108. }
  109.  
  110. #write h6:before,
  111. h6.md-focus.md-heading:before {
  112. counter-increment: h6;
  113. content: counter(h1) "."counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6) " "
  114. }
  115.  
  116. #write>h3.md-focus:before,
  117. #write>h4.md-focus:before,
  118. #write>h5.md-focus:before,
  119. #write>h6.md-focus:before,
  120. h3.md-focus:before,
  121. h4.md-focus:before,
  122. h5.md-focus:before,
  123. h6.md-focus:before {
  124. color: inherit;
  125. border: inherit;
  126. border-radius: inherit;
  127. position: inherit;
  128. left: initial;
  129. float: none;
  130. top: initial;
  131. font-size: inherit;
  132. padding-left: inherit;
  133. padding-right: inherit;
  134. vertical-align: inherit;
  135. font-weight: inherit;
  136. line-height: inherit;
  137. }
  138. /*因为不同主题的代码块部分不一样,code部分统一*/
  139. .CodeMirror-lines {
  140. padding-left: 4px;
  141. }
  142.  
  143. .code-tooltip {
  144. box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
  145. border-top: 1px solid #eef2f2;
  146. }
  147.  
  148. .md-fences,
  149. code,
  150. tt {
  151. background-color: #f8f8f8;
  152. border-radius: 3px;
  153. padding: 0;
  154. padding-left: 4px !important;
  155. padding-right: 4px !important;
  156. font-size: 0.9em;
  157. }
  158.  
  159. code {
  160. background-color: #f3f4f4;
  161. padding: 0 2px 0 2px;
  162. }
  163.  
  164. .md-fences {
  165. margin-bottom: 15px;
  166. margin-top: 15px;
  167. padding-top: 8px;
  168. padding-bottom: 6px;
  169. }
  170.  
  171.  
  172. .md-task-list-item > input {
  173. margin-left: -1.3em;
  174. }
  175.  
  176. @media print {
  177. html {
  178. font-size: 13px;
  179. }
  180. table,
  181. pre {
  182. page-break-inside: avoid;
  183. }
  184. pre {
  185. word-wrap: break-word;
  186. }
  187. }
  188.  
  189. .md-fences {
  190. background-color: #f8f8f8;
  191. }
  192. #write pre.md-meta-block {
  193. padding: 1rem;
  194. font-size: 85%;
  195. line-height: 1.45;
  196. background-color: #f7f7f7;
  197. border: 0;
  198. border-radius: 3px;
  199. color: #777777;
  200. margin-top: 0 !important;
  201. }
  202.  
  203. .mathjax-block>.code-tooltip {
  204. bottom: .375rem;
  205. }
  206.  
  207.  
  208.  
  209. /*深色背景*/
  210.  
  211. #write .md-fences:not([mermaid-type]) {
  212. padding-top: 7px;
  213. border-radius: 10px;
  214. background-color: #282c34;
  215. color: #eeeeee;
  216. }
  217.  
  218. .code-tooltip .ty-input,
  219. .code-tooltip input {
  220. color: #eee;
  221. }
  222.  
  223.  
  224. /*MAC的三个图标*/
  225. .CodeMirror-wrap .CodeMirror-scroll {
  226. padding-top: 20px;
  227. }
  228.  
  229. #write .md-fences:before {
  230. content: "";
  231. z-index: 4;
  232. display: block;
  233. position: absolute;
  234. top: 7px;
  235. left: 13px;
  236. width: 15px;
  237. height: 15px;
  238. border-radius: 50%;
  239. float: left;
  240. background-color: #fa3534;
  241. }
  242.  
  243. #write .CodeMirror-scroll:before {
  244. content: "";
  245. display: block;
  246. position: absolute;
  247. top: 0px;
  248. left: 29px;
  249. width: 15px;
  250. height: 15px;
  251. border-radius: 50%;
  252. float: left;
  253. z-index: 999;
  254. background-color: #ff9900;
  255. }
  256. #write .md-fences::after {
  257. content: "";
  258. z-index: 4;
  259. display: block;
  260. position: absolute;
  261. top: 7px;
  262. left: 53px;
  263. width: 15px;
  264. height: 15px;
  265. border-radius: 50%;
  266. float: left;
  267. background-color: #19be6b;
  268. }
  269.  
  270. /*配色*/
  271. .CodeMirror-line .cm-number,/*数字*/
  272. .CodeMirror-line .cm-property {/*被调用的方法*/
  273. color: #f08d49;
  274. }
  275. .CodeMirror-line .cm-variable-3,/*形参,类型*/
  276. .CodeMirror-line .cm-qualifier,/*css class*/
  277. .CodeMirror-line .cm-variable-2 {/*被使用的形参*/
  278. color: #FFCB6B;
  279. }
  280. .CodeMirror-line .cm-meta,/*省略号,注解等*/
  281. .CodeMirror-line .cm-atom,/*css属性值,布尔值等等*/
  282. .CodeMirror-line .cm-keyword{/*关键字*/
  283. color: #cc99cd;
  284. }
  285. .CodeMirror-line .cm-def,/*变量名*/
  286. .CodeMirror-line .cm-variable {/*被使用的变量名*/
  287. color: #FFCB6B;
  288. }
  289. .CodeMirror-line .cm-builtin {/*被调用的属性*/
  290. color: #82AAFF;
  291. }
  292. .CodeMirror-line .cm-comment {/*注释*/
  293. color: #888;
  294. }
  295. .CodeMirror-line .cm-string,/*字符串*/
  296. .CodeMirror-line .cm-string-2 {/*正则表达式*/
  297. color: #7ec699
  298. }
  299. .CodeMirror-line .cm-operator {/*运算符*/
  300. color: #67cdcc
  301. }
  302. .CodeMirror div.CodeMirror-cursor {/*光标*/
  303. border-left: 1px solid #fff;
  304. z-index: 3;
  305. }
  306. .CodeMirror-selected,/*选中的背景*/
  307. .CodeMirror-selectedtext {
  308. background: #666 !important;
  309. }
  310.  
  311. /*html*/
  312. .CodeMirror-line .cm-tag{/*标签名字*/
  313. color: #F07178;
  314. }
  315. .CodeMirror-line .cm-bracket{/*标签尖括号*/
  316. color: #FFF;
  317. }
  318. .CodeMirror-line .cm-attribute{/*属性*/
  319. color: #FFCB6B;
  320. }

到此这篇关于Typora代码块配色和标题自带序号的实现代码的文章就介绍到这了,更多相关Typora代码块内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号