Typora 程式碼塊Mac風格化

CoderManolin發表於2024-10-23

Typora 程式碼塊Mac風格化

1 按照以下步驟開啟資料夾，在該資料夾裡建立mo.css檔案

2 在mo.css檔案複製以下程式碼全部替換

html {
  font-size: 18px;
}

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: justify;
  overflow-x: hidden;
  color: #282c34;
  background-color: #fefefe;
  -webkit-font-smoothing: antialiased;
}

:root {
	--h-border-color: rgba(36, 124, 240, 0.74);
	--h-bg-color: #E8FFE8;
	--sans-serif-font: "Noto Sans SC Medium", "Noto Sans SC", sans-serif;
	--monospace-font: "Source Code Pro Regular", "Source Code Pro", monospace;
}


content #write {
  background-color: #fefefe;
  max-width: 70%;
  margin: 0 auto;
  padding-bottom: 7.5rem;
}

content #write p {
  word-spacing: 0.05rem;
}

content #write ol li {
  padding-left: 0.5rem;
}

content #write > h1:first-child {
  font-weight: normal;
}

content #write > h5.md-focus:before {
  top: 2px;
}

::-moz-selection {
  background-color: #bac6e9;
}

::selection {
  background-color: #bac6e9;
}




#write {
	font-family: var(--sans-serif-font);
	max-width: 60rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

/*
yaml header settings
*/
#write pre.md-meta-block {
	font-family: var(--monospace-font);
	font-size: 1rem;
	text-align: left;
	padding: 0.6rem;
	color: rgb(134, 134, 134);
	background-color: var(--code-bg-color);
	border-radius: 0.4rem;
}

/*
headers settings
*/
#write h1 {
	font-size: 3rem;
	text-align: center;
	text-shadow: 0.15rem 0.15rem 0.3rem rgb(187, 187, 187);
}
#write h2 {
	font-size: 1.8rem;
	margin-top: 1.8rem;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	background-color: var(--h-bg-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-left: 0.5rem solid var(--h-border-color);
	border-radius: 0.4rem;
}
#write h3 {
	font-size: 1.6rem;
	text-decoration: underline double var(--h-border-color) 0.15rem;
}
#write h4 {
	text-decoration: underline dotted var(--h-border-color) 0.2rem;
}

/* paragraph */
p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* ul ol */
ul,
ol {
  padding-left: 1.75rem;
}

ul:first-child,
ol:first-child {
  margin-top: 0;
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

/* blockquote */
blockquote {
  padding: 0.5rem 1rem;
  border-left: 8px solid #2f845e;
  background-color: rgba(66, 185, 131, 0.1);
  border-radius: 4px;
}

blockquote code {
  background-color: transparent;
}

/* horizontal line */
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: 2px dashed #abb2bf;
}

/* table */
table,
.md-table-fig .md-table {
  border: 1px solid rgb(245, 137, 6);
  border-radius: 6px;
  border-collapse: separate;
  overflow: hidden;
}

table th,
table td,
.md-table-fig .md-table th,
.md-table-fig .md-table td {
  padding: 10px 16px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

table th:first-child,
table td:first-child,
.md-table-fig .md-table th:first-child,
.md-table-fig .md-table td:first-child {
  border-left: 0;
}

table thead,
.md-table-fig .md-table thead {
  background-color: #7babee;
  color: #000;
}

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead + tbody tr:first-child th,
table thead + tbody tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td,
.md-table-fig .md-table caption + thead tr:first-child th,
.md-table-fig .md-table caption + thead tr:first-child td,
.md-table-fig .md-table colgroup + thead tr:first-child th,
.md-table-fig .md-table colgroup + thead tr:first-child td,
.md-table-fig .md-table thead + tbody tr:first-child th,
.md-table-fig .md-table thead + tbody tr:first-child td,
.md-table-fig .md-table thead:first-child tr:first-child th,
.md-table-fig .md-table thead:first-child tr:first-child td {
  border-top: 0;
}

table tbody + tbody,
.md-table-fig .md-table tbody + tbody {
  border-top: 2px solid #ddd;
}

.md-table-fig .md-table-edit {
  background-color: #ddd;
}

.md-table-fig .md-table-edit .btn-default:hover {
  background-color: #bac6e9;
}

.md-table-fig .md-table-edit .md-table-resize-popover {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: none;
  padding: 0;
  background-color: transparent;
}

.md-table-fig .md-table-edit .md-table-resize-popover .arrow {
  top: -10px;
}

.md-table-fig .md-table-edit .md-table-resize-popover .arrow::after {
  border-bottom-color: #ddd;
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset {
  border-radius: 6px;
  background-color: #fff;
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input {
  color: #282c34 !important;
}

.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-width, .md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-height {
  text-align: center;
}

.md-table-fig .md-table-edit .md-table-resize-popover .popover-title {
  border-top: 1px solid #eee;
}

/* yaml front matter */
#write pre.md-meta-block {
  background: #e7ecf3;
  color: #486491;
  border: 0;
  border-radius: 6px;
  line-height: 1.3rem;
  padding: 0.5rem 1.5rem;
  margin-top: -1rem;
  margin-bottom: 2rem;
}

/* table of contents */
.md-toc {
  margin-bottom: 1.25rem;
}

/* task list */
.md-task-list-item > input::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #737373;
  background: #fff;
  -webkit-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}

.md-task-list-item > input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 0.6rem;
  height: 0.3rem;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}

.md-task-list-item > input:checked::before {
  background-color: #67c23a;
  border: none;
}

.md-task-list-item > input:checked::after {
  opacity: 1;
}

.md-task-list-item.task-list-done {
  text-decoration: line-through;
  color: #999;
}

/* footnote */
.footnotes {
  font-size: 1rem;
}

/* math,html block common */
.mathjax-block,
.md-htmlblock {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

.mathjax-block[contenteditable="false"]:active, .mathjax-block[contenteditable="false"]:focus,
.md-htmlblock[contenteditable="false"]:active,
.md-htmlblock[contenteditable="false"]:focus {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.mathjax-block:hover .md-rawblock-container,
.mathjax-block:hover .md-rawblock-tooltip,
.md-htmlblock:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-tooltip {
  background-color: #f5f6f7;
  -webkit-animation: showRawBlockTooltip 0s linear;
          animation: showRawBlockTooltip 0s linear;
}

.mathjax-block:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-container {
  border-radius: 6px 0 6px 6px;
}

.mathjax-block .md-rawblock-control,
.md-htmlblock .md-rawblock-control {
  background-color: #f5f6f7;
}

.mathjax-block .md-rawblock-tooltip,
.md-htmlblock .md-rawblock-tooltip {
  background-color: #f5f6f7;
  -webkit-animation: showRawBlockTooltip 0s linear;
          animation: showRawBlockTooltip 0s linear;
  border-radius: 4px 4px 0 0;
}

/* math block */
.mathjax-block .md-mathblock-panel .code-tooltip[contenteditable="false"] {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.mathjax-block .md-mathblock-panel .md-rawblock-before {
  padding-top: 6px;
  border-top-left-radius: 6px;
}

.mathjax-block .md-mathblock-panel .md-rawblock-after {
  padding-bottom: 6px;
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner {
  color: #282c34;
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-lines {
  color: #282c34;
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-gutters {
  background-color: #f5f6f7;
}

.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
  background-color: #bac6e9 !important;
}

.mathjax-block .md-math-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* html block */
.md-htmlblock .md-htmlblock-panel {
  border-radius: 6px;
  border-top-right-radius: 0;
  padding-left: 6px;
  padding-right: 6px;
}

.md-htmlblock .md-htmlblock-panel .md-rawblock-input {
  padding-top: 14px;
  padding-bottom: 10px;
}

.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
  background-color: #bac6e9 !important;
}

/* strong */
strong {
  background-color: inherit;
  color: #b5302e;
}

/* emphasis */
em {
  background-color: inherit;
  color: #949415;
}

/* underline */
u {
  background-color: inherit;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid #f00;
  padding-bottom: 1px;
}

/* code */
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  font-size: inherit;
}

code {
  background-color: rgba(34, 37, 38, 0.05);
  color: #e96900;
  font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 2px;
  padding: 3px 4px 1px;
  border-radius: 4px;
}

/* strike */
del {
  color: #999;
  text-decoration: line-through;
}

/* hightlight */
mark {
  color: #282c34;
  font-weight: 500;
  padding: 1px 5px 2px;
  border-radius: 2px;
}

/* hyperlink */
a {
  background-color: inherit;
  color: #2484c1;
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: none;
}
img {
  border-radius: 7px; /* 新增圓角效果，可根據需要自行調整 */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* code fences */
.md-fences:after {
  content: "";
  position: absolute;
  left: 11px;
  top: 5px;
  width: 12px;
  height: 12px;
  background-color: #ff374b;
  border-radius: 6px;
  z-index: 999999;
  box-shadow: 20px 0 #ffc600, 40px 0 #00e03d;
}
.CodeMirror.cm-s-inner {
  margin-top: 15px;
  background-color: #101215;
  border-radius: 3px;
}
.md-fences {
  font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #0b0a0a;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 2.5rem;
  border: none;
  border-radius: 6px;
}

.md-fences[contenteditable="false"]:active, .md-fences[contenteditable="false"]:focus {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.md-fences .code-tooltip {
  background-color: #282c34;
  border-radius: 4px;
}

.md-fences span {
  color: #abb2bf;
}

.md-fences .code-tooltip .ty-input {
  color: #fff;
  font-weight: 500;
}

.ty-show .autoComplt-list li.active {
  background-color: #bac6e9;
}

/* code container */
.cm-s-inner {
  background-color: #282c34;
}

.cm-s-inner .CodeMirror-gutters {
  background-color: #282c34;
  border: none;
}

.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
  color: #737984;
}

.cm-s-inner .CodeMirror-cursor {
  border-left: 1px solid #528bff !important;
}

.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.1);
}

.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-color: #bac6e9;
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection {
  background-color: #bac6e9;
}

.cm-s-inner .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0);
}

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.cm-s-inner .CodeMirror-selected,
.cm-s-inner .CodeMirror-selectedtext {
  background-color: #404859 !important;
}

/* code fences color */
.cm-s-inner .cm-keyword {
  color: #c678dd !important;
}

.cm-s-inner .cm-operator {
  color: #56b6c2 !important;
}

.cm-s-inner .cm-variable {
  color: #d19a66 !important;
}

.cm-s-inner .cm-variable-2 {
  color: #e06c75 !important;
}

.cm-s-inner .cm-variable-3 {
  color: #e06c75 !important;
}

.cm-s-inner .cm-builtin {
  color: #e8bf6a !important;
}

.cm-s-inner .cm-atom {
  color: #d19a66 !important;
}

.cm-s-inner .cm-number {
  color: #d19a66 !important;
}

.cm-s-inner .cm-def {
  color: #e06c75 !important;
}

.cm-s-inner .cm-string {
  color: #98c379 !important;
}

.cm-s-inner .cm-string-2 {
  color: #80cbc4 !important;
}

.cm-s-inner .cm-comment {
  color: #629755 !important;
}

.cm-s-inner .cm-tag {
  color: #e06c75 !important;
}

.cm-s-inner .cm-meta {
  color: #e06c75 !important;
}

.cm-s-inner .cm-attribute {
  color: #d19a66 !important;
}

.cm-s-inner .cm-property {
  color: #61afef !important;
}

.cm-s-inner .cm-qualifier {
  color: #decb6b !important;
}

.cm-s-inner .cm-error {
  color: #fff !important;
  background-color: #ec5f67 !important;
}

.cm-s-inner .cm-tag.cm-bracket {
  color: #abb2bf !important;
}

/* scrollbar */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px;
}

/* find dialog */
#typora-quick-open {
  background-color: #fff;
  color: #282c34;
}

#typora-quick-open .typora-quick-open-item.active {
  background-color: #bac6e9 !important;
}

#typora-quick-open .ty-quick-open-category-title {
  border-top: 1px solid #eee !important;
}

/* modal dialog */
#common-dialog .modal-dialog .modal-content {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: #f5f6f7;
  border: none;
  border-radius: 6px;
}

#common-dialog .modal-dialog .modal-content .modal-footer .btn-default:hover {
  background-color: #bac6e9 !important;
}

/* preferences */
.ty-preferences {
  font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #282c34;
}

.ty-preferences .window-header h2 {
  font-size: 1.6rem;
}

.ty-preferences .sidebar {
  font-size: 1.4rem;
}

.ty-preferences .sidebar .nav-group-item.active,
.ty-preferences .sidebar .nav-group-item:active {
  color: #efefef;
  background-color: #2f845e;
}

/* sidebar includes file-tree,articles and outline*/
.html-for-mac #typora-sidebar {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/* focus mode/typewriter mode notification  */
#md-notification {
  background-color: #fff !important;
}

#md-notification #ty-surpress-mode-warning-close-btn:hover {
  background-color: #bac6e9 !important;
}

/* Unibody sidebar */
#megamenu-menu-sidebar {
  color: #282c34;
  font-size: 1rem;
}

#megamenu-menu-sidebar #megamenu-menu-list {
  border-top-color: rgba(171, 192, 208, 0.1);
  background-color: #222526;
}

#megamenu-menu-sidebar #megamenu-menu-list li {
  font-size: 0.8rem;
}

#megamenu-menu-sidebar #megamenu-menu-list li a {
  color: #abc0d0 !important;
}

#megamenu-menu-sidebar #megamenu-menu-list li a.active, #megamenu-menu-sidebar #megamenu-menu-list li a:hover {
  background-color: #3e4249 !important;
}

#megamenu-menu-sidebar #megamenu-menu-list li a#m-saved {
  background-color: transparent !important;
}

.megamenu-opened .megamenu-menu {
  left: 0;
}

#megamenu-content {
  color: #000;
}

/* sidebar */
#typora-sidebar {
  background-color: #fafafa;
  border-right: 1px solid #eee;
}

#typora-sidebar #sidebar-loading-template.file-list-item {
  border-bottom: transparent !important;
  background-color: rgba(171, 192, 208, 0.1);
}

#typora-sidebar .info-panel-tab-wrapper .info-panel-tab:hover {
  color: inherit;
}

#typora-sidebar .info-panel-tab-wrapper .info-panel-tab .info-panel-tab-border {
  background-color: #2f845e;
  border-radius: 4px;
}

#typora-sidebar .sidebar-osx-tab .sidebar-tabs {
  border-bottom-color: transparent;
}

#typora-sidebar #sidebar-content .file-list-item {
  border-bottom: 1px solid #eee;
}

#typora-sidebar #sidebar-content .file-list-item.active {
  background-color: rgba(66, 185, 131, 0.1);
  border-left: 4px solid #2f845e;
}

#typora-sidebar #sidebar-content .ty-sidebar-search-panel {
  border-bottom: 1px solid #eee;
}

#typora-sidebar #sidebar-content .ty-sidebar-search-panel .searchpanel-search-option-btn {
  background-color: #fff;
}

#typora-sidebar #sidebar-content .sidebar-content-content .file-node-content {
  line-height: 1.375rem;
  font-size: 1rem;
  color: #282c34 !important;
}

#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node:not(.file-node-root):hover > .file-node-background {
  border-left: 4px solid #2f845e;
  background-color: rgba(66, 185, 131, 0.1);
}

#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node.active > .file-node-background {
  border-color: #2f845e;
  background-color: rgba(66, 185, 131, 0.1);
}

#typora-sidebar #sidebar-content .sidebar-content-content #file-library-list-children .file-library-file-node:hover {
  border-left: 4px solid #2f845e;
  background-color: rgba(66, 185, 131, 0.1);
}

#typora-sidebar #sidebar-content #outline-content .no-collapse-outline .outline-item {
  line-height: 1.375rem;
  font-size: 1rem;
}

#typora-sidebar #sidebar-content #outline-content .outline-expander:before {
  color: inherit;
  font-size: 14px;
  top: auto;
  content: "\f0da";
  font-family: FontAwesome;
}

#typora-sidebar #sidebar-content #outline-content .outline-expander:hover:before,
#typora-sidebar #sidebar-content #outline-content .outline-item-open > .outline-item > .outline-expander:before {
  content: "\f0d7";
}

#typora-sidebar #sidebar-content #outline-content .outline-item:hover {
  background-color: #bac6e9 !important;
}

#typora-sidebar #ty-sidebar-footer {
  border-top: 1px solid #eee;
}

#typora-sidebar #ty-sidebar-footer .sidebar-footer-item:hover {
  background-color: #bac6e9 !important;
}

#typora-sidebar #ty-sidebar-footer #sidebar-files-menu {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/* dropdown menu */
.dropdown-menu {
  background-color: #fff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-top: 1px solid #eee;
}

.dropdown-menu > .show + .menuitem-group-label.show {
  border-top: 1px solid #eee !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > li > a:hover,
.dropdown-menu .menu-style-btn.active {
  background-color: #bac6e9 !important;
}

.dropdown-menu li a {
  color: #282c34 !important;
}

.dropdown-menu li a:hover {
  background-color: #bac6e9 !important;
}

.dropdown-menu .divider {
  border-color: #fff;
}

/* sidebar-files-menu,toc-dropmenu,suggest common */
#sidebar-files-menu,
#toc-dropmenu,
.auto-suggest-container {
  background-color: #fff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: none;
}

#toc-dropmenu .outline-item:hover {
  background-color: #bac6e9 !important;
}

/* emoji,fences,word suggest */
.auto-suggest-container {
  padding-top: 4px;
  padding-bottom: 4px;
}

.auto-suggest-container li.active, .auto-suggest-container li:hover {
  background-color: #bac6e9 !important;
}

/** source code mode */
#typora-source {
  font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #6a6a6a;
}

#typora-source .cm-s-typora-default .cm-header,
#typora-source .cm-s-typora-default .cm-property,
#typora-source .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
  color: #428bca;
}

#typora-source .cm-s-typora-default .cm-atom,
#typora-source .cm-s-typora-default .cm-number {
  color: #777777;
}

#typora-source .CodeMirror-selectedtext {
  background-color: transparent !important;
}

.typora-node .file-list-item-parent-loc,
.typora-node .file-list-item-time,
.typora-node .file-list-item-summary {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}

dfdsf
  dsfdsf
  dsfdsfdsa
  dsfd
  dsfds
  dsfdsfds
  dsfdscvd

重新格式化java原始碼，將java原始碼的次行塊風格轉換成行尾塊風格
2021-10-08
Java原始碼
Obsidian自定義程式碼塊樣式成Typora
2024-04-10
從此 Typora 程式碼塊有了顏色
2022-03-19
C 語言程式碼風格之 Linux 核心程式碼風格
2021-03-26
Linux
PHPStorm 程式碼格式化風格調整
2020-11-27
PHPORM
統一規範化程式碼的命名風格
2023-05-10
.editorconfig 程式碼風格配置
2019-02-15
Google JavaScript 程式碼風格指南
2018-10-24
GoJavaScript
Vue 前端程式碼風格指南
2021-12-17
Vue前端
FPGA可綜合風格程式碼
2018-04-09
FPGA
程式碼初始化塊
2024-07-13
Typora：一款極簡風格Markdown寫作軟體
2022-05-24
前端程式碼規範 — JavaScript 風格指南
2019-08-22
前端JavaScript
Laravel 保持統一程式碼風格
2020-05-20
Laravel
java程式設計規約----程式碼風格（一）
2019-01-09
Java程式設計
PEP 8 程式程式碼的編寫風格指南
2019-12-24
java中的程式碼塊(初始化塊)
2022-02-19
Java
程式碼風格統一：使用husky, prettier, eslint在程式碼提交時自動格式化，並檢查程式碼。
2018-11-20
EsLint
《碼處高效：Java開發手冊》之程式碼風格
2022-04-10
Java
幽默：把Java寫成Python風格的程式碼
2019-04-11
JavaPython
程式碼風格統一：commitlint & eslint & standard-version
2019-02-16
MITEsLint
求求你規範下你的程式碼風格
2019-01-24
Go 語言程式碼風格規範-指南篇
2022-12-26
Go
Go 語言程式碼風格規範-概述篇
2022-12-26
Go
php-cs-fixer，自動修正程式碼風格
2021-11-26
PHP
如何選擇適合你的程式碼風格？
2021-04-18
03.ElementUI原始碼學習:程式碼風格檢查和格式化配置（ESlint ＆ Prettier）
2021-04-17
UI原始碼EsLint
Vue專案使用eslint + prettier規範程式碼風格
2018-08-19
VueEsLint
擴充套件01：程式碼風格/python規範style
2024-12-05
套件Python
JavaScript編碼風格指南
2019-02-24
JavaScript
JavaScript 編碼風格指南
2018-07-24
JavaScript
編碼風格：Mvc模式下SSM環境，程式碼分層管理
2020-11-09
MVC模式SSM
程式碼塊
2024-09-10
Typora for Mac(文字編輯器)
2022-09-04
Mac
使用ESLint+Prettier來統一前端程式碼風格
2018-06-18
EsLint前端
aardio教程五) 寫Python風格的aardio程式碼(字串篇)
2024-04-07
Python字串
PyCharm關於修改程式碼的風格及樣式
2018-04-18
PyCharm
部落格美化&typora編寫部落格攻略（部落格園版）
2020-10-13

Typora 程式碼塊Mac風格化

Typora 程式碼塊Mac風格化

1 按照以下步驟開啟資料夾，在該資料夾裡建立mo.css檔案

2 在mo.css檔案複製以下程式碼全部替換

相關文章