├── LICENSE ├── README.md ├── README_CN.md ├── Xnip2021-03-22_11-38-56.jpg └── orangeheartmonokai.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 王洁玉 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # typora-theme-orange-heart-monokai 2 | 3 | [English | [中文](README_CN.md)] 4 | 5 | ## 1 Introduce 6 | 7 | > The style is based on markdown-nice's [orange heart](https://preview.mdnice.com/themes/id/1) theme, the author is [zhning12](https://github.com/zhning12). 8 | > 9 | > and the code box style is based on typora's [typora-theme-pie](https://github.com/kevinzhao2233/typora-theme-pie) theme, the author is [kevinzhao2233](https://github.com/kevinzhao2233). 10 | 11 | This style comes from the idea of using [markdown-nice ](https://github.com/mdnice/markdown-nice)to process Markdown styles and want to use them on Typora. At present, the general style is the same and can be used normally. 12 | 13 | ## 2 Install 14 | 15 | ① `Typora` Software：File->Perferences...(->Appearance)->Themes->Open Theme Folder. 16 | 17 | ② Copy and paste the `orangeheartmonokai.css` file into the Typora theme folder. 18 | 19 | ③ restart the software. 20 | 21 | ## 3 Screenshot 22 | 23 | ![typora_theme_orange_heart](Xnip2021-03-22_11-38-56.jpg) 24 | 25 | ## 4 Other 26 | 27 | - [Typora Theme](http://theme.typora.io/) 28 | 29 | MIT @ jared 30 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 | # typora-theme-orange-heart-monokai 2 | 3 | [[English](README.md) | 中文] 4 | 5 | ## 1 介绍 6 | 7 | > 样式基于 `markdown-nice` 的[橙心](https://preview.mdnice.com/themes/id/1)主题修改，作者为 [zhning12](https://github.com/zhning12)； 8 | > 9 | > 代码框样式基于 `typora` 的 [typora-theme-pie](https://github.com/kevinzhao2233/typora-theme-pie) 主题修改，作者为 [kevinzhao2233](https://github.com/kevinzhao2233)。 10 | 11 | 这份样式源自使用 [markdown-nice](https://github.com/mdnice/markdown-nice) 处理 `Markdown` 样式时，想在 `Typora` 上使用的想法。目前大体样式已相同，可正常使用。 12 | 13 | ## 2 安装 14 | 15 | ① `Typora` 软件：文件->偏好设置(->外观)->主题->打开主题文件夹； 16 | 17 | ② 将 `orangeheartmonokai.css` 文件复制粘贴至 `Typora` 主题文件夹； 18 | 19 | ③ 重启软件。 20 | 21 | ## 3 截图 22 | 23 | ![typora_theme_orange_heart](Xnip2021-03-22_11-38-56.jpg) 24 | 25 | ## 4 其他 26 | 27 | - [Typora 主题](http://theme.typora.io/) 28 | 29 | MIT @ jared 30 | -------------------------------------------------------------------------------- /Xnip2021-03-22_11-38-56.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joriewong/typora-theme-orange-heart-monokai/669fd174ee8100701618c53cf0cae003a03e9674/Xnip2021-03-22_11-38-56.jpg -------------------------------------------------------------------------------- /orangeheartmonokai.css: -------------------------------------------------------------------------------- 1 | /* @media (prefers-color-scheme: no-preference) { */ 2 | /* 全局属性 */ 3 | #write { 4 | max-width: 860px; 5 | font-size: 16px; 6 | color: black; 7 | padding: 0 10px; 8 | line-height: 1.6; 9 | word-spacing: 0px; 10 | letter-spacing: 0px; 11 | word-break: break-word; 12 | word-wrap: break-word; 13 | text-align: left; 14 | font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 15 | "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif; 16 | } 17 | 18 | /* 段落 */ 19 | #write p { 20 | font-size: 16px; 21 | padding-top: 8px; 22 | padding-bottom: 8px; 23 | margin: 0; 24 | line-height: 26px; 25 | color: black; 26 | } 27 | 28 | /* 标题 */ 29 | #write h1, 30 | #write h2, 31 | #write h3, 32 | #write h4, 33 | #write h5, 34 | #write h6 { 35 | margin-top: 30px; 36 | margin-bottom: 15px; 37 | padding: 0px; 38 | font-weight: bold; 39 | color: black; 40 | } 41 | #write h1 { 42 | font-size: 1.5rem; 43 | } 44 | #write h2 { 45 | font-size: 1.3rem; 46 | border-bottom: 2px solid rgb(239, 112, 96); 47 | } 48 | #write h2 span { 49 | display: inline-block; 50 | font-weight: bold; 51 | background: rgb(239, 112, 96); 52 | color: #ffffff; 53 | padding: 3px 10px 1px; 54 | border-top-right-radius: 3px; 55 | border-top-left-radius: 3px; 56 | margin-right: 3px; 57 | } 58 | #write h2:after { 59 | display: inline-block; 60 | content: ""; 61 | vertical-align: bottom; 62 | border-bottom: 36px solid #efebe9; 63 | border-right: 20px solid transparent; 64 | } 65 | #write h3 { 66 | font-size: 1.2rem; 67 | } 68 | #write h4 { 69 | font-size: 1.1rem; 70 | } 71 | #write h5 { 72 | font-size: 1rem; 73 | } 74 | #write h6 { 75 | font-size: 1rem; 76 | } 77 | 78 | /* 列表 */ 79 | #write ul, 80 | #write ol { 81 | margin-top: 8px; 82 | margin-bottom: 8px; 83 | padding-left: 25px; 84 | color: black; 85 | } 86 | #write ul { 87 | list-style-type: disc; 88 | } 89 | #write ul ul { 90 | list-style-type: square; 91 | } 92 | #write ol { 93 | list-style-type: decimal; 94 | } 95 | #write li section { 96 | margin-top: 5px; 97 | margin-bottom: 5px; 98 | line-height: 26px; 99 | text-align: left; 100 | color: rgb(1, 1, 1); /* 只要是纯黑色微信编辑器就会把color这个属性吞掉。。。*/ 101 | font-weight: 500; 102 | } 103 | 104 | /* 引用 */ 105 | #write blockquote { 106 | display: block; 107 | font-size: 0.9em; 108 | overflow: auto; 109 | overflow-scrolling: touch; 110 | border-left: 3px solid rgb(239, 112, 96); 111 | color: #6a737d; 112 | padding: 10px 10px 10px 20px; 113 | margin-bottom: 20px; 114 | margin-top: 20px; 115 | background: #fff9f9; 116 | } 117 | #write blockquote p { 118 | margin: 0px; 119 | color: black; 120 | line-height: 26px; 121 | } 122 | 123 | /* 链接 */ 124 | #write a { 125 | text-decoration: none; 126 | word-wrap: break-word; 127 | font-weight: bold; 128 | border-bottom: 1px solid #1e6bb8; 129 | color: rgb(239, 112, 96); 130 | border-bottom: 1px solid rgb(239, 112, 96); 131 | } 132 | 133 | /* 行内代码 */ 134 | #write p code, 135 | #write li code { 136 | font-size: 14px; 137 | word-wrap: break-word; 138 | padding: 2px 4px; 139 | border-radius: 4px; 140 | margin: 0 2px; 141 | color: rgb(239, 112, 96); 142 | background-color: rgba(27, 31, 35, 0.05); 143 | font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; 144 | word-break: break-all; 145 | } 146 | 147 | /* 图片 */ 148 | #write img { 149 | display: block; 150 | margin: 0 auto; 151 | max-width: 100%; 152 | } 153 | 154 | /* 表格 */ 155 | #write table { 156 | display: table; 157 | text-align: left; 158 | } 159 | #write tbody { 160 | border: 0; 161 | } 162 | #write table tr { 163 | border: 0; 164 | border-top: 1px solid #ccc; 165 | background-color: white; 166 | } 167 | #write table tr:nth-child(2n) { 168 | background-color: #f8f8f8; 169 | } 170 | #write table tr th, 171 | #write table tr td { 172 | font-size: 16px; 173 | border: 1px solid #ccc; 174 | padding: 5px 10px; 175 | text-align: left; 176 | } 177 | #write table tr th { 178 | font-weight: bold; 179 | background-color: #f0f0f0; 180 | } 181 | 182 | /* 行内代码 */ 183 | #write span code, 184 | #write li code { 185 | color: rgb(239, 112, 96); 186 | } 187 | 188 | /* 脚注上标 */ 189 | #write .md-footnote { 190 | font-weight: bold; 191 | color: rgb(239, 112, 96); 192 | } 193 | #write .md-footnote > .md-text:before { 194 | content: "["; 195 | } 196 | #write .md-footnote > .md-text:after { 197 | content: "]"; 198 | } 199 | 200 | /* 脚注 */ 201 | #write .md-def-name { 202 | padding-right: 1.8ch; 203 | } 204 | #write .md-def-name:before { 205 | content: "["; 206 | color: #000; 207 | } 208 | #write .md-def-name:after { 209 | color: #000; 210 | } 211 | 212 | @media (prefers-color-scheme: dark) { 213 | #write h2 { 214 | border-bottom: 2px solid #014fe0; 215 | } 216 | #write h2 span { 217 | background: #014fe0; 218 | } 219 | /* 引用 */ 220 | #write blockquote { 221 | border-left: 3px solid #014fe0; 222 | } 223 | /* 链接 */ 224 | #write a { 225 | color: #014fe0; 226 | border-bottom: 1px solid #014fe0; 227 | } 228 | /* 行内代码 */ 229 | #write p code, 230 | #write li code { 231 | color: #014fe0; 232 | } 233 | /* 行内代码 */ 234 | #write span code, 235 | #write li code { 236 | color: #014fe0; 237 | } 238 | /* 脚注上标 */ 239 | #write .md-footnote { 240 | color: #014fe0; 241 | } 242 | } 243 | 244 | /* 代码块主题 */ 245 | /* Based on Sublime Text's Monokai theme */ 246 | .cm-s-inner.CodeMirror { 247 | background: #272822; 248 | color: #f8f8f2; 249 | font-size: 1.3rem; 250 | } 251 | .cm-s-inner div.CodeMirror-selected { 252 | background: #49483e; 253 | } 254 | .cm-s-inner .CodeMirror-line::selection, 255 | .cm-s-inner .CodeMirror-line > span::selection, 256 | .cm-s-inner .CodeMirror-line > span > span::selection { 257 | background: rgba(73, 72, 62, 0.99); 258 | } 259 | .cm-s-inner .CodeMirror-line::-moz-selection, 260 | .cm-s-inner .CodeMirror-line > span::-moz-selection, 261 | .cm-s-inner .CodeMirror-line > span > span::-moz-selection { 262 | background: rgba(73, 72, 62, 0.99); 263 | } 264 | .cm-s-inner .CodeMirror-gutters { 265 | background: #272822; 266 | border-right: 0px; 267 | } 268 | .cm-s-inner .CodeMirror-guttermarker { 269 | color: white; 270 | } 271 | .cm-s-inner .CodeMirror-guttermarker-subtle { 272 | color: #d0d0d0; 273 | } 274 | .cm-s-inner .CodeMirror-linenumber { 275 | color: #d0d0d0; 276 | } 277 | .cm-s-inner .CodeMirror-cursor { 278 | border-left: 1px solid #f8f8f0 !important; 279 | } 280 | 281 | .cm-s-inner span.cm-comment { 282 | color: #75715e; 283 | } 284 | .cm-s-inner span.cm-atom { 285 | color: #ae81ff; 286 | } 287 | .cm-s-inner span.cm-number { 288 | color: #ae81ff; 289 | } 290 | 291 | .cm-s-inner span.cm-property, 292 | .cm-s-inner span.cm-attribute { 293 | color: #a6e22e; 294 | } 295 | .cm-s-inner span.cm-keyword { 296 | color: #f92672; 297 | } 298 | .cm-s-inner span.cm-builtin { 299 | color: #66d9ef; 300 | } 301 | .cm-s-inner span.cm-string { 302 | color: #e6db74; 303 | } 304 | 305 | .cm-s-inner span.cm-variable { 306 | color: #f8f8f2; 307 | } 308 | .cm-s-inner span.cm-variable-2 { 309 | color: #9effff; 310 | } 311 | .cm-s-inner span.cm-variable-3 { 312 | color: #66d9ef; 313 | } 314 | .cm-s-inner span.cm-def { 315 | color: #fd971f; 316 | } 317 | .cm-s-inner span.cm-bracket { 318 | color: #f8f8f2; 319 | } 320 | .cm-s-inner span.cm-tag { 321 | color: #f92672; 322 | } 323 | .cm-s-inner span.cm-header { 324 | color: #ae81ff; 325 | } 326 | .cm-s-inner span.cm-link { 327 | color: #ae81ff; 328 | } 329 | .cm-s-inner span.cm-error { 330 | background: #f92672; 331 | color: #f8f8f0; 332 | } 333 | 334 | .cm-s-inner .CodeMirror-activeline-background { 335 | background: #373831; 336 | } 337 | .cm-s-inner .CodeMirror-matchingbracket { 338 | text-decoration: underline; 339 | color: white !important; 340 | } 341 | 342 | /* apply to code fences with plan text */ 343 | .md-fences { 344 | background-color: #272822; 345 | color: #f8f8f2; 346 | border: none; 347 | } 348 | 349 | .md-fences .code-tooltip { 350 | background-color: #272822; 351 | } 352 | --------------------------------------------------------------------------------