自定义Typora样式，需要前置知识，css，html

心已赠人 2022-12-12 01:55 137阅读 0赞

**[Typora官网相关内容][Typora]**  
**[Typora Add-Custom-CSS][]**

1.  打开开发者工具  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center]
2.  确定当前是哪个主题（我这里是Pixyll）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 1]
3.  打开当前主题的css文件  
    文件-》偏好设置-》外观-》打开主题文件夹  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 2]
4.  打开自己主题的对应css文件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 3]
5.  回到typora，点击开发者工具的选择功能。  
    找到这个标签的相关样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 4]  
    比如我这里要给一个code强调部分修改样式，将原来的绿色改成其他颜色（先在开发者工具改，然后觉得可以了，再去css文件改）。  
    这个红框圈住的就是相关css的样式（对于其他的样式可能一下找不到，就多试几次）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 5]

**效果：**  
![在这里插入图片描述][20201025100630939.png_pic_center]

1.  修改之前打开的css文件(后续会提到避免修改失效的问题，这里先这样做)：从开发者工具复制修改的样式代码到css文件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 6]
2.  保存文件，重启 typora，第一步 ok。
3.  不过不做后续步骤，但当前主题更新，或者有时电脑重启后，就会出现 自己设置的主题消失。  
    所以在主机文件夹下，新建一个文件叫`{current-theme}.user.css` 。比如

![在这里插入图片描述][20201020112308837.png_pic_center]  
将自定义的内容粘贴到这里:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 7]  
9. 重启 typora-> ok

[Typora]: http://support.typora.io/
[Typora Add-Custom-CSS]: http://support.typora.io/Add-Custom-CSS/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0d451aceb05e41a4bed291e68cc646fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/653fda8a470945c1914c95ba428d7511.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/97d2ad34683e4dbe9aac435b4457b91a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5abe02a54eac4edba8a0ba9f5335c73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/f0ad0e0cc93f46bbbd4d5473d22a07ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/d1771d491ae04614ac83015cbb26492d.png
[20201025100630939.png_pic_center]: /images/20221123/7eb21a884d51433a8da4db51163d696f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/03e5b160f44545249327511d555ce1ab.png
[20201020112308837.png_pic_center]: /images/20221123/9c0e45284f7843fda6b811b7294f2494.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzQwNjAx_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/ac90dda802ac44d29bed18d301275e2d.png