1. Toy模板网首页
  2. > Toy博客

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

10月前 作者：h7ml 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

转载自 豫冬川：Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

前言

Typora是非常优秀的Markdown编辑器，可惜自带的样式比较简陋。经过多种typora主题的选择，感觉少数派风格最好，@张晋基于少数派风格的主题进行了一些修改。我觉得这个主题很好，红色的主题颜色醒目且清爽，但是发现有的地方还是不是很喜欢，就在它的基础上修改了一下。其次晚上看笔记时浅色主题容易累眼，便又在此浅色主题基础上修改成了一份深色模式。

一、浅色主题

本主题灵感来源于少数派风格，是官网各主题中算是最好的了，在此基础上进一步加工，满足个人喜好，读者若觉得不好，可按照下列步骤自行修改。

修改后效果如下：

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

浅色主题修改主题名为redrail，{主题名}.css文件中第一行修改为

@import 'redrail/fonts.css';

字体

修改字体，原字体的英文字母和数字显示很奇怪。原主题在mac上显示效果很好，但是在我的win10上面有些不正常，中英文不是很协调，就改了一下字体。

英文采用Consolas，中文用的思源宋体。先修改可以试试注释里面的。

body {
    /*font-family: "Vollkorn", Palatino, Times; */
    /*font-family: 'Microsoft YaHei UI', Georgia, Times, 'SimSun', serif!important; */
    /*font-family: 'Source Han SerifCN', Georgia, Times, 'SimSun', serif!important; */
    font-family: Consolas, 'Source Han SerifCN', Georgia, Times, 'SimSun', serif!important;
    font-weight: regular;
    /*color: var(--mid-13);*/
    color: black;
    -webkit-font-smoothing: antialiased;
    /*line-height: 1.8rem;*/
    line-height: 17px
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

页宽

原页宽较窄，修改后宽度可铺满1920*1080的屏幕，通过修改max-width值即可。

#write {
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 30px 160px;
}

有序列表和无序列表

字体加粗更加显眼。修改font-weight项即可。

#write ol>li>*,
#write ul>li>* {
    /*color: #333;*/
    color: black;
    font-weight: bold;
}

其他修改参考深色主题

二、深色主题

深色主题调整后效果如下：

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。

字体颜色

body {
    /*font-family: "Vollkorn", Palatino, Times; */
    /*font-family: 'Microsoft YaHei UI', Georgia, Times, 'SimSun', serif!important; */
    /*font-family: 'Source Han SerifCN', Georgia, Times, 'SimSun', serif!important; */
    font-family: Consolas, 'Source Han SerifCN', Georgia, Times, 'SimSun', serif!important;
    font-weight: normal;
    /*color: var(--mid-13);*/
    color: #cdcbcb;
    -webkit-font-smoothing: antialiased;
    /*line-height: 1.8rem;*/
    line-height: 17px;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}
#write p {
    line-height: 1.8rem;
    word-spacing: .05rem;
    font-weight: normal;
    /* color: #3f3f3f; */
    color: #cdcbcb;
    margin: 0;
}

h1大标题字体变浅

h1 {
    text-align: center;
    padding-bottom: 0.3em;
    font-size: 2.2em;
    line-height: 1.2;
    margin: 2.4em auto 1.2em;
    color: var(--main-6);
}

有序列表和无序列表字体颜色调为不刺眼的柔和颜色。

/*Ordered list and unordered list*/
#write ol>li>*,
#write ul>li>* {
    /*color: #333;*/
    color: #cdcbcb;
    font-weight: bold;
}

暗色背景

设置背景色为暗色

#write {
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 30px 160px;
    background-color: #383737;
}

设置侧边栏颜色为暗色

/*Left sidebar color*/
    --side-bar-bg-color: #262626;

取消字体加粗

取消字体加粗避免刺眼。

h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: normal;
    line-height: 1.4;
    cursor: text;
}

引用块

引用块颜色调整为舒适的颜色。

blockquote {
    border-left: 4px solid rgb(239, 112, 96);
    padding: 10px 15px;
    color: #fffefe;
    background-color: #4c4141;
}

代码块字体

#write .md-fences {
    border: 1px solid #7a7a7a;
    -webkit-font-smoothing: initial;
    margin: 0.5rem 0 !important;
    /* padding: 0.3rem 0 !important; */
    padding: 3px 5px;
    line-height: 1.55rem;
    border-radius: 2px;
    /*font-family: 'Roboto Mono', 'Source Sans Pro', 'Microsoft YaHei', '微软雅黑' !important;*/
    /*font-family: 'Roboto Mono', 'Source Sans Pro', 'Microsoft YaHei', '微软雅黑';*/
    font-family: Consolas, 'Source Han SerifCN', Georgia, Times, 'SimSun' !important;
    /*font-size: 0.9rem;*/
    font-size: 17px;
    font-weight: normal;
    word-wrap: normal;
}

行间代码

调整字体大小，字体颜色，字体背景。

#write code,
tt {
    padding: 2px 4px;
    border-radius: 2px;
    font-family: 'Source Code Pro', Roboto Mono, Source Sans Pro, 'Microsoft YaHei', '微软雅黑';
    /*font-size: 0.92rem;*/
    font-size: 17px;
    font-weight: bold;
    color: #800501;
    background-color: #f3d1d1;
    /* color: #c7254e;
    background-color: #f9f2f4;  */
}

源代码模式下的调整

/*font color of Inline Code in source code mode*/
.cm-s-typora-default .cm-comment{
    color: #eebdbd;
}

滚轮

/*Right scrollbar color*/
::-webkit-scrollbar-thumb{
    background: #cdcbcb;
}

代码块高亮

Typora的代码由css渲染而成。原主题的高亮似乎并不能令人满意，遂选择改成自己喜欢的代码高亮主题。

查阅typora官方文档：

  • typora代码高亮文档原文：Code Block Styles/Themes
  • typora修改自定义css和添加自定义css文档原文：Add Custom CSS

可知，Typora的加载顺序为

1. Typora默认效果

2. 当前主题的CSS

3. 与主题同一目录的base.user.css文件（会影响到所有的主题）

4. 与主题同一目录的{主题名}.user.css文件（只对当前主题进行修改）

高亮原理

Typora使用codemirror（官网：https://codemirror.net/）的高亮样式。所以只需要选择使用codemirror的css样式，然后加载进Typora即可。

修改高亮

首先打开codemirror的主题测试页面：CodeMirror: Theme Demo选择你喜欢的主题。

然后，在地址栏中输入https://codemirror.net/theme/{你要的主题}.css 即可，例如本次修改的css样式地址为https://codemirror.net/theme/railscasts.css。将网址内的css样式拷贝下来，在Typora主题文件夹新增redrail-night.user.css，将网址内的css样式粘贴进去，如下为railscasts样式：

/*
    Name:       Railscasts
    Author:     Ryan Bates (http://railscasts.com)
    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
*/
.cm-s-railscasts.CodeMirror {background: #2b2b2b; color: #f4f1ed;}
.cm-s-railscasts div.CodeMirror-selected {background: #272935 !important;}
.cm-s-railscasts .CodeMirror-gutters {background: #2b2b2b; border-right: 0px;}
.cm-s-railscasts .CodeMirror-linenumber {color: #5a647e;}
.cm-s-railscasts .CodeMirror-cursor {border-left: 1px solid #d4cfc9 !important;}

.cm-s-railscasts span.cm-comment {color: #bc9458;}
.cm-s-railscasts span.cm-atom {color: #b6b3eb;}
.cm-s-railscasts span.cm-number {color: #b6b3eb;}

.cm-s-railscasts span.cm-property, .cm-s-railscasts span.cm-attribute {color: #a5c261;}
.cm-s-railscasts span.cm-keyword {color: #da4939;}
.cm-s-railscasts span.cm-string {color: #ffc66d;}

.cm-s-railscasts span.cm-variable {color: #a5c261;}
.cm-s-railscasts span.cm-variable-2 {color: #6d9cbe;}
.cm-s-railscasts span.cm-def {color: #cc7833;}
.cm-s-railscasts span.cm-error {background: #da4939; color: #d4cfc9;}
.cm-s-railscasts span.cm-bracket {color: #f4f1ed;}
.cm-s-railscasts span.cm-tag {color: #da4939;}
.cm-s-railscasts span.cm-link {color: #b6b3eb;}

.cm-s-railscasts .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
.cm-s-railscasts .CodeMirror-activeline-background { background: #303040; }

按照官方文档，第一步是将.cm-s-{主题名}.（例如这里是.cm-s-railscasts.）替换为.cm-s-inner.

补充基本样式

因为typora渲染markdown的机制是使用一个<pre class="md-fences">标签，所以为了让一些基本样式显示正常 ，应该把类似font-family，color，background-color这样的样式加入进去。

在redrail-night.user.css里补充一段如下样式：

/**apply to code fences with plan text**/
/* fences就是代码块的基本样式*/
.md-fences {
  background-color: #263238;
  color: rgba(233, 237, 237, 1);
  border: none;
}
/* tooltip就是点击代码块之后，在右下角有一个小框（tooltip）提示这是什么语言*/
.md-fences .code-tooltip {
  background-color: #263238;
}

保存css文件。此时代码块高亮已经修改。

2021年4月2日更新

由于user.css太累赘，直接删了，放到本身的主题css里面，需要代码高亮主题的，可以直接把喜欢的高亮主题放进去然后根据自己喜好再进一步的修改。

  1. 修改了浅色和暗色主题代码块左侧间距
  2. 调整暗色主题表格颜色。
  3. markdown框内调整字体颜色。
  4. 删除redrail-night.user.css文件，将其中配置放入redrail-night.css。

2021年6月9日更新

浅色主题下：

1.英文字体由Consolas改为Menlo，其对于代码更为友好，字母相比Consolas区分度更高，中文字体由思源宋体改为微软雅黑，在低分辨率的屏幕上可以获得更好的体验。

2.设置源代码模式下的字体颜色。

3.调整行间代码颜色。

黑暗主题下：

1.修改英文及中文字体。

2.修改部分代码框高亮颜色。

3.修改侧边栏下方操作框颜色。

三、总结（附下载地址）

有些小细节的地方修改了就没提到，大家可自行调整，每个人的爱好不同，希望大家也能找到自己最舒适的主题。

目前主题已开源，修改后的redrail主题以及深色版redrail-night主题，下载地址：github: typora-theme-redrail

主题制作不易，希望大家能顺手star一下，感激不尽！ 也欢迎大家提出宝贵意见。

祝大家写作愉快！

感谢pie主题和ursine-polar主题的制作者无私的开源精神，也感谢@张晋对原主题的修改。

个人博客如下，欢迎来访：

四、参考

一份精美的Typora主题

typora主题样式折腾记

typora代码高亮官方文档

typora修改css官方文档

typora-theme-pie

typora-theme-ursine

简单又好看，你的 Markdown 文稿也能加上个性化主题文章来源地址https://www.toymoban.com/news/detail-417653.html

到了这里，关于Typora打造最适合编程笔记的精美主题（浅色版和修改后的深色版），可自行修改喜欢的样式。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 鼠标更换指针图案和更改typora的主题

    鼠标更换指针图案和更改typora的主题

    由此偶然看见好几个朋友都使用了新的图案替换掉了原有的鼠标图案，今天寻思自己也换一个图案 主要是觉得鼠标大一点儿会好看一些，所以就找了一些教程 官方教程，小的变动 当然最多的是官方教程，如果你只是想要换一套颜色/大小就直接用搜索控制面板-鼠标-指针-选择

    2024年02月08日
    浏览(38)
  • Typora主题，设置代码块Mac风格三个小圆点

    Typora主题，设置代码块Mac风格三个小圆点

    Typora 编辑器让人们能更简单地用 Markdown语言 书写文字，解决了使用传统的Markdown编辑器写文的痛点，并且界面简洁优美，实现了实时预览等功能。 1.1 第一步打开偏好设置 1.2 第二步打开主题文件夹 可通过色卡app自行搭配一套笔记搭的颜色 表格各行变色，宽度设置为100%（个

    2024年02月17日
    浏览(44)
  • Typora自定义主题分享 (Mac风、图片立体感...)

    Typora自定义主题分享 (Mac风、图片立体感...)

    ： Typora 、 Mac 、 图片阴影 、 代码样式 、 表格 主题效果展示 安装方式 下载 Typora 官网 Mo 主题 下载地址 将 Mo.css 样式修改为以下代码 主题效果展示 安装方式 下载 Typora 官网 Drake 主题 下载地址 将 Darke-vue3.css 样式修改为以下代码 r-line span::-moz-selection, .cm-s-inner .Code

    2024年02月08日
    浏览(35)
  • 最适合编程的笔记本电脑是什么？

    最适合编程的笔记本电脑是什么？

    搞编程生产力要求，第一就是性能，第二是屏幕尺寸，第三是键盘手感，第四就是便携性。 普通编程 cuda计算 大项目编译 虚拟机 深度学习 前端程序员 笔记本电脑的CPU需要性能释放激进，且散热能力较好，代码编译速度更快。AMD处理器建议R5-5600U、R7-5800U起步，Intel的处理器

    2024年02月11日
    浏览(33)
  • Typora+MinIO+Python代码打造舒适协作环境

    Typora+MinIO+Python代码打造舒适协作环境

    作者：IT王小二 博客：https://itwxe.com 不知不觉大半年没更新了...前面小二介绍过使用 Typora+MinIO+Java代码打造舒适写作环境 ，然后有很多大佬啊，说用Java来实现简直是杀鸡用上牛刀，小二想了想，确实有点...正好小二最近在学习Python，所以咱们就改用Python实现一版。 安装参考

    2024年02月02日
    浏览(39)
  • 使用Material UI模态框，打造精美弹窗效果的秘密

    使用Material UI模态框，打造精美弹窗效果的秘密

    让我们来了解一下 Material UI Modal - 一个酷炫的 React 组件！ 你是否曾经想过在你的网页应用程序中添加弹出窗口以显示重要信息或帮助用户输入？那么 Material UI Modal 就是你的救星！Material UI 是一个由 Google 创建和维护的 UI 组件库，提供了一套全面的工具，用于创建用户界面。

    2024年02月05日
    浏览(44)
  • 手把手教你学习PyQT5：打造精美、功能强大的桌面应用程序（更新中。。）

    手把手教你学习PyQT5：打造精美、功能强大的桌面应用程序（更新中。。）

    PyQt5是一个用于创建图形用户界面（GUI）的Python库。它是基于Qt库的，Qt是一个用于创建跨平台应用程序的C++库。PyQt5允许开发人员使用Python语言创建功能强大的应用程序 PyQt5是一个用于创建图形用户界面（GUI）的Python库。它是基于Qt库的，Qt是一个用于创建跨平台应用程序的

    2024年02月08日
    浏览(57)
  • 【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题

    【VSCode | 主题】推荐几个适合看 C/C++ 代码的 VSCode 主题

    从 source insight 转到 VSCode 的一个好处就是，VSCode有很多主题插件。本文就介绍一些自己觉得适合看C/C++代码的好看的主题。接下来就看看有哪些主题，其中有没有你喜欢的。 注意：如果阅读代码使用的是 C/C++ 插件的话，它会的智能识别功能会默认给代码着色，结果会使代码看

    2024年02月12日
    浏览(41)

  • Wokiee多用途Shopify主题下载，打造卓越电子商务网站

    在如今竞争激烈的电子商务市场，拥有一个卓越的网站设计是吸引用户和增加销售的关键。Wokiee多用途Shopify主题将成为您实现这一目标的利器。它提供了丰富的功能和灵活的设计选项，帮助您打造一个令人印象深刻的电子商务网站。立即下载Wokiee主题，将您的在线业务推向新

    2024年02月09日
    浏览(42)
  • Android打造丝滑的Activity recreate重建（主题切换）过渡动画

    Android打造丝滑的Activity recreate重建（主题切换）过渡动画

    当应用程序支持多种语言或主题时，切换语言或主题通常需要重新启动 Activity 以重新加载配置。虽然 recreate 是一种常用的重建 Activity 方法，但它不支持像在 Activity 之间切换时那样使用过渡动画。特别是在切换 浅色/深色 主题时，由于缺乏过渡动画而显得很生硬。为了提升改

    2024年02月22日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包