Change typora to Microsoft Yahei+Consolas

foreword

typora is a very convenient editor for writing markdown text. Official website: https://www.typora.io/

For font obsessive-compulsive patients, it is quite uncomfortable not to change the font to Microsoft Yahei + Consolas. This article teaches you a simple and rude method to modify the typora font.

My environment: win10 + typora 0.9.48

For the master one sentence summary, just modify the following two files.

C:\Users\sheng7k\AppData\Roaming\Typora\conf\conf.user.json
C:\Users\sheng7k\AppData\Roaming\Typora\themes\github.css

can not read it? That's right, the following content is dedicated to Xiaobai.

step

Open the Typora software and select Github as the theme.

File >> Preferences >> Open Theme Folder

Next, we only need to modify this key github.cssfile. It is very simple to modify this with front-end development experience. Of course, it doesn't matter.

In order to ensure safety, it is strongly recommended that you github.cssback up a copy of the file and store it elsewhere, and then open the github.csstext file to start modifying (it is best to open it with a professional text editor, of course, Notepad is not a big problem.) If you are familiar with CSS code, you can see it at a glance. Understand, if you are not familiar with it, first observe the code, you can find that it is basically in the form of a pair of curly brackets on the name, first ignore all @symbols at the beginning, and then change all the lines with font-familythis line tofont-family: Consolas,"Microsoft Yahei",Arial,sans-serif;

Explain this line of code, it font-familymeans that the font is controlled here, a comma represents a font, here we wrote 4 fonts, the last two fonts are not important, you can delete them. What we mean by this sentence is to encounter a font. If it is in English Consolas, because it is in the front, if it is in Chinese, use the Microsoft Yahei(Microsoft Yahei) font, Consolaswhich does not include Chinese fonts.

Pure Xiaobai (not in the Internet industry, I can't understand it at all, what should I do?)

It's very simple, modifying the font and other styles is to modify the github.cssfile. The following is the content of the file after my modification github.css. If your version of Typora is the same as mine, you can copy and paste it completely to change your own github.cssfile. Of course, it is best to compare it yourself. , what's the difference between mine and mine.

/* C:\Users\sheng7k\AppData\Roaming\Typora\themes\github.css */
:root {
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
}

@include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Regular'),url('./github/400.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: normal;
    src: local('Open Sans Italic'),url('./github/400i.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: bold;
    src: local('Open Sans Bold'),url('./github/700.woff') format('woff')
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: bold;
    src: local('Open Sans Bold Italic'),url('./github/700i.woff') format('woff')
}

html {
    font-size: 16px;
}

body {
    font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

#write{
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 40px 30px;
    padding-top: 20px;
    padding-bottom: 100px;
}
#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: #4183C4;
}
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 {
    /*background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;*/
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    padding-bottom: .3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
   padding-bottom: .3em;
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}
h3 {
    font-size: 1.5em;
    line-height: 1.43;
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table{
    margin: 0.8em 0;
}
li>ol,
li>ul {
    margin: 0 0;
}
hr {
    height: 4px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
    border-bottom: 1px solid #ddd;
}

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: 4px solid #dddddd;
    padding: 0 15px;
    color: #777777;
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #cccccc;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n) {
    background-color: #f8f8f8;
}
table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #cccccc;
    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;
}

.CodeMirror-gutters {
    border-right: 1px solid #ddd;
}

.md-fences,
code,
tt {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 0.2em 1em;
    padding-top: 8px;
    padding-bottom: 6px;
}

.md-task-list-item > input {
  margin-left: -1.3em;
}

@media screen and (min-width: 914px) {
    /*body {
        width: 854px;
        margin: 0 auto;
    }*/
}
@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

.md-fences {
    background-color: #f8f8f8;
}
#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: 1px solid #ddd;*/
    border-radius: 3px;
    font-family: Consolas,"Microsoft Yahei",Arial,sans-serif;
    padding: 2px 0px 0px 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: Consolas,"Microsoft Yahei",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: #fafafa;
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

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

Note that with this simple solution, customize the typora style. If the typora software version is updated, the style will be replaced and invalidated, so pay attention to backup.

Source mode font modification

After a wave of tossing, I found that in the typora source code mode, the font still could not be modified. What's going on, don't worry.

File >> Preferences >> Open Advanced Settings, which will bring you to the following file directory.

People who understand JSON may understand it at a glance. It doesn’t matter if they don’t understand. The English is better. , the conf.user.jsondisplay is the user configuration file, and the other is the default configuration file. In the initial state, the content of the two is the same. Now we modify the conf.user.jsoncontent as follows

/* C:\Users\sheng7k\AppData\Roaming\Typora\conf\conf.user.json */
/** For advanced users. */
{
  "defaultFontFamily": {
    "standard": "Microsoft Yahei", //String - Defaults to "Times New Roman".
    "serif": "Microsoft Yahei", // String - Defaults to "Times New Roman".
    "sansSerif": "Consolas", // String - Defaults to "Arial".
    "monospace": "Consolas" // String - Defaults to "Courier New".
  },
  "autoHideMenuBar": false, //Boolean - Auto hide the menu bar unless the `Alt` key is pressed. Default is false.

  // Array - Search Service user can access from context menu after a range of text is selected. Each item is formatted as [caption, url]
  "searchService": [
    ["Search with Google", "https://google.com/search?q=%s"]
  ],

  // Custom key binding, which will override the default ones.
  "keyBinding": {
    // for example: 
    // "Always on Top": "Ctrl+Shift+P"
  },

  "monocolorEmoji": false, //default false. Only work for Windows
  "autoSaveTimer" : 3, // Deprecidated, Typora will do auto save automatically. default 3 minutes
  "maxFetchCountOnFileList": 500
}

OK, so it can be ensured that our Typora, the Chinese font is always Microsoft Yahei, and the English font is always Consolas, whether in source mode or preview mode.

Reference link

How to write a theme http://theme.typora.io/doc/Write-Custom-Theme/

How to install a theme http://theme.typora.io/doc/Install-Theme/