Typora自定义主题样式

最新推荐文章于 2025-04-18 14:05:33 发布
最新推荐文章于 2025-04-18 14:05:33 发布
阅读量2.5k 收藏 34
点赞数 11
分类专栏： 开发工具
川哥出品，必属精品。 域名： chcsvip.blog.youkuaiyun.com
本文链接：https://blog.youkuaiyun.com/ShiShiLunHui/article/details/118751544
版权
本文详细介绍了如何在Typora中自定义主题，包括打开和切换主题、全局文本设置、标题样式、代码文本样式、表格样式以及其他设置。通过修改CSS文件，你可以调整字体大小、页面宽度、标题层级的颜色和背景、代码块样式、表格样式等，以创建个性化编辑体验。记得修改后重启Typora以使主题生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Typora自定义主题样式




  • 打开主题
  • 全局文本
  • 标题标签
  • 代码文本
  • 表格标签
  • 其他设置




第一章 打开主题

1、操作步骤

打开已安装的主题文件夹
在这里插入图片描述

下面保留的是目前我使用的主题样式 github.css 样式

在这里插入图片描述

下面展示出来的 github-copy01.css 这里是我们复制上面的 github.css 之后，展示出来的效果。




2、切换主题

在菜单栏当中，选择主题，就可以进行主题的切换操作，这里使用的是 GitHub Copy01 这个主题

在这里插入图片描述

注意事项：

  1. 我们编写的主题文件的名称是 git-copy01.css

  2. 如果切换到主题菜单下面，则会变成 Github Copy01

主要的变化点，有以下几点：

  1. 每个单词首字母自动变成大写
  2. 去掉了中间的 - 变成了空格
  3. 主题如果修改之后，需要重启 Typora 软件才能生效







第二章 全局文本

1、整体页面字体大小

/* 
    寻找方式: 
        建议在 css 文件当中，搜索前面的 html 
    基础设置：
        1. 设置全局字体信息   font-size: 18px;  
*/
html {
    font-size: 18px;  
}




2、整体页面内容宽度

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的 #write  
    基础设置：
        1. 设置全局宽度大小    max-width: 98%;
        2. 设置背景颜色       background-color: #FFFFFF;
    备注：
        下面的 @media 主要是设置在不同分辨率下面展示的效果
*/

#write {
    max-width: 98%;
    background-color: #FFFFFF;
  	margin: 0 auto;
  	padding: 30px;
    padding-bottom: 100px;
}

@media only screen and (min-width: 1400px) {
	#write {
		max-width: 98%;
        background-color: #FFFFFF;
	}
}

@media only screen and (min-width: 1800px) {
	#write {
		max-width: 98%;
        background-color: #FFFFFF;
	}
}







第三章 标题标签

1、一级标题

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  h1  
        可以删除掉其他的 h1 标签的设置，整个css页面当中，只需要保留一个 h1 标签
    基础设置：
        1. 设置文字居中展示   text-align: center;
        2. 设置文字字体大小   font-size: 3.5rem;
        3. 设置文字字体颜色   color: #FF0000;
        4. 设置文字阴影效果   text-shadow: 0 0 5px rgb(148, 236, 7);
        5. 设置文字边框阴影   box-shadow: 0 15px 10px -15px rgb(226, 159, 14); 
*/
h1 {
    text-align: center;
    font-size: 3.5rem;
    color: #FF0000;
    text-shadow: 0 0 5px rgb(148, 236, 7);
    box-shadow: 0 15px 10px -15px rgb(226, 159, 14);
}




效果图

在这里插入图片描述



2、二级标题

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  h2  
    基础设置： 
        1. 设置文字字体大小   font-size: 3rem;
        2. 设置文字字体颜色   color: #0000FF;
        3. 设置标题背景颜色   background-color: #ff99009d;
        4. 设置文字内边距大小           padding: 3px;
        5. 单独设置文字靠左内边距       padding-left: 10px;
        6. 设置文字的边框是圆角弧度     border-radius: 3px;
*/
h2{
    font-size: 3rem;
    color: #0000FF;
    background-color: #ff99009d;
    padding: 3px;
    padding-left: 10px;
    border-radius: 3px;
}

效果图

在这里插入图片描述




3、三级标题

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  h3  
    基础设置： 
        1. 设置文字字体大小   font-size: 2rem;
        2. 设置文字字体颜色   color: #e618b9e8;
        3. 设置标题背景颜色   background-color: #9dff009d;
        4. 设置文字内边距大小           padding: 3px;
        5. 单独设置文字靠左内边距       padding-left: 10px;
        6. 设置文字的边框是圆角弧度     border-radius: 3px;
*/
h3 {
    font-size: 2rem;
    color: #e618b9e8;
    background-color: #9dff009d;
    padding: 3px;
    padding-left: 10px;
    border-radius: 3px;
}

效果图

在这里插入图片描述




4、四级标题

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  h4  
    基础设置： 
        1. 设置文字字体大小   font-size: 1.6rem;
        2. 设置文字字体颜色   color: #3e18e6bd; 
        3. 设置文字内边距大小           padding: 3px;
        4. 单独设置文字靠左内边距       padding-left: 10px;
        5. 设置文字的边框是圆角弧度     border-radius: 3px;
        6. 设置下边框的线条样式         border-bottom: 1px dashed #182de973;
*/
h4 {
    font-size: 1.6rem;
    color: #3e18e6bd;
    padding: 3px;
    padding-left: 10px;
    border-radius: 3px;
    border-bottom: 1px dashed #182de973;
}

效果图

在这里插入图片描述




5、五级标题

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  h5  
    基础设置： 
        1. 设置文字字体大小   font-size: 1.2rem;
        2. 设置文字字体颜色   color: #e61897bd;
        3. 设置文字内边距大小           padding: 3px;
        4. 单独设置文字靠左内边距       padding-left: 10px;
        5. 设置文字的边框是圆角弧度     border-radius: 3px;
        6. 设置下边框的线条样式         border-bottom: 1px solid #8fe20973;
*/
h5 {
    font-size: 1.2rem;
    color: #e61897bd;
    padding: 3px;
    padding-left: 10px;
    border-radius: 3px;
    border-bottom: 1px solid #8fe20973;
}

效果图

在这里插入图片描述







第四章 代码文本

1、代码正文

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  .md-fences 
    基础设置： 
        1. 设置文字字体         font-family: "Fira Code", Consolas, "Lucida Console", "Courier",
        2. 设置代码区域背景     background-color: #e0ffffbd;
        3. 设置内边距，距离顶部         padding-top: 6px;
        4. 设置内边距，距离底部         padding-bottom: 6px;
        5. 设置内边距，距离左边         padding-left: 10px;
        6. 设置内边距，距离右边         padding-right: 10px;
        7. 设置外边距，距离下边         margin-bottom: 2.5rem;
        8. 设置边框                    border: none;
        9. 设置边框的弧度               border-radius: 6px;
        10. 设置阴影效果                -webkit-box-shadow:  和  box-shadow: 
*/

.md-fences {
    font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #e0ffffbd;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px; 
    margin-bottom: 2.5rem;
    border: none;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

效果图

在这里插入图片描述




2、加粗效果

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  strong
        如果搜索不到，则手动添加标签效果 
    基础设置： 
        1. 设置背景颜色                 background-color: inherit;
        2. 设置文字颜色               color: #b5302e; 

*/
strong {
    background-color: inherit;
    color: #b5302e;
}

效果图

在这里插入图片描述




3、斜体效果

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  em
        如果搜索不到，则手动添加标签效果 
    基础设置： 
        1. 设置背景颜色                 background-color: inherit;
        2. 设置文字颜色                 color: #80800a;

*/
em {
    background-color: inherit;
    color: #80800a;
}

效果图

在这里插入图片描述




4、备注样式

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  blockquote
    基础设置：
        1. 设置背景颜色     border-radius: 3px;
        2. 设置右侧边框     border-left: 5px solid #028329;
        3. 设置内边距       padding: 15px;
        4. 设置文字颜色     color: #161616ea;
        5. 设置背景颜色     background-color: #3eee6477; 
*/
blockquote {
    border-radius: 3px;
    border-left: 5px solid #028329;
    padding: 15px;
    color: #161616ea;
    background-color: #3eee6477;
}

效果图

在这里插入图片描述




5、代码引用

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  tt
    基础设置： 
        1. 设置背景颜色         background-color: #f1b76a;
        2. 设置边框弧度         border-radius: 3px;
        3. 设置内边距           padding: 5px; 
        4. 设置字体大小         font-size: 0.9em;
*/
code,
tt {
    background-color: #f1b76a;
    border-radius: 3px;
    padding: 5px; 
    font-size: 0.9em;
}

效果图

在这里插入图片描述







第五章 表格标签

1、设置表头样式

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  table th
    基础设置： 
        1. 设置文字加粗                 font-weight: bold;
        2. 设置表格的边框               border: 1px solid #f7b870; 
        3. 设置内边距                   padding: 6px 13px;
        4. 设置表头背景颜色             background-color: #06f012ea;
        5. 设置文字颜色                 color: rgba(245, 7, 78, 0.966);
*/
table th {
    font-weight: bold;
    border: 1px solid #f7b870; 
    padding: 6px 13px;
    background-color: #06f012ea;
    color: rgba(245, 7, 78, 0.966);
}

效果图

在这里插入图片描述




2、设置单元格样式

案例代码

/*
    寻找方式：
        建议在 css 文件当中，搜索前面的  table td
    基础设置：  
        1. 设置表格的边框               border: 1px solid #f7b870; 
        2. 设置内边距                   padding: 6px 13px; 
*/
table td {
    border: 1px solid #f7b870;  
    padding: 6px 13px;
}

效果图

在这里插入图片描述







第六章 其他设置

1、 侧边样式

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  #typora-sidebar
    基础设置：
        1. 设置背景颜色     background-color: #000000;
        2. 设置右侧边框     border-right: 1px solid #eee;
        3. 设置文字颜色     color: #FFFFFF;
*/

#typora-sidebar {
    background-color: #000000;
    border-right: 1px solid #eee;
    color: #FFFFFF;
}

效果图

在这里插入图片描述




2、 图片样式

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  img
    基础设置： 
        1. 设置图片的边框效果         border: 1px solid #666666;
        2. 设置图片居中展示           margin: 0;
        3. 设置阴影和效果             -webkit-box-shadow 和 box-shadow
*/
img{
    border: 1px solid #666666;
    margin: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

效果图

在这里插入图片描述




3、水平分割线

案例代码

/* 
    寻找方式：
        建议在 css 文件当中，搜索前面的  hr
    基础设置：
        1. 设置顶部外边距     margin-top: 2rem;
        2. 设置底部外边距     margin-bottom: 2rem;
        3. 设置分割线的样     border-top: 3px dashed #abb2bf; 
*/
hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-top: 3px dashed #abb2bf;
}

效果图

在这里插入图片描述




4、导出网页

在这里插入图片描述




文案信息

/*

进入到 Typora 软件当中，按照以下步骤，找到对应位置：

【1】文件
【2】偏好设置
【3】导出
【4】HTML
【5】<head/>当中添加内容，如下内容设置：

<meta charset="UTF-8">
<meta name="author" content="ChenHaoChuan">
<meta name="description" content="chcsvip.blog.youkuaiyun.com">

*/




效果图（HTML的展示）

在这里插入图片描述




效果图（网页源代码）

在这里插入图片描述







附录：

点击颜色配色表 http://www.wahart.com.hk/rgb.htm

在这里插入图片描述







Typora自定义主题#简约风主题
胖手探长的博客
06-02 2790
基于haru主题，编写的一个简约风格的typora主题 亮色主题。typora主题自定义。typora主题推荐
typora将html转为格式,Typora 修改配置文件实现自定义标签样式（常用）
weixin_39957312的博客
06-09 1258
Typora 修改配置文件实现自定义标签样式(常用)Typora 修改配置文件实现自定义标签样式(常用)一、简介Typora 是一款支持实时预览的 Markdown 文本编辑器。它系统自带了几种主题样式，如下图所示：选择不一样的主题当然就有不一样的样式，但是今天的重点不是这个，今天我来教大家如何修改文本的标签样式，让你的笔记看起来更加的炫酷和优雅。所有的修改都是去到这个目录下：然后可以看到几个不同...
Typora - 自定义样式
qq_45338754的博客
07-20 2082
整体效果图： 如何你觉得这个颜色不好，那么颜色自取：https://www.cnblogs.com/5H5H/p/9784015.html （1）左侧边栏 :root { /* 左侧查找栏颜色 / –bg-color:#A9A9A9; / 左侧导航栏颜色 */ –side-bar-bg-color:#A9A9A9; –control-text-color: #777777; } （2）主页面背景颜色 /* 文本背景颜色 */ content { background-color:#C0C0C0;
typora自定义样式
最新发布
Clarkbrave的博客
04-18 304
typora自定义样式
typora自定义主题
OeMook的博客
11-12 1349
typora自定义主题
Typora自定义主题
azhu12138的博客
08-06 1495
Typora自定义主题 前置知识 因为我们的markdown语法实际上是和html标签具有一一对应关系的。 所有Typora本质上只是一个将markdown语法转换html标签，再将html标签转换为可视化内容的浏览器。 而主题就是通过一个css文件来实现渲染样式的。 所以我们只需要编写一个属于自己的css文件就能够自定义一个属于自己的主题啦！ ???? 必备的前置知识：HTML、CSS ???? 还不会的先去学一下再过来吧：https://www.runoob.com/ markdown与HTML之间一一
Typora 主题
10-11
结合其他的主题进行修改后的Typora主题，和马克飞象相似
自定义Typora主题样式
达尔文的猹的博客
03-28 3693
Typora 是不错的 Markdown 编辑器啊，但是无奈原本的主题有点丑，所以自己改造一下。 使用系统主题 打开 Typora 偏好设置的外观，点击获取主题即可进入主题官网。找到自己喜欢的下载。 点击上图的 打开主题文件夹，会打开 Typora 存放主题的文件夹，之后讲下载的主题放入该文件夹内。 之后重启 Typora 即可在更换主题的菜单找到下载的主题。 要是官网的主题不好看怎么办？？ ...
Typora自定义主题样式（专属）.zip
07-10
在这个“Typora自定义主题样式（专属）.zip”压缩包中，包含了专为个人定制的Typora编辑器主题，这允许用户根据自己的喜好调整编辑器的视觉风格，提升码字时的舒适度和个性化体验。 在Typora中，自定义主题主要涉及...
Typora 创建自定义主题样式
Nemuel的博客
07-26 2475
效果展示 标题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K6xbDcAu-1595734785141)(演示文稿.assets/image-20200726113718117.png)] 表格 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VF5jrIUJ-1595734794503)(演示文稿.assets/image-20200726113718117.png)] 代码 操作步骤： 打开 Typora 主题文件夹：文件 – 偏好设置
Typora的自定义主题
Peter Cheung的博客
05-17 2103
主要讲述怎么修改Typora的字体，如何自定义主题，如何美化Typora。
Typora 自定义主题
weixin_40502337的博客
10-06 927
自定义 Markdown 编辑神器 Typora 的主题
Typora自定义主题（基于pie）
m0_71268863的博客
07-25 946
打开pie.css。
typora样式
HHT0506的博客
05-23 882
官方主题：https://www.typora.net/themes/ Typora 自定义格式：引用、行内代码块、图象加边框：https://blog.youkuaiyun.com/tu_wer/article/details/123017003 base.user.css span { color: black; } blockquote { border-left: 4px solid rgb(131 232 194); padding: 0 15px; color: #f4433
Typora 样式
weixin_46012855的博客
06-14 367
1：修改主题 可以根据 官方文档 修改主题 CSS。 配合左上角菜单 视图》开发者工具 来修改 CSS 效率更高。 2：我的主题 觉得我的主题不好看可以看看官网的主题，都非常好看。 提示： 我的主题图片都是靠左而不是居中，我讨厌图片居中，因为图不够大会导致字符与图片位置看着非常别扭。 2.1：黑暗主题 根据自己的喜好在 night-new 主题上修改了点 https://blog.csdn.n...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值