Typora 自定义格式：引用、行内代码块、图象加边框

原创已于 2022-02-24 08:39:47 修改 · 4.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-02-19 12:54:06 首次发布

工具方法等专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过修改CSS来定制Typora和Github的主题。主要步骤包括开启调试模式，编辑全局与用户级别的github.css，以及base-control.css。重点讲述了如何调整代码块、引用和图片的样式，如改变blockquote的颜色和边距，code标签的字体颜色，以及img标签添加边框。通过这些修改，可以提升阅读体验并个性化你的Markdown文档。

1、效果图

以修改 Github主题为例

在这里插入图片描述

2、操作原理

Typora 底层其实也是html，css；找到对应的css，修改即可

css 有两个级别的；一个是全局的，一个是用户级别的

在这里插入图片描述

开启调试模式

在这里插入图片描述

3、引用格式

在这里插入图片描述

修改用户级和全局级CSS：github.css；最好两个地方都修改（全局和用户）

找到 blockquote 标签，如下图修改；保存即可

在这里插入图片描述

blockquote {
    color: #777777;
    display: block;
    padding: 16px;
    margin: 0 0 24px;
    border-left: 4px solid #5ade70;
    background: #eef0f4;
    overflow: auto;
    word-break: break-word!important;
}