typora代码块样式/主题

by Typora.net
Typora使用CodeMirror在代码围墙中突出显示语法。Typora中的代码围栏cm-s-inner用作其主题类。 要将CodeMirror主题移植到Typora中，例如material.css：
  1. 复制并粘贴到主题文件夹中base.user.css或[theme].user.css在主题文件夹下，然后将其CodeMirror主题类名称替换cm-s-inner为，例如，将原始名称更改.cm-s-material为.cm-s-inner。
  2. 在由CodeMirror渲染之前，代码围栏的结构为。因此，还请在.md-fences选择器中应用诸如字体系列，颜色和背景之类的基本样式。
因此，最终的CSS将是：
/** ported from https://codemirror.net/theme/material.css **/ /* Name: material Author: Michael Kaminsky (http://github.com/mkaminsky11) Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme) */ .cm-s-inner { background-color: #263238; color: rgba(233, 237, 237, 1); } .cm-s-inner .CodeMirror-gutters { background: #263238; color: rgb(83,127,126); border: none; } .cm-s-inner .CodeMirror-guttermarker, .cm-s-inner .CodeMirror-guttermarker-subtle, .cm-s-inner .CodeMirror-linenumber { color: rgb(83,127,126); } .cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; } .cm-s-inner div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } .cm-s-inner .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); } .cm-s-inner .cm-keyword { color: rgba(199, 146, 234, 1); } .cm-s-inner .cm-operator { color: rgba(233, 237, 237, 1); } .cm-s-inner .cm-variable-2 { color: #80CBC4; } .cm-s-inner .cm-variable-3 { color: #82B1FF; } .cm-s-inner .cm-builtin { color: #DECB6B; } .cm-s-inner .cm-atom { color: #F77669; } .cm-s-inner .cm-number { color: #F77669; } .cm-s-inner .cm-def { color: rgba(233, 237, 237, 1); } .cm-s-inner .cm-string { color: #C3E88D; } .cm-s-inner .cm-string-2 { color: #80CBC4; } .cm-s-inner .cm-comment { color: #546E7A; } .cm-s-inner .cm-variable { color: #82B1FF; } .cm-s-inner .cm-tag { color: #80CBC4; } .cm-s-inner .cm-meta { color: #80CBC4; } .cm-s-inner .cm-attribute { color: #FFCB6B; } .cm-s-inner .cm-property { color: #80CBAE; } .cm-s-inner .cm-qualifier { color: #DECB6B; } .cm-s-inner .cm-variable-3 { color: #DECB6B; } .cm-s-inner .cm-tag { color: rgba(255, 83, 112, 1); } .cm-s-inner .cm-error { color: rgba(255, 255, 255, 1.0); background-color: #EC5F67; } .cm-s-inner .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } /**apply to code fences with plan text**/ .md-fences { background-color: #263238; color: rgba(233, 237, 237, 1); border: none; } .md-fences .code-tooltip { background-color: #263238; }
结果是： 您可以按照上面的示例编写自己的CSS样式以突出显示语法。 请注意，cm-s-inner这仅适用于代码围栏：它不会影响源代码模式下的markdown语法。并非所有CSS属性都将以源代码模式应用于代码围栏。
Tags: , ,