Typora is first and foremost a browser,
When we check to enable the debug mode in typora’s settings,
we will have the option of “inspect element” when we right click in typora
First right-click----"inspect element
change normal font color
About Typora modified style
Is the style of the cracked version of Typora too monotonous? Want to make your notes more readable?
1. Open the theme folder
File → Preferences (ctrl + comma)
Appearance → Open Themes folder
2. Select the corresponding .css file◼
Find the .css file corresponding to the theme of your Typora application and open it
◼ It can be opened with software such as vscode, and those without it can be opened with the simplest notepad
As follows, I use the github theme, open github.css
3. Modify style
(1) How to find the element you want to modify?
◼ Turn on debug mode in preferences
◼ Open the developer tools
Shortcut key shift + F12
or
Right click → inspect element
or
View → Developer Tools
◼ Select the modified element
(2) Debug◼
Debug in the following style: Facing the display interface on the left, directly add the style you want according to your personal preference (css foundation is required)
◼ After debugging to satisfaction, copy the code
(3) Add style
◼ Add style to the last line of code: Paste the code copied in (2)
◼ It is best not to modify the original style directly, add your own style at the end of the style sheet
Here are some styles I modified myself:
code show as below:
/* 添加样式 */
blockquote {
border-left: 6px solid #1d6918;
line-height: 30px;
padding: 0 15px;
color: #999;
}
hr{
background-color: #7eb2dc;
margin:30px 0;
}
mark{
color:#1e53e8;
font-weight: bold;
background-color: white;
}
strong{
color:#ec1f1f;
}
The renderings are as follows:
4. Appendix
◼ Some elements may not be styled in the theme's .css file
You can hover the mouse over it to find the path of the .css file
Remember to restart the typora software after modification