typora主題中如何引用其他自定義樣式

​ 最近開始用typora進行編輯自己學習的一些筆記,但是主題樣式不太喜歡,於是直接從網上搜索了一個默認的github.css上的樣式文件,主要是代碼塊背景顏色是黑色的我比較喜歡,直接拿來使用,廢話不多說,直接亮操作步驟.

搜索typora的樣式文件

​ 本人是直接從網上搜索的資源文件,直接拿來使用的,github.css樣式文件中的內容如下:

:root {
    background: #f9f9f9;
    --side-bar-bg-color: #fff;
    --control-text-color: #666;
    --code-block-bg-color: yellow !important;
}

html {
    font-size: 14px;
}

body {
    margin: 0;
    color: rgba(0, 0, 0, 0.9);
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum"
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 100px;
    background: #fff;
    /* box-shadow: 0px 20px 10px #ccc; */
}

#write p {
    line-height: 1.5rem;
    word-spacing: 0.05rem;
}

#write ol li {
    text-indent: 0.5rem;
}

#write>ul:first-child,
#write>ol:first-child {
    margin-top: 30px;
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}

a { color: #42b983; font-weight: 600; padding: 0 2px; text-decoration: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 tt,
h2 tt,
h3 tt,
h4 tt,
h5 tt,
h6 tt,
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
    font-size: inherit !important;
}

h2 a,
h3 a {
    color: #34495e;
}

h1 { font-size: 2.2rem; line-height: 1.3; padding-bottom: 0.4rem; }
h2 { font-size: 1.75rem; line-height: 1.225; margin: 35px 0 15px; padding-bottom: 0.5em; border-bottom: 1px solid #ddd; }
h3 { font-size: 1.4rem; line-height: 1.43; margin: 20px 0 7px; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; color: #777; }

p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}

li>ol,
li>ul {
    margin: 0 0;
}

hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body>h3:first-child,
body>h4:first-child,
body>h5:first-child,
body>h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

li p.first {
    display: inline-block;
}

ul,
ol {
    padding-left: 30px;
}

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

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

blockquote {
    border-left: 5px solid #e6e6e6;
    padding: 10px 15px;
    color: #666;
    background-color: #fafafa;
}

table {
    padding: 0;
    word-break: initial;
}

table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

table tr:nth-child(2n),
thead {
    background-color: #fafafa;
}

table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

#write strong {
    padding: 0 1px;
}

#write em {
    padding: 0 5px 0 2px;
}

#write table thead th {
    background-color: #f2f2f2;
}

#write .CodeMirror-gutters {
    border-right: none;
}

/* 代碼塊框 */
#write .md-fences {
    -webkit-font-smoothing: initial;
    margin: 0.8rem 0 !important;
    /* padding: 0.5rem 0 !important; */
    padding: 0.5rem 13px !important;
    line-height: 1.43rem;
    background-color: #2d2d2d !important;
    border-radius: 3px;
    font-family: Consolas, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.95rem;
    word-wrap: normal;
    color: #999;
}


/* 代碼塊 */
#write .CodeMirror-wrap .CodeMirror-code pre {
    /* padding-left: 13px; */
    color: #999;
    /* font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; */
    font-family: Consolas, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
}


/* 打印塊 */
#write code,
tt {
    margin: 0 2px;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 14px;
    color: #e96900;
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#write .md-footnote {
    background-color: #f8f8f8;
    color: #e96900;
}


/* heighlight 高亮部分 */

#write mark {
    background-color: #EBFFEB;
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
    color: #222;
    font-weight: 500;
}

#write del {
    padding: 1px 2px;
}

/* 光標 */
.cm-s-inner .CodeMirror-cursor { border-left: 1px solid #00FF00 !important; }

/* 鏈接 */
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: #22a2c9; }


/* HTML標簽 */
.cm-s-inner .cm-tag { color: #e2777a; }

/* HTML標簽屬性 */
.cm-s-inner .cm-attribute { color: #e2777a; }


/* CSS變量 */
.cm-s-inner .cm-variable-3 { color: #eee; }

/* CSS 屬性 */
.cm-s-inner .cm-property { color: #f8c555; }

/* CSS選擇器 */
.cm-s-inner .cm-qualifier { color: #cc99cd !important; }


/* 代碼塊里面JS字體 */
.cm-s-inner .cm-variable { color: #eee; }

/* JS變量 */
.cm-s-inner .cm-variable-2 { color: #eee; }

/* JS字符串 */
.cm-s-inner .cm-string { color: #7ec699; }

/* .cm-s-inner .cm-string-2 { color: yellow !important; } */

/* JS數字 */
.cm-s-inner .cm-number { color: #f08d49; }

/* JS保留字, JS聲明的變量名、方法名 */
.cm-s-inner .cm-def { color: #eee; }

/* JS屬性, 對象屬性、log */
.cm-s-inner .cm-property { color:#f08d49; }

/* JS關鍵詞, 如function、var、let、const、return */
.cm-s-inner .cm-keyword { color: #cc99cd; }

/* JS關鍵字 比如：true、false、null、undefined、NaN */
.cm-s-inner .cm-atom { color: #cc99cd; }

/* JS運算符 */
.cm-s-inner .cm-operator { color: #67cdcc; }

/* JS關鍵字，如ES6 (...)擴展運算符 */
.cm-s-inner .cm-meta { color: #67cdcc; }

/* JS注釋 */
.cm-s-inner .cm-comment { color: #999; }



/* window保留字, 如console */
.cm-s-inner .cm-variable { color: #eee; }

/* 暫時未知 */
.cm-s-inner .cm-builtin { color: pink !important; }


/* HTML錯誤提示 */
/* .cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1.0);
    background-color: #EC5F67;
} */


/* 系統命令行命令關鍵字 0*/
.cm-s-inner .cm-builtin { color: #BA55D3 !important; }

.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;
}
/* 代碼塊右下角選擇語言區域 */
.md-fences .code-tooltip {
  color: #eee;
}

/* 代碼塊選中文字背景 */

/* .cm-s-inner div.CodeMirror-selected { background-color: #1099ff !important; } */

/* .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { background-color: #1099ff; } */

#write pre.md-meta-block {
    padding: 1rem;
    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: .375rem;
}

#write>h3.md-focus:before {
    left: -1.5625rem;
    top: .375rem;
}

#write>h4.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write>h5.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write>h6.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

.md-image>.md-meta {
    border-radius: 3px;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: inherit;
}

.md-toc {
    margin-top: 20px;
    padding-bottom: 20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}


/** focus mode */

.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}


/* 側邊欄 */
header,
.context-menu,
.megamenu-content,
footer {
    font-family: "Segoe UI", "Arial", sans-serif;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}

將樣式引入到typora中

首先打開typora,點擊"文件"--->"偏好設置",選擇"外觀",點擊打開主題文件夾

里面有個github.css樣式文件,將上面的內容覆蓋進去即可

關閉typora,重新打開,ok,完活兒

注意事項

​ 最后和大家說下,找本地的typora下的樣式文件的時候,一定要通過"偏好設置"的方式找到,一開始我是通過電腦桌面上的typora軟件圖標右鍵"打開文件位置"的方式,找到了github.css這個文件的,可是當我把css樣式代碼覆蓋之后,一點兒效果都沒有,最終的原因是,我打開的是typora的程序所屬路徑,在D盤中,而樣式生效的文件在C盤中(也就是通過"偏好設置"找到的樣式文件位置).