【工具】Typora中主题css修改|看了这篇,一劳永逸

真正的指南

1. 查看当前的css

  • shift+f12,与一般浏览器调试一样,先打开控制台,查找你需要修改的地方叫什么名字。(也可以点击“视图”-“开发者工具”)
    在这里插入图片描述

2. 以粗体的字体修改为例

  • 审查元素,可以看到粗体的被strong标注。
    在这里插入图片描述

  • 查看下方的css名字,这里可以看到是strong。
    在这里插入图片描述

  • 点击“文件”-“偏好设置”-“外观”-“打开主题文件夹”。选择你当前的主题对应的css。比如我现在的主题是github,我打开github.css进行修改。
    在这里插入图片描述

  • 由于正文使用的楷体在被加粗之后不显眼,我们将加粗的字体改成黑体。(上图为修改前的,下图为修改后的,中间图为在css中添加的内容)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 诶嘿,不好看,那就删掉这一行css代码,换成别的形式(bold是700,现在改成900,但不改原字体,可能会更醒目一些,可以看到,确实粗了一点,聊胜于无)
    在这里插入图片描述
    在这里插入图片描述

3. 附上我全部调整完毕的css,以及链接

示意图:
在这里插入图片描述
部分样式使用爆改Typora默认样式,世界终于平静了。。。

样式自取链接:
gitee:https://gitee.com/shandianchengzi/typora-self-use-css
github:https://github.com/shandianchengzi/typora-css–

注意:主题文件夹下的css文件需要使用UTF-8格式编码,否则对于中文字体将无法解析
操作方式:使用记事本打开某个css文件*.css,然后点击另存为,选择保存的格式。
在这里插入图片描述

这样的学习修改办法才是一劳永逸啊!
一个一个找css名称简直zz行为!


虚假的指南

以下是一年前幼稚到爆炸的原博客。

引言

​ 作为一只强迫症设计向小白,typora改主题是必须的,一些基础的设置如字体和颜色,其他的博客基本都写得很详细,不再赘述。指路代码块、公式块、背景、字体等基础设置+现成的源代码需要修改的css代码的大概含义这两篇博文。

​ 这里总结一下个人找了很久的其他css,比如说行内数学字符的颜色,默认是紫色。

​ 希望不要有下一个强迫症改不到自己想改的东西。

​ 个人建议是先去下载或拷贝自己喜欢的主题,以免要改的东西过多。

字体避雷

查看电脑中已有字体:C:-Windows-Fonts。修改的字体要和这个里面的字体名字一致才能成功。
font-family:“英文字体”,“中文字体”;。这样设置能同时使用两种字体。

行内公式

用.md-inline-math xxx修改。
比如.md-inline-math script {color: #002266;},可以使行内公式在被编辑时颜色变成#002266。
下面这段代码截自night主题。night主题基本所有的更改设置都能找到,参考很方便。

.md-inline-math g,
.md-inline-math svg {
    stroke: #b8bfc6 !important;
    fill: #b8bfc6 !important;//如字面意思
}
[md-inline='inline_math'] {
    color: #9CB2E9;//改覆盖颜色的
}

其他的都蛮好找的,基本在之前的两个链接里都提到了。

补充一些css(2023/07/15更新)

无序列表

无序列表是通过<ul><li>内容</li></ui>实现的噢,可以直接ul li{样式}设置,比如

ul li{font-size:large;}

表格样式修改

框线对应的是border(边框)属性,table是整个表格,tr(即table row)是表格里面的每一行,th(即table header)是表格里的第一行的元素,td是表格里的除了第一行之外的其他元素。

设置它们的框线为1px像素、solid(实线)、#dfe2e5(灰色)的方式如下css:

table tr th td {
    border: 1px solid #dfe2e5;
}

没有id和class怎么改?

这个样式修改是一类一类的统一改的,比如修改所有公式或所有普通的p段落文本。

如果只需要改特定文本的样式,建议直接内嵌html语句,比方说把某个文字调成红色:红色文字,代码如下:

<font color='red'>红色文字</font>
Typora是一款功能强大的Markdown编辑器,它支持自定义主题样式。根据提供的引用内容,关于修改TyporaCSS样式有以下几种方法: 方法一:查看当前的CSS样式文件 可以通过Typora的菜单选项找到当前正在使用的CSS样式文件。这样你就可以直接修改该文件来改变Typora的外观。 方法二:以粗体的字体修改为例 通过修改CSS代码的相关属性,如`font-weight`来改变字体的粗细。你可以尝试将原来的`font-weight`数值从700改为900,以使字体更加粗重。 方法三:无序列表表格样式修改 如果你想改变无序列表或表格的样式,可以在CSS文件找到对应的选择器,然后修改样式属性,如`list-style-type`来改变列表的样式。 方法四:没有id和class怎么改? 在Typora,你可以使用标签选择器或者伪类选择器来修改没有id和class的元素。通过使用更具体的选择器,你可以针对特定的元素进行样式修改。 另外,你也可以参考提供的引用内容的完整调整过的CSS样式文件,并通过链接来获取更多的参考。 总结: 要修改TyporaCSS样式,你可以查看当前的CSS文件,根据需要修改相关属性,如字体粗细、列表样式等。另外,你可以在没有id和class的情况下使用标签选择器或伪类选择器来进行样式修改。记得备份原始CSS文件,以防修改后出现问题。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【工具Typora主题css修改看了这篇一劳永逸](https://blog.csdn.net/qq_46106285/article/details/104732197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [typora 基本使用和更换typora主题样式](https://blog.csdn.net/weixin_45630258/article/details/125213164)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shandianchengzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值