typora的主题文件相关（与图片显示有关）

于 2023-10-20 12:34:16 发布
阅读量159 收藏
点赞数
文章标签： typora
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa896517050/article/details/133943759
版权

typora的主题文件相关

1.这是收藏的主题文件，定义了标题，代码块，文字块等等（个人使用的）。

/* 全局属性 */
#write {
  margin: 0 auto;
  padding: 1rem 4rem;
  font-size: 18px;
  color: black;
  line-height: 1.6;
  word-spacing: 0px;
  letter-spacing: 0px;
  word-break: break-word;
  word-wrap: break-word;
  text-align: left;
  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/*段落*/
#write p {
  font-size: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
  line-height: 26px;
  color: black;
}


/*标题*/
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 0px;
  font-weight: bold;
  color: black;
}

#write h1 {
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
}

#write h1:after {
  content: "";
  display: block;
  margin: 0.2rem auto 0;
  width: 6rem;
  height: 2px;
  border-bottom: 2px solid var(--title-color);
}

#write h2 {
  font-size: 1.3rem;
  border-bottom: 2px solid rgb(239, 112, 96);
}

#write h2 span {
  display: inline-block;
  font-weight: bold;
  background: rgb(239, 112, 96);
  color: #ffffff;
  padding: 3px 10px 1px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 3px;
}

#write h2:after {
  display: inline-block;
  content: "";
  vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent;
}

#write h3 {
  font-size: 1.2rem;
}

#write h3 span {
  display: inline-block;
  font-weight: bold;
  background: rgb(141, 247, 127);
  color: #332e2d;
  padding: 3px 10px 1px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  margin-right: 3px;
}

#write h2:after {
  display: inline-block;
  content: "";
  vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent;
}

#write h4 {
  font-size: 1.1rem;
}

#write h5 {
  font-size: 1rem;
}

#write h6 {
  font-size: 1rem;
}

/*列表*/
#write ul,
#write ol {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 25px;
  color: black;
}

#write ul {
  list-style-type: disc;
}

#write ul ul {
  list-style-type: square;
}

#write ol {
  list-style-type: decimal;
}

#write li section {
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 26px;
  text-align: left;
  color: rgb(1, 1, 1);
  /* 只要是纯黑色微信编辑器就会把color这个属性吞掉。。。*/
  font-weight: 500;
}

/*引用*/
#write blockquote {
  display: block;
  font-size: 0.9em;
  overflow: auto;
  overflow-scrolling: touch;
  border-left: 3px solid rgb(239, 112, 96);
  color: #6a737d;
  padding: 10px 10px 10px 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  background: #fff9f9;
}

#write blockquote p {
  margin: 0px;
  color: black;
  line-height: 26px;
}

/*链接*/
#write a {
  text-decoration: none;
  word-wrap: break-word;
  font-weight: bold;
  border-bottom: 1px solid #1e6bb8;
  color: rgb(239, 112, 96);
  border-bottom: 1px solid rgb(239, 112, 96);
}

/*行内代码*/
#write p code,
#write li code {
  font-size: 14px;
  word-wrap: break-word;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 2px;
  color: rgb(239, 112, 96);
  ;
  background-color: rgba(27, 31, 35, .05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
  word-break: break-all;
}

/*图片*/
#write span img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}


/*表格*/
#write table {
  display: table;
  text-align: left;
}

#write tbody {
  border: 0;
}

#write table tr {
  border: 0;
  border-top: 1px solid #ccc;
  background-color: white;
}

#write table tr:nth-child(2n) {
  background-color: #F8F8F8;
}

#write table tr th,
#write table tr td {
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-align: left;
}

#write table tr th {
  font-weight: bold;
  background-color: #f0f0f0;
}

/* 行内代码 */
#write span code,
#write li code {
  color: rgb(239, 112, 96);
}

/* 脚注上标 */
#write .md-footnote {
  font-weight: bold;
  color: rgb(239, 112, 96);
}

#write .md-footnote>.md-text:before {
  content: '['
}

#write .md-footnote>.md-text:after {
  content: ']'
}

/* 脚注 */
#write .md-def-name {
  padding-right: 1.8ch;
}

#write .md-def-name:before {
  content: '[';
  color: #000;
}

#write .md-def-name:after {
  color: #000;
}

/* 代码块主题 */
.md-fences:before {
  content: ' ';
  display: block;
  width: 100%;
  background-size: 40px;
  background-repeat: no-repeat;
  background-color: #282c34;
  margin-bottom: -7px;
  border-radius: 5px;
  background-position: 10px 10px;
}

.cm-s-inner.CodeMirror {
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #292d3e;
  color: #fafafd;
  font-family: Consolas;
  border-radius: 4px;
}

.CodeMirror-lines {
  padding-left: 4px;
}

.cm-s-inner .cm-keyword {
  color: #c792ea !important;
}

.cm-s-inner .cm-operator {
  color: #89ddff !important;
}

.cm-s-inner .cm-variable-2 {
  color: #eeffff !important;
}

.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type {
  color: #f07178 !important;
}

.cm-s-inner .cm-builtin {
  color: #ffcb6b !important;
}

.cm-s-inner .cm-atom {
  color: #f78c6c !important;
}

.cm-s-inner .cm-number {
  color: #ff5370 !important;
}

.cm-s-inner .cm-def {
  color: #82aaff !important;
}

.cm-s-inner .cm-string {
  color: #c3e88d !important;
}

.cm-s-inner .cm-string-2 {
  color: #f07178 !important;
}

.cm-s-inner .cm-comment {
  color: #f3b50a !important;
}

.cm-s-inner .cm-variable {
  color: #f07178 !important;
}

.cm-s-inner .cm-tag {
  color: #ff5370 !important;
}

.cm-s-inner .cm-meta {
  color: #ffcb6b !important;
}

.cm-s-inner .cm-attribute {
  color: #c792ea !important;
}

.cm-s-inner .cm-property {
  color: #c792ea !important;
}

.cm-s-inner .cm-qualifier {
  color: #decb6b !important;
}

.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type {
  color: #decb6b !important;
}

.cm-s-inner .cm-error {
  color: rgba(255, 255, 255, 1) !important;
  background-color: #ff5370 !important;
}

.cm-s-inner .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid rgb(239, 112, 96);
  z-index: 3;
}

.cm-s-inner div.CodeMirror-selected {
  background: rgba(167, 178, 189, 0.2) !important;
}

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
  background: rgba(167, 178, 189, 0.2) !important;
}

.cm-s-inner .CodeMirror-selected,
.cm-s-inner .CodeMirror-selectedtext {
  background-color: rgba(167, 178, 189, 0.0) !important;
}

.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line>span::-moz-selection,
.cm-s-inner .CodeMirror-line>span>span::-moz-selection {
  background-color: rgba(167, 178, 189, 0.2);
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line>span::selection,
.cm-s-inner .CodeMirror-line>span>span::selection {
  background-color: rgba(167, 178, 189, 0.2);
}

2.与图片相关的坑

1.图片不能居中显示

修改图片显示对应的主体文件

这是github上的主题图片居中显示片段。
#write span img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
#write span img {
  display: inline-block;
  border-right: 0px;
  border-left: 0px;
}

#修改为所有图片都居中显示，且图片为自动大小

2.图片显示问题

1.图片显示模糊（图片质量没问题，但就是显示模糊，即使把typora调到最大化也是模糊）

原因是对于主体中定义的页面宽度设置有问题导致图片被压缩，显示就有问题，需要修改主体文件页面宽度，确保按照最大宽度，图片能够清晰显示，尤其是截图注释的内容能够清晰显示

/* 全局属性 */
#write {
  margin: 0 auto;   /* 实现自动水平居中。设置上下边距为0,左右自动计算 */
  padding: 1rem 4rem;  /* 元素内部添加上下1rem,左右4rem的内边距 */
  font-size: 18px;
  color: black;
  line-height: 1.6;
  word-spacing: 0px;
  letter-spacing: 0px;
  word-break: break-word;
  word-wrap: break-word;
  text-align: left;
  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
2.文件发给别人不能正常显示图片

原因：图片是保存在文件的对应目录下，typora只是引用，发送文件没有发送图片文件，因此导致不能正常显示出来

此时可以采用图床，把图片上传到图床，这样也就可以直接复制所有内容到博客直接在博客中显示出图片了。具体做法可以看看教程

[typora+PicGo+githup图床实现图片任意复制不丢失_提取 typora 中的图片_wwzroom的博客-CSDN博客](https://blog.csdn.net/aa896517050/article/details/125246420?ops_request_misc=%7B%22request%5Fid%22%3A%22169777601116800226576947%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fblog.%22%7D&request_id=169777601116800226576947&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2blogfirst_rank_ecpm_v1~rank_v31_ecpm-1-125246420-null-null.nonecase&utm_term=typora &spm=1018.2226.3001.4450)

wwzroom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题
xuchaoxin1375的博客
01-06 937
文章目录工作流(快捷键or鼠标右键)更换主题获取更多主题下载主题使用主题解压主题我修改的主题效果css配置源代码 工作流(快捷键or鼠标右键) 使用鼠标右键来设定选中的内容样式是typora的一大方便 配合快捷键更好 更换主题 获取更多主题 下载主题 使用主题 解压主题 复制css文件 从typora open theme folder打开文件夹,将复制的css文件粘贴到打开的文件夹 关闭保存所有文件,并所有typora窗口 重新启动typora,打开主题设置,可以看到新下载的主题
mac typora行距修改，typora图片靠左，typora主题背景修改，typora快捷键
weixin_44637703的博客
05-30 2785
一：typora设置行距，图片靠左，修改背景 打开typora偏好设置 找到外观，打开主题文件 找到需要修改的主题文件 修改行距：修改关于字体样式p标签的margin样式，将样式修改为0em 修改图片居中：主题文件追加以下代码 p .md-image:only-child { width: auto; text-align: left; } 修改背景颜色为护眼色:按照下面代码，修改root标签 :root { --active-file-bg-color: #dad
【Markdown】Typora配置图片上传
Explore_Zhou
01-17 2755
对于喜欢写Markdown文档的人来说，Typora无疑是一个写作利器，它有别于其他的Markdown软件，不是一边编辑一边渲染，而是即写即渲染，这样对于浏览md文件也非常友好。此外Typora还支持更换主题，在其官网可以下载到很多大佬做的主题。总而言之，Typora对于Markdown写作非常便捷。但是Typora本身不支持图片上传，如果不想每次写一篇文章就附带一个图片的文件夹（这对于文章的保存和分享造成了一些不便），需要自己设置一下图片上传。
Typora使用技巧之插入图片及图片上传
热门推荐
supermouse的博客
01-17 3万+
文章目录如何在 Typora 中插入图片直接写 Markdown拖拽图片从剪贴板中粘贴图片插入图片时做的动作上传图片配置图片上传服务iPicuPicPicGo-Core（命令行应用）安装预编译好的 PicGo-Core 二进制程序通过 Node.js 包管理器安装 PicGo-Core配置 PicGo-Core插件使用PicGo.app（仅支持中文）Custom插入图片时自动上传全局设置针对每一个文件单独设置上传图片的使用上传指定的图片上传所有本地图片 阅读本文的前置条件： 掌握基本的 Markdown
【解决方案】Typora上传博客图片无法显示解决方案
千寻简笔记《chihiro-notes》已开源，源文件直接获取
07-11 729
1️⃣下载安装node.js 2️⃣Gitee的操作 3️⃣下载安装PicGo 4️⃣Typora的设置：文件-->偏好设置-->图像 5️⃣上传图片
【Typora 图片居中】彻底解决Typora图片无法居中的问题
Xminyang的博客
07-10 3505
【Typora 图片居中】彻底解决Typora图片无法居中的问题
typora最好用的主题_Typora 使用教程
weixin_42273775的博客
06-20 1929
Typora使用教程 目录 1.Typora是什么？1.1 Typora是什么？1.2 Markdown是什么？1.3 HTML是什么？1.4 CSS是什么？1.5 相互关系2. 为什么要使用Typora?2.1 所见即所得2.2 网站兼容性强2.3 美观2.4 私人订制2.5 免费3. 怎么使用Typora？3.1 Typora界面介绍3.2 常用快捷键/语法3.3 高级技巧3.3.1 修改Typora主题a.什么是Typora...
typora 主题 背景图片 透明代码块
mqnu0的博客
08-15 1172
个性主题
typora主题配置：公众号一键排版
测试开发小记
05-20 1976
typora是一个非常易用且免费的markdown编辑器，是我最常用的文档编辑器。它支持实时渲染，不用打开两个窗口（源码窗口和预览窗口），真正实现了沉浸式写作，所谓所见即所得。它的界面简洁，操作简单，非常容易上手，这里就不介绍了。本文主要介绍Typora的主题配置，实现公众号一键排版。 目录为什么要配置主题主题文件使用主题文件下载导入主题文件主题文件修改CSS语法CSS单位CSS margin 属性修改主题文件 为什么要配置主题 typora支持配置渲染的样式，默认提供了 5 种主题。选择主题的其中一个目的
ASP+ACCESS网上图书销售系统(源代码+论文).rar
07-21
ASP+ACCESS网上图书销售系统(源代码+论文)
ASP+ACCESS网上园林设计(源代码+论文).rar
07-21
ASP+ACCESS网上园林设计(源代码+论文)
利用VC从数据库提取数据，绘制趋势曲线图
最新发布
07-21
在VC++中，实现从数据库读取数据的功能，并依据获取的数据绘制出曲线图形。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
ASP图书管理系统(源代码+论文).rar
07-21
ASP图书管理系统(源代码+论文)
WPF 窗体增加置顶按钮Demo
07-21
本文完整代码
ASP基于WEB楼宇专业网站毕业设计(源代码+论文).rar
07-21
ASP基于WEB楼宇专业网站毕业设计(源代码+论文)
Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印
07-21
Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的均值池化结构图,可导出高清图片，可修改，无水印。 方便用于小
基于粒子群算法优化径向基神经网络RBF多输入多输出预测，PSO-RBF多变量回归预测，matlab代码
07-21
基于粒子群算法优化径向基神经网络RBF多输入多输出预测，PSO-RBF多变量回归预测，matlab代码。 评价指标包括:R2、MAE、MSE、RMSE和MAPE等，代码质量极高，方便学习和替换数据。 1.运行main文件，其余为子函数 2.可以做回归预测，分类预测，时间序列预测 3.可以做信号分解，算法优化，区间预测 4.可以做组合模型预测 5.可以做聚类
GitHub的基本使用教程
07-21
github使用教程
typora编辑文件时无法显示图片
10-11
1. 确认图片路径是否正确，可以尝试将图片拖拽到Typora中，看是否能够正常显示。 2. 确认Typora的图片设置是否正确，可以在Typora的偏好设置中找到“图像”选项卡，检查“图像上传服务”和“图像根目录”是否正确...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值