实战：定制一款编辑&amp；阅读超级舒适的typora主题-2021.12.04

最新推荐文章于 2025-03-26 21:09:23 发布

一念一生～one

最新推荐文章于 2025-03-26 21:09:23 发布

阅读量9.4w

点赞数 35

分类专栏： typora 云笔记文章标签： typora 云笔记

本文链接：https://blog.csdn.net/weixin_39246554/article/details/121716799

版权

typora 同时被 2 个专栏收录

11 篇文章

订阅专栏

云笔记

5 篇文章

订阅专栏

实战：定制一款编辑&阅读超级舒适的typora主题-2021.12.04

文档更新时间

时间	备注
2021年12月4日15:24:39	创建文档

typora.css主题迭代版本

当前最新版本为：lovexyy-2021.12.04-v1.css

链接：https://pan.baidu.com/s/18mlGL-Cf3UIVnKQyk9nLrw
提取码：0owt
–来自百度网盘超级会员V6的分享

本文已在github开源

关于本篇文章，已开源到github，大家可在github上访问本篇文章，后续也将持续更新……😊

https://github.com/OnlyOnexl/typora-custom-theme

实验环境

win10
typora

实验软件

1、什么是markdown

1、Markdown 是什么

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们「使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档」—— 维基百科

如果你看不懂以上维基百科对 Markdown 的定义，就当这段掐了没播。约翰·格鲁伯自己对Markdown的描述的重点也在于 「easy-to-read，easy-to-write」。

2、那么到底 easy 在哪里呢

虽然称作「标记语言」，但简单理解 Markdown 就是在文本前增加符号来表示文本格式。你不需要关心标题多大号，列表缩进多少，是否对齐，只要使用了同一种符号标记，Markdown 已经帮你做好了排版。

无图无真相：

3、Markdown 的好处

编辑，不用操心排版你只需要把注意力放在内容上。笔者在用 Markdown 之前，打开word 先想想，标题用啥字体呢，几号字呢？不知不觉我的意志力就被消耗了。实际上所谓排版，不就是作者的思路以及内容的层级和结构么，在学会使用 Markdown 之后，几个简单的符号就把这些事儿搞定，样式还特别工整精美。
修改，不用担心排版想想那些你在同事之间改来改去的 word 文档吧，如果哪位童鞋从外部粘贴了一段带格式的文字，那么你再次打开文档时会发现整个人都不好了：格式被改的乱七八糟，还要重新调整。如果用 Markdown 群组笔记，想改哪里改哪里，根本不用担心格式，改完评论里直接 @TA，多轻松！

一句话来说，Markdown 是用最简单的方式，零排版成本，写出布局工整、阅读舒适的笔记。减少干扰，降低成本，提高效率，不管在什么设备上，看起来都是一个工整的样子。不仅自己阅读爽，分享给朋友也有面儿不是~

4、哪些牛人都在用

阳志平在 2012 年就发博客推崇了一下 Markdown，但那篇文章虽解读深刻，但也略显极客，把Markdown 不仅能排版，能做流程图，还支持数学公式的特性介绍了一遍，连科技论文都要选择 Markdown 都涉猎到了。有兴趣阅读的童鞋可点击这里（注意：这个链接目前打不开了。。）查看。
很多在线博客和内容社区都提供 Markdown 编辑器，不仅在阅读上带来了舒适、统一、美好的体验，每一个参与写作的人，也能够毫不费力地写出排版整齐的文章来。
我遇到的很多运维大佬也是采用这个typora来作为课件使用来着的！

来个小技巧：

不管我再怎么说 Markdown 的语法记忆负担小、简单，在最初你都会有点儿晕。在这里给大家分享个小技巧：

最初只需要记住 # 标题一、### 标题二、1. 第一点、* 这一点，用这几个写写日志、需求文档、小文章，排版上足够了；
逐渐的你发现有些文字需要重点指出，那么还可以使用 **加粗**、*斜体* 来对文字做重点说明；
如果你是名程序员，那么可以用 `````把代码块包起来，渲染后可以关键字高亮（666），用 > 可以做引用；

5、Markdown 格式标记符号说明(&Typora常用快捷键)

1.标题

Typora快捷键：Ctrl/Cmd + 数字 (数字可以是1到6分别代表不同级标题)

提升标题级别：ctrl +
降低标题级别：ctrl -

markdown语法：

在行首插入 1 到 6个#，分别表示标题 1 到标题 6

# 这是标题1
### 这是标题1
###### 这是标题6

点击保存后的效果：

2. 有序列表

Typora快捷键：ctrl shift [
markdown语法：

在行首增加 1.、2.、3.，即数字和英文句点, 注意句点与文字中间有空格。不要求数字一定要连续，可以都是1.

1. 有序列表
1. 有序列表
4. 有序列表

点击保存后的效果：

有序列表
有序列表
有序列表

备注：

直接在文字前面按回车后，是可以自动排序的；（无序列表也是一样的）

3. 无序列表

Typora快捷键：ctrl shift ]
markdown语法：

在行首增加 * 或 -或+与文字之间有空格

* 无序列表
- 无序列表
+ 无序列表

点击保存后的效果：

无序列表
无序列表

4. 插入图片

Typora快捷键：ctrl+shift+i
markdown语法：

可直接粘贴图片，或将图片文件拖动到光标处。

也可以使用标准的Markdown语法，如：
![](http://cdn.wiz.cn/wp-content/uploads/2015/06/wiz_logo.png)

5. 插入链接

Typora快捷键：Ctrl/Cmd + K
markdown语法：

[描述](链接地址) ，例如：[为知笔记](http://www.wiz.cn)，注意要使用英文符号

点击保存后的效果：
为知笔记

6. 粗体、斜体、删除线、下划线

Typora快捷键：
- 加粗： Ctrl/Cmd + B
- 斜体：ctrl + i
- 删除线：alt+shift+5
- 下划线：ctrl + u
markdown语法：

粗体：在文字前后添加 ** (注意符号与文字间不要有空格）
斜体：在文字前后添加 *
删除线：在文字前后添加 ~~

下划线：ctrl + u

**粗体**
*斜体*
~~删除线~~
下划线

保存后的效果：

粗体
斜体
~~删除线~~

下划线

7. 引用

Typora快捷键：
markdown语法：

在文字前添加 >

点击保存后的效果：

如果你无法简洁的表达你的想法，那只说明你还不够了解它。 – 阿尔伯特·爱因斯坦

8. 表格

**Typora快捷键：**插入表格：ctrl T
- 下方插入行：ctrl enter
- 上移该行：alt 向上箭头
- 下移该行：alt 向下箭头
- 左移该行：alt 向左箭头
- 右移该行：alt 向右箭头
markdown语法：

| 为知笔记|更新 | 版本 |
|------------|-----------|--------|
| WizNote | Markdown| Latest |

点击保存后的效果：

为知笔记	更新	版本
WizNote	Markdown	Latest

9. 代码

**Typora快捷键：**如下。
markdown语法：

先输入三个反单引号：```，然后直接回车，就会弹出代码框了：

int i = 0; i = 1; 
for (int i = 0; i < 100; i++)
{
      printf("hello markdown!\n");
}

如果需要指定语言，在开头的3个反向单引号后紧跟具体语言即可，如: ```bash （注意，这个功能很实用！！！）

yum install -y sl

或者按ctrl shift K即可弹出代码框：

啦啦啦

10. 目录

在任何你想要展示Markdown 笔记目录的地方，添加 [TOC]，在阅读模式下，标题1~6样式的内容会被提取出来作为目录，相当于大纲功能。

例如：

11.首行缩进

在需要缩进的地方加如下2个字符：
&emsp;&emsp;

爱一个人真的很痛！

真的很难忘记你。

12.分割线

连续输入3个+号，回车即可插入一个分割线：

效果如下：

+++

13.代办清单

-[x] 已完成项目1
-[x] 已完成项目2

- [ ] 代办项目1
- [ ] 代办项目2

效果如下：

已完成项目1
已完成项目2
代办项目1
代办项目2

14.Typora其他快捷键

插入公式块：ctrl shift M
清除样式：ctrl \
粘贴为纯文本：ctrl shift v
撤销： Ctrl/Cmd + Z
显示/隐藏侧边栏：ctrl + shift + L，等价于ctrl + shift + 1
搜索：ctrl+f
源代码模式：ctrl+/（很少使用）
切换全屏：F11 #再次按F11就可以退出全屏模式了；
放大、缩小、还原：
- 放大：ctrl + shift + =
- 缩小：ctrl + shift + -
- 还原：ctrl + shift + =9
应用内窗口切换：ctrl + Tab
开发者工具：shift + F12
表情和符号：windows + 句号

建议平常写作时，使用快捷键，使用快捷键，使用快捷键，语法了解即可。
注意：Typora快捷键可以在菜单里查看：

2、什么是typora及其常用配置

写Markdown费事？Typora让你像写word一样行云流水，所见即所得。

1、什么是typora

Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。
Markdown的语法因不同的解析器或编辑器而异，Typora使用的是GitHub Flavored Markdown。

2、下载

Typora下载

3、优点

📍 所见即所得

通常 MD 编辑器，是左边编辑，右边预览，而typora是直接你写啥直接渲染，不搞双栏。

从现在（2021年）的视角来看，这种所见即所得，即使放到现在，也没有能打的对手，更不用说在当时，有多前卫了。

不用传统的双栏模式，更符合编写习惯。

📍 足够开放

相比众多 Markdown 编辑器，例如 MWeb，Bear ，Typora 的主题允许自行定义，只要你懂点 CSS

如下是我基于少数派的主题改过的 Typora 个人主题，和公众号的排版保质一致。

📍 足够简单

Typora 对内容不过多的干预，不需要注册帐号，数据全部存在本地，没有同步机制（在我看来，这算优点）

📍 图床支持

可对接 iPic、uPic 和 PicGo 等知名图床工具，而且还支持 Custom Comand ，这点对于集成更多第三方插件提供了便利！

📍 版本管理

记得有一次，我在写一篇一万多字的文章时（是真的一万多字，不包含代码），不小心删除了文章内容，无论怎么 Command + z 回退都没用，最后在版本管理这边找到了历史版本，有惊无险。

版本管理，对于文章来说，平时可能用不太着，但要是碰到特殊情况，它就显得非常非常重要。(windows软件貌似没找到这个功能……)

📍 新版本更新了什么？

那么 1.0 的这个付费版本，到底更新了什么史诗级的新功能呢？能让作者将其做为第一个付费版本发布？

我去 CHANGELOG 上瞄了一眼，“平平无奇” 得让我有点不敢相信这就是付费版本。

总结起来，就两点：

支持 ARM 版本 Windows 和 Linux
在编辑数学公式时提供开关来支持是否开启使用 \ 来换行

新版本有 15 天的试用期，最后一个免费版本是 0.11.18，可以点这里下载（失效了的话可以加我微信获取！）

Linux：https://wwe.lanzoui.com/igFedwzagle
MacOS：https://wwe.lanzoui.com/ip9ijwzagpi
Windows：https://wwe.lanzoui.com/i8PP3wzahrg

不过作者在 What’s New? 上特别感谢了这么多年来一直使用 Typora 并且帮助 Typora 变得更好的测试者

而最值得一提的，可能很多人还不知道，其实 Typora 是一款国人开发的软件。

作者是 Abner Lee，在互联网上没有太多作者的介绍，我在知乎上有找到作者的帐号，不过动态非常少，唯一和 Typora 相关的动态是下面这个回答。

可见作者一直在用心做产品，把产品做好了，就不需要太多的营销手段， Typora 到今天能如此成功，真的是依靠口口相传的口碑。

最重要的是，作者能坚持 6 年用爱发电，就凭这个，即使 1.0 版本并没有太多亮眼的新特性，我也愿意为它付费！

📍 typora收费情况

在本地使用最多的就是Typora这款软件，之前一直是免费测试版本，最近终于发布了正式版本，下面是明哥对正式版本的分享，致热爱创作或分享的我们。

在 2021.11月23日，Typora 正式发布 1.0 版本，进入了付费时代。

1.0 版本是一次性付费而非订阅的，只要支付人民币 89 元，可以在 3 台设备里使用。

有的人，可能会说：辣鸡，我用了这么多年，都用习惯了，终于要开割了吗？

其实不然，Typora 一直没有开源，更没有承诺过终身免费，因此对于收费这件事来说，虽说突然，但却也一点不意外。

4、Typora常见配置

1.本地编辑md文件一般配置方法

默认情况，Typora软件会把粘贴进去的图片copy到pc c盘的一个目录下面；

因此，我们会推荐采用使用相对路径来存放当前md文件里的图片；

./${filename}_md_pictures  #这个代表如何md文件里面有插入图片的话，typora会在该文件的当前目录下生成一个同名目录来专门存放图片数据的

2.配置自动保存功能

3.更改字体、大小、颜色、背景色

（1）更改字体、大小、颜色

我是黑体字我是微软雅黑我是华文彩云我是红色我是绿色我是蓝色我是尺寸我是黑体，绿色，尺寸为5

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>

<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>

<font size=5>我是尺寸</font>

<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>

（2）更改背景色

01、

背景色red

<table><tr><td bgcolor=red>背景色red</td></tr></table>

02、

文字

<span style='color:yellow;background:red;font-size:文字大小;font-family:字体;'>文字</span>

3.侧边栏的大纲视图允许折叠和展开

4.picgo如果配置的是阿里云oss图床的话，那么很轻松可以在typora里一次性上传本地所有图片的；-20211107(已完成)`完美`

注意：前提是oss里的图片名称不能存在，否则会上传报错的！！！

5.TS：typora导出word方法(成功测试)？-2021.4.28

安装完pandoc后，重启typora软件，再次导出即可：

6.TS：我淦-typora的代码出现了格式问题-2021.11.30

1、问题现象

我淦，typora的代码快里的代码出现了换行乱序问题。。。好无语。。。

奇怪的是：一篇文章里，有的代码块里的代码乱序了，有的没乱序，这个就很奇怪了。。。

2、排查过程

⚠️

重新在一个新winodws环境安装typora后，其默认的换行是CRLF，缩进是2。

自己之前重新修改过typora的设置，修改结果为：换行是LF，缩进是4。

个人判断就是这个原因导致的结果。。。

typora安装后默认的换行符及缩进：

个人typora故障时自己的环境

自己现在的版本是正式版本：1.0.2，之前老的版本也偶尔看到了这个问题。。

3、解决办法

将自己现在的2个笔记本的typora软件的换行符和缩进全部改成默认属性
下次再进行大量赋值粘贴后，必须查看代码是否存在乱序问题；

4、验证效果

修改为原来安装属性后，我们来确认下是否会对最近编写的文档里的代码是否有影响？

这里随机查看下2个文档：

随机查看了2个文档，格式都是没任何问题的。

这个遗留问题后续再观察现象即可。

7.

5、typora图标(666)

typora图标(typora真的666啊)

1.people

😄 :smile:	|😆 :laughing:	 
😊 :blush:	😃 :smiley:	☺️ :relaxed:
😏 :smirk:	😍 :heart_eyes:	😘 :kissing_heart:
😚 :kissing_closed_eyes:	😳 :flushed:	😌 :relieved:
😆 :satisfied:	😁 :grin:	😉 :wink:
😜 :stuck_out_tongue_winking_eye:	😝 :stuck_out_tongue_closed_eyes:	😀 :grinning:
😗 :kissing:	😙 :kissing_smiling_eyes:	😛 :stuck_out_tongue:
😴 :sleeping:	😟 :worried:	😦 :frowning:
😧 :anguished:	😮 :open_mouth:	😬 :grimacing:
😕 :confused:	😯 :hushed:	😑 :expressionless:
😒 :unamused:	😅 :sweat_smile:	😓 :sweat:
😥 :disappointed_relieved:	😩 :weary:	😔 :pensive:
😞 :disappointed:	😖 :confounded:	😨 :fearful:
😰 :cold_sweat:	😣 :persevere:	😢 :cry:
😭 :sob:	😂 :joy:	😲 :astonished:
😱 :scream:	 	😫 :tired_face:
😠 :angry:	😡 :rage:	😤 :triumph:
😪 :sleepy:	😋 :yum:	😷 :mask:
😎 :sunglasses:	😵 :dizzy_face:	👿 :imp:
😈 :smiling_imp:	😐 :neutral_face:	😶 :no_mouth:
😇 :innocent:	👽 :alien:	💛 :yellow_heart:
💙 :blue_heart:	💜 :purple_heart:	❤️ :heart:
💚 :green_heart:	💔 :broken_heart:	💓 :heartbeat:
💗 :heartpulse:	💕 :two_hearts:	💞 :revolving_hearts:
💘 :cupid:	💖 :sparkling_heart:	✨ :sparkles:
⭐️ :star:	🌟 :star2:	💫 :dizzy:
💥 :boom:	💥 :collision:	💢 :anger:
❗️ :exclamation:	❓ :question:	❕ :grey_exclamation:
❔ :grey_question:	💤 :zzz:	💨 :dash:
💦 :sweat_drops:	🎶 :notes:	🎵 :musical_note:
🔥 :fire:	💩 :hankey:	💩 :poop:
💩 :shit:	👍 :+1:	👍 :thumbsup:
👎 :-1:	👎 :thumbsdown:	👌 :ok_hand:
👊 :punch:	👊 :facepunch:	✊ :fist:
✌️ :v:	👋 :wave:	✋ :hand:
✋ :raised_hand:	👐 :open_hands:	☝️ :point_up:
👇 :point_down:	👈 :point_left:	👉 :point_right:
🙌 :raised_hands:	🙏 :pray:	👆 :point_up_2:
👏 :clap:	💪 :muscle:	🤘 :metal:
🖕 :fu:	🚶 :walking:	🏃 :runner:
🏃 :running:	👫 :couple:	👪 :family:
👬 :two_men_holding_hands:	👭 :two_women_holding_hands:	💃 :dancer:
👯 :dancers:	🙆 :ok_woman:	🙅 :no_good:
💁 :information_desk_person:	🙋 :raising_hand:	👰 :bride_with_veil:
🙎 :person_with_pouting_face:	🙍 :person_frowning:	🙇 :bow:
:couplekiss: :couplekiss:	💑 :couple_with_heart:	💆 :massage:
💇 :haircut:	💅 :nail_care:	👦 :boy:
👧 :girl:	👩 :woman:	👨 :man:
👶 :baby:	👵 :older_woman:	👴 :older_man:
👱 :person_with_blond_hair:	👲 :man_with_gua_pi_mao:	👳 :man_with_turban:
👷 :construction_worker:	👮 :cop:	👼 :angel:
👸 :princess:	😺 :smiley_cat:	😸 :smile_cat:
😻 :heart_eyes_cat:	😽 :kissing_cat:	😼 :smirk_cat:
🙀 :scream_cat:	😿 :crying_cat_face:	😹 :joy_cat:
😾 :pouting_cat:	👹 :japanese_ogre:	👺 :japanese_goblin:
🙈 :see_no_evil:	🙉 :hear_no_evil:	🙊 :speak_no_evil:
💂 :guardsman:	💀 :skull:	🐾 :feet:
👄 :lips:	💋 :kiss:	💧 :droplet:
👂 :ear:	👀 :eyes:	👃 :nose:
👅 :tongue:	💌 :love_letter:	👤 :bust_in_silhouette:
👥 :busts_in_silhouette:	💬 :speech_balloon:	💭 :thought_balloon:
Nature
☀️ :sunny:	☔️ :umbrella:	☁️ :cloud:
❄️ :snowflake:	⛄️ :snowman:	⚡️ :zap:
🌀 :cyclone:	🌁 :foggy:	🌊 :ocean:
🐱 :cat:	🐶 :dog:	🐭 :mouse:
🐹 :hamster:	🐰 :rabbit:	🐺 :wolf:
🐸 :frog:	🐯 :tiger:	🐨 :koala:
🐻 :bear:	🐷 :pig:	🐽 :pig_nose:
🐮 :cow:	🐗 :boar:	🐵 :monkey_face:
🐒 :monkey:	🐴 :horse:	🐎 :racehorse:
🐫 :camel:	🐑 :sheep:	🐘 :elephant:
🐼 :panda_face:	🐍 :snake:	🐦 :bird:
🐤 :baby_chick:	🐥 :hatched_chick:	🐣 :hatching_chick:
🐔 :chicken:	🐧 :penguin:	🐢 :turtle:
🐛 :bug:	🐝 :honeybee:	🐜 :ant:
🐞 :beetle:	🐌 :snail:	🐙 :octopus:
🐠 :tropical_fish:	🐟 :fish:	🐳 :whale:
🐋 :whale2:	🐬 :dolphin:	🐄 :cow2:
🐏 :ram:	🐀 :rat:	🐃 :water_buffalo:
🐅 :tiger2:	🐇 :rabbit2:	🐉 :dragon:
🐐 :goat:	🐓 :rooster:	🐕 :dog2:
🐖 :pig2:	🐁 :mouse2:	🐂 :ox:
🐲 :dragon_face:	🐡 :blowfish:	🐊 :crocodile:
🐪 :dromedary_camel:	🐆 :leopard:	🐈 :cat2:
🐩 :poodle:	🐾 :paw_prints:	💐 :bouquet:
🌸 :cherry_blossom:	🌷 :tulip:	🍀 :four_leaf_clover:
🌹 :rose:	🌻 :sunflower:	🌺 :hibiscus:
🍁 :maple_leaf:	🍃 :leaves:	🍂 :fallen_leaf:
🌿 :herb:	🍄 :mushroom:	🌵 :cactus:
🌴 :palm_tree:	🌲 :evergreen_tree:	🌳 :deciduous_tree:
🌰 :chestnut:	🌱 :seedling:	🌼 :blossom:
🌾 :ear_of_rice:	🐚 :shell:	🌐 :globe_with_meridians:
🌞 :sun_with_face:	🌝 :full_moon_with_face:	🌚 :new_moon_with_face:
🌑 :new_moon:	🌒 :waxing_crescent_moon:	🌓 :first_quarter_moon:
🌔 :waxing_gibbous_moon:	🌕 :full_moon:	🌖 :waning_gibbous_moon:
🌗 :last_quarter_moon:	🌘 :waning_crescent_moon:	🌜 :last_quarter_moon_with_face:
🌛 :first_quarter_moon_with_face:	🌔 :moon:	🌍 :earth_africa:
🌎 :earth_americas:	🌏 :earth_asia:	🌋 :volcano:
🌌 :milky_way:	⛅️ :partly_sunny:	 
Object
🎍 :bamboo:	💝 :gift_heart:	🎎 :dolls:
🎒 :school_satchel:	🎓 :mortar_board:	🎏 :flags:
🎆 :fireworks:	🎇 :sparkler:	🎐 :wind_chime:
🎑 :rice_scene:	🎃 :jack_o_lantern:	👻 :ghost:
🎅 :santa:	🎄 :christmas_tree:	🎁 :gift:
🔔 :bell:	🔕 :no_bell:	🎋 :tanabata_tree:
🎉 :tada:	🎊 :confetti_ball:	🎈 :balloon:
🔮 :crystal_ball:	💿 :cd:	📀 :dvd:
💾 :floppy_disk:	📷 :camera:	📹 :video_camera:
🎥 :movie_camera:	💻 :computer:	📺 :tv:
📱 :iphone:	☎️ :phone:	☎️ :telephone:
📞 :telephone_receiver:	📟 :pager:	📠 :fax:
💽 :minidisc:	📼 :vhs:	🔉 :sound:
🔈 :speaker:	🔇 :mute:	📢 :loudspeaker:
📣 :mega:	⌛️ :hourglass:	⏳ :hourglass_flowing_sand:
⏰ :alarm_clock:	⌚️ :watch:	📻 :radio:
📡 :satellite:	➿ :loop:	🔍 :mag:
🔎 :mag_right:	🔓 :unlock:	🔒 :lock:
🔏 :lock_with_ink_pen:	🔐 :closed_lock_with_key:	🔑 :key:
💡 :bulb:	🔦 :flashlight:	🔆 :high_brightness:
🔅 :low_brightness:	🔌 :electric_plug:	🔋 :battery:
📲 :calling:	✉️ :email:	📫 :mailbox:
📮 :postbox:	🛀 :bath:	🛁 :bathtub:
🚿 :shower:	🚽 :toilet:	🔧 :wrench:
🔩 :nut_and_bolt:	🔨 :hammer:	💺 :seat:
💰 :moneybag:	💴 :yen:	💵 :dollar:
💷 :pound:	💶 :euro:	💳 :credit_card:
💸 :money_with_wings:	📧 :e-mail:	📥 :inbox_tray:
📤 :outbox_tray:	✉️ :envelope:	📨 :incoming_envelope:
📯 :postal_horn:	📪 :mailbox_closed:	📬 :mailbox_with_mail:
📭 :mailbox_with_no_mail:	🚪 :door:	🚬 :smoking:
💣 :bomb:	🔫 :gun:	🔪 :hocho:
💊 :pill:	💉 :syringe:	📄 :page_facing_up:
📃 :page_with_curl:	📑 :bookmark_tabs:	📊 :bar_chart:
📈 :chart_with_upwards_trend:	📉 :chart_with_downwards_trend:	📜 :scroll:
📋 :clipboard:	📆 :calendar:	📅 :date:
📇 :card_index:	📁 :file_folder:	📂 :open_file_folder:
✂️ :scissors:	📌 :pushpin:	📎 :paperclip:
✒️ :black_nib:	✏️ :pencil2:	📏 :straight_ruler:
📐 :triangular_ruler:	📕 :closed_book:	📗 :green_book:
📘 :blue_book:	📙 :orange_book:	📓 :notebook:
📔 :notebook_with_decorative_cover:	📒 :ledger:	📚 :books:
🔖 :bookmark:	📛 :name_badge:	🔬 :microscope:
🔭 :telescope:	📰 :newspaper:	🏈 :football:
🏀 :basketball:	⚽️ :soccer:	⚾️ :baseball:
🎾 :tennis:	🎱 :8ball:	🏉 :rugby_football:
🎳 :bowling:	⛳️ :golf:	🚵 :mountain_bicyclist:
🚴 :bicyclist:	🏇 :horse_racing:	🏂 :snowboarder:
🏊 :swimmer:	🏄 :surfer:	🎿 :ski:
♠️ :spades:	♥️ :hearts:	♣️ :clubs:
♦️ :diamonds:	💎 :gem:	💍 :ring:
🏆 :trophy:	🎼 :musical_score:	🎹 :musical_keyboard:
🎻 :violin:	👾 :space_invader:	🎮 :video_game:
🃏 :black_joker:	🎴 :flower_playing_cards:	🎲 :game_die:
🎯 :dart:	🀄️ :mahjong:	🎬 :clapper:
📝 :memo:	📝 :pencil:	📖 :book:
🎨 :art:	🎤 :microphone:	🎧 :headphones:
🎺 :trumpet:	🎷 :saxophone:	🎸 :guitar:
👞 :shoe:	👡 :sandal:	👠 :high_heel:
💄 :lipstick:	👢 :boot:	👕 :shirt:
👕 :tshirt:	👔 :necktie:	👚 :womans_clothes:
👗 :dress:	🎽 :running_shirt_with_sash:	👖 :jeans:
👘 :kimono:	👙 :bikini:	🎀 :ribbon:
🎩 :tophat:	👑 :crown:	👒 :womans_hat:
👞 :mans_shoe:	🌂 :closed_umbrella:	💼 :briefcase:
👜 :handbag:	👝 :pouch:	👛 :purse:
👓 :eyeglasses:	🎣 :fishing_pole_and_fish:	☕️ :coffee:
🍵 :tea:	🍶 :sake:	🍼 :baby_bottle:
🍺 :beer:	🍻 :beers:	🍸 :cocktail:
🍹 :tropical_drink:	🍷 :wine_glass:	🍴 :fork_and_knife:
🍕 :pizza:	🍔 :hamburger:	🍟 :fries:
🍗 :poultry_leg:	🍖 :meat_on_bone:	🍝 :spaghetti:
🍛 :curry:	🍤 :fried_shrimp:	🍱 :bento:
🍣 :sushi:	🍥 :fish_cake:	🍙 :rice_ball:
🍘 :rice_cracker:	🍚 :rice:	🍜 :ramen:
🍲 :stew:	🍢 :oden:	🍡 :dango:
🥚 :egg:	🍞 :bread:	🍩 :doughnut:
🍮 :custard:	🍦 :icecream:	🍨 :ice_cream:
🍧 :shaved_ice:	🎂 :birthday:	🍰 :cake:
🍪 :cookie:	🍫 :chocolate_bar:	🍬 :candy:
🍭 :lollipop:	🍯 :honey_pot:	🍎 :apple:
🍏 :green_apple:	🍊 :tangerine:	🍋 :lemon:
🍒 :cherries:	🍇 :grapes:	🍉 :watermelon:
🍓 :strawberry:	🍑 :peach:	🍈 :melon:
🍌 :banana:	🍐 :pear:	🍍 :pineapple:
🍠 :sweet_potato:	🍆 :eggplant:	🍅 :tomato:
🌽 :corn:

2.Places

🏠 :house:	🏡 :house_with_garden:	🏫 :school:
🏢 :office:	🏣 :post_office:	🏥 :hospital:
🏦 :bank:	🏪 :convenience_store:	🏩 :love_hotel:
🏨 :hotel:	💒 :wedding:	⛪️ :church:
🏬 :department_store:	🏤 :european_post_office:	🌇 :city_sunrise:
🌆 :city_sunset:	🏯 :japanese_castle:	🏰 :european_castle:
⛺️ :tent:	🏭 :factory:	🗼 :tokyo_tower:
🗾 :japan:	🗻 :mount_fuji:	🌄 :sunrise_over_mountains:
🌅 :sunrise:	🌠 :stars:	🗽 :statue_of_liberty:
🌉 :bridge_at_night:	🎠 :carousel_horse:	🌈 :rainbow:
🎡 :ferris_wheel:	⛲️ :fountain:	🎢 :roller_coaster:
🚢 :ship:	🚤 :speedboat:	⛵️ :boat:
⛵️ :sailboat:	🚣 :rowboat:	⚓️ :anchor:
🚀 :rocket:	✈️ :airplane:	🚁 :helicopter:
🚂 :steam_locomotive:	🚊 :tram:	🚞 :mountain_railway:
🚲 :bike:	🚡 :aerial_tramway:	🚟 :suspension_railway:
🚠 :mountain_cableway:	🚜 :tractor:	🚙 :blue_car:
🚘 :oncoming_automobile:	🚗 :car:	🚗 :red_car:
🚕 :taxi:	🚖 :oncoming_taxi:	🚛 :articulated_lorry:
🚌 :bus:	🚍 :oncoming_bus:	🚨 :rotating_light:
🚓 :police_car:	🚔 :oncoming_police_car:	🚒 :fire_engine:
🚑 :ambulance:	🚐 :minibus:	🚚 :truck:
🚋 :train:	🚉 :station:	🚆 :train2:
🚅 :bullettrain_front:	🚄 :bullettrain_side:	🚈 :light_rail:
🚝 :monorail:	🚃 :railway_car:	🚎 :trolleybus:
🎫 :ticket:	⛽️ :fuelpump:	🚦 :vertical_traffic_light:
🚥 :traffic_light:	⚠️ :warning:	🚧 :construction:
🔰 :beginner:	🏧 :atm:	🎰 :slot_machine:
🚏 :busstop:	💈 :barber:	♨️ :hotsprings:
🏁 :checkered_flag:	🎌 :crossed_flags:	🏮 :izakaya_lantern:
🗿 :moyai:	🎪 :circus_tent:	🎭 :performing_arts:
📍 :round_pushpin:	🚩 :triangular_flag_on_post:	🇯🇵 :jp:
🇰🇷 :kr:	🇨🇳 :cn:	🇺🇸 :us:
🇫🇷 :fr:	🇪🇸 :es:	🇮🇹 :it:
🇷🇺 :ru:	🇬🇧 :gb:	🇬🇧 :uk:
🇩🇪 :de:

3.Symbols

1️⃣ :one:	2️⃣ :two:	3️⃣ :three:
4️⃣ :four:	5️⃣ :five:	6️⃣ :six:
7️⃣ :seven:	8️⃣ :eight:	9️⃣ :nine:
🔟 :keycap_ten:	🔢 :1234:	0️⃣ :zero:
#️⃣ :hash:	🔣 :symbols:	◀️ :arrow_backward:
⬇️ :arrow_down:	▶️ :arrow_forward:	⬅️ :arrow_left:
🔠 :capital_abcd:	🔡 :abcd:	🔤 :abc:
↙️ :arrow_lower_left:	↘️ :arrow_lower_right:	➡️ :arrow_right:
⬆️ :arrow_up:	↖️ :arrow_upper_left:	↗️ :arrow_upper_right:
⏬ :arrow_double_down:	⏫ :arrow_double_up:	🔽 :arrow_down_small:
⤵️ :arrow_heading_down:	⤴️ :arrow_heading_up:	↩️:leftwards_arrow_with_hook:
↪️ :arrow_right_hook:	↔️ :left_right_arrow:	↕️ :arrow_up_down:
🔼 :arrow_up_small:	🔃 :arrows_clockwise:	🔄 :arrows_counterclockwise:
⏪ :rewind:	⏩ :fast_forward:	ℹ️ :information_source:
🆗 :ok:	🔀 :twisted_rightwards_arrows:	🔁 :repeat:
🔂 :repeat_one:	🆕 :new:	🔝 :top:
🆙 :up:	🆒 :cool:	🆓 :free:
🆖 :ng:	🎦 :cinema:	🈁 :koko:
📶 :signal_strength:	🈹 :u5272:	🈴 :u5408:
🈺 :u55b6:	🈯️ :u6307:	🈷️ :u6708:
🈶 :u6709:	🈵 :u6e80:	🈚️ :u7121:
🈸 :u7533:	🈳 :u7a7a:	🈲 :u7981:
🈂️ :sa:	🚻 :restroom:	🚹 :mens:
🚺 :womens:	🚼 :baby_symbol:	🚭 :no_smoking:
🅿️ :parking:	♿️ :wheelchair:	🚇 :metro:
🛄 :baggage_claim:	🉑 :accept:	🚾 :wc:
🚰 :potable_water:	🚮 :put_litter_in_its_place:	㊙️ :secret:
㊗️ :congratulations:	Ⓜ️ :m:	🛂 :passport_control:
🛅 :left_luggage:	🛃 :customs:	🉐 :ideograph_advantage:
🆑 :cl:	🆘 :sos:	🆔 :id:
🚫 :no_entry_sign:	🔞 :underage:	📵 :no_mobile_phones:
🚯 :do_not_litter:	🚱 :non-potable_water:	🚳 :no_bicycles:
🚷 :no_pedestrians:	🚸 :children_crossing:	⛔️ :no_entry:
✳️ :eight_spoked_asterisk:	✴️ :eight_pointed_black_star:	💟 :heart_decoration:
🆚 :vs:	📳 :vibration_mode:	📴 :mobile_phone_off:
💹 :chart:	💱 :currency_exchange:	♈️ :aries:
♉️ :taurus:	♊️ :gemini:	♋️ :cancer:
♌️ :leo:	♍️ :virgo:	♎️ :libra:
♏️ :scorpius:	♐️ :sagittarius:	♑️ :capricorn:
♒️ :aquarius:	♓️ :pisces:	⛎ :ophiuchus:
🔯 :six_pointed_star:	❎:negative_squared_cross_mark:	🅰️ :a:
🅱️ :b:	🆎 :ab:	🅾️ :o2:
💠:diamond_shape_with_a_dot_inside:	♻️ :recycle:	🔚 :end:
🔛 :on:	🔜 :soon:	🕐 :clock1:
🕜 :clock130:	🕙 :clock10:	🕥 :clock1030:
🕚 :clock11:	🕦 :clock1130:	🕛 :clock12:
🕧 :clock1230:	🕑 :clock2:	🕝 :clock230:
🕒 :clock3:	🕞 :clock330:	🕓 :clock4:
🕟 :clock430:	🕔 :clock5:	🕠 :clock530:
🕕 :clock6:	🕡 :clock630:	🕖 :clock7:
🕢 :clock730:	🕗 :clock8:	🕣 :clock830:
🕘 :clock9:	🕤 :clock930:	💲 :heavy_dollar_sign:
©️ :copyright:	®️ :registered:	™️ :tm:
❌ :x:	❗️ :heavy_exclamation_mark:	‼️ :bangbang:
⁉️ :interrobang:	⭕️ :o:	✖️ :heavy_multiplication_x:
➕ :heavy_plus_sign:	➖ :heavy_minus_sign:	➗ :heavy_division_sign:
💮 :white_flower:	💯 :100:	✔️ :heavy_check_mark:
☑️ :ballot_box_with_check:	🔘 :radio_button:	🔗 :link:
➰ :curly_loop:	〰️ :wavy_dash:	〽️ :part_alternation_mark:
🔱 :trident:	:black_square: :black_square:	:white_square: :white_square:
✅ :white_check_mark:	🔲 :black_square_button:	🔳 :white_square_button:
⚫️ :black_circle:	⚪️ :white_circle:	🔴 :red_circle:
🔵 :large_blue_circle:	🔷 :large_blue_diamond:	🔶 :large_orange_diamond:
🔹 :small_blue_diamond:	🔸 :small_orange_diamond:	🔺 :small_red_triangle:
🔻 :small_red_triangle_down:

3、定制一款编辑&阅读超级舒适的typora主题

1、最新版typora主题版本css文件

lovexyy-2021.12.04-v1

💖 使用方法：将这个主题文件放到typora的主体路径下，重启typora即可

最终效果如下：

关于云笔记的搭建及使用方法可参考我的开源项目：https://github.com/OnlyOnexl/Typora-TheKingOfCloudNotes

2、typora主题定制细节

📌定义的是界面颜色、文字颜色(配置护眼绿)：`root字段`(已完成)

#说明
root里定义的是界面颜色、文字颜色等。

text-color：文字颜色
bg-color：背景颜色
code-block-bg-color：代码块颜色
side-bar-bg-color：文件夹、大纲处的颜色
window-border：窗口边界颜色

案例1

:root {
    --text-color: #666;
    --bg-color: #fff;
    --code-block-bg-color: #4d4d4d;
    --side-bar-bg-color: #fdf6f5;
    --window-border: 1px solid #555;
    
    --active-file-bg-color: #fff;
    --active-file-text-color: #666;
    --item-hover-text-color: #666;
    --control-text-color: #777;
    }

效果图如下：

案例2

:root {
    --side-bar-bg-color: #c7e6c8;
    --control-text-color: #777;
	#background-color: #c7edcc;
	background: url('./bg_image/v-34.png')  repeat
}

是600*600大小的图片：

效果如下：

完美。

📌正文字体大小及字体类型(配置好看的字体)配置：`body字段`(已完成)

案例

html {
    font-size: 18px;
}

body {
    font-family: "华康手札体W5P",'Microsoft YaHei',"SimSun","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

效果

📌定制typora主题css文件

使用typora的时候，想要自定义一些颜色、字体，或者修改一些设置，这个时候需要修改或者自己编写css文件。

打开文件 - 偏好设置 - 外观 - 打开主题文件夹，选择你自己的主题名.css（默认是 Github.css），在最后插入 CSS 代码，保存退出，再次打开typora文件即可；

📌正文字体大小及字体类型配置：`font`(已完成)

配置方法

/* 正文字体大小及字体类型配置 */
html {
    font-size: 16px;
}
body {
    font-family: "华康手札体W5P", "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    /*color: rgb(51, 51, 51);*/
    background-color: mintcream; /*正文背景颜色*/
    color: rgb(51, 51, 51); /*正文字体颜色*/
    line-height: 1.6;
}

配置效果

1.css主题：

📌设置图片默认左对齐：`image`(已完成)

默认情况，Typora的图片是居中对齐的。
现在有个需求，想让每次哦插入的图片都默认做对齐，该如何实现呢？
设置方法

打开文件 - 偏好设置 - 外观 - 打开主题文件夹，选择你自己的主题名.css（默认是 Github.css），在最后插入 CSS 代码，保存退出，再次打开typora文件即可：
```
/*设置图片默认左对齐：在css文件末尾追加即可*/
p .md-image:only-child{
    width: auto;
    text-align: left;
    }
```
观察效果

符合预期效果。

📌引用段落：`quote`(已完成)

修改位置

blockquote {
    border-left: 4px solid #8080ff; /*侧边小竖条的颜色 */
    padding: 0 15px;
    color: black; /*引用段落字体颜色*/
    background-color: #deb887; /*引用段落背景颜色*/
}

效果如下

引用段落。

📌修改typora编辑区域左右间距方法：`write`(已完成)

配置方法

#write{
    max-width: 960px; /*注意这个是控制编辑的宽度的：可以是100%，980px；*/
    margin-top:    30px; /*top*/
    margin-bottom: 30px;
    padding: 100px 60px; /*top to title padding*/
    border-radius: 5px;
    -o-box-shadow: 0 10px 10px #333333;
    -webkit-box-shadow: 0 10px 10px #333333;
    -moz-box-shadow: 0 10px 10px #333333;
    box-shadow: 0px 50px 100px #333333;
}
#write > ul:first-child,
#write > ol:first-child{
    margin-top: 30px;
}

验证效果

📌模拟mac的三个图标：（已完成）

1.案例

/* MAC的三个图标 */
.CodeMirror-wrap .CodeMirror-scroll {
    padding-top: 20px;
}
 
#write .md-fences:before {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 13px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    float: left;
    background-color: #fa3534;
}
 
#write .CodeMirror-scroll:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 29px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    float: left;
    z-index: 999;
    background-color: #ff9900;
}
#write .md-fences::after {
    content: "";
    z-index: 4;
    display: block;
    position: absolute;
    top: 7px;
    left: 53px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    float: left;
    background-color: #19be6b;
}

效果

📌选中文字部分颜色修改：`selection`(已完成)

1.配置方法

/* 选中文字部分颜色修改 */
::selection {
    background-color: #d1ff79;
}

2.验证效果

📌修改标题颜色：`h1-h6`(已完成)

1.配置方法

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    color: #4169E1; /*配置h1-h6级标题颜色*/
}

2.验证效果

📌选中文字部分颜色修改:`selection字段`(已完成)

在css文件最后添加

::selection {
    background-color: #d1ff79;
}

效果如下：

📌部分文字标红：`mark字段`(已完成)

1、配置方法

/*==背景高亮==,mark是符号==xxx==的效果*/
mark {
    background: rgb(0, 255, 85);
    color: #f22f27;
    font-weight: bold;
    border-bottom: 0px solid #ffffff;
    padding: 0.0px;
    margin: 0 0px;
  }

2、效果如下：

我爱中国

📌链接：(已配置)

1、配置方法

/* 链接 */
#write a {
    color: #f22f27;
    text-decoration: none;
    border-bottom: 1px solid #f22f27;
} 

/* 链接内容为空时直接啥也不显示，比如锚点的地方 */
#write a:empty {
  font-size: 0;
  border: none;
}

2、效果如下：

https://www.baudu.com

📌修改代码背景颜色为sublime text3的背景色：(已完成)

1、配置方法

注意：sublimet text3背景颜色的颜色代码为

background: #232323; 这个颜色为sublime text3的颜色；

/*深色背景*/
 
#write .md-fences:not([mermaid-type])  {
    padding-top: 7px;
    border-radius: 10px;
    background-color: #232323;
    color: #eeeeee;
}

2、查看效果

❓markdown nice这种好看的主体如何定制到typora里面来？

📍 实战：修改Typora默认的字体为好看秀美的中文字体华康手札体并配置一些高级定制功能(成功测试-博客输出)-2021.04.04

本次测试环境

winodws10操作系统
typora软件：0.0.98（相近版本一般都可以进行验证操作）

软件位置

1.请客官先体验下最终效果图

大家可先瞅一瞅最终修改后的效果图如何，再根据自己需求是否决定要更改为如下的字体**“华康手札体W5P”**：

个人觉得"华康手札体W5P"字体还是比较秀美的，哈哈。

2.需求产生

typora默认的那个"Open Sans"字体，自己感觉不是很美观啊，虽然可以接受，但总觉得缺了些什么。。

上次修改的Typora的微软雅黑这个字体，用了一段时间发现真的也很丑啊。。。。。（呃呃，默认的"Open Scan"字体怎么感觉和微软雅黑看起来没啥区别啊。。。。）

因此，现在想要更换一款比较好看的字体：于是，上网搜了下，找了许久，发现一个博主写的"华康手札体W5P"这个字体不错，很秀美，因此下面将实现这种需求。
本次参考博客链接如下：https://blog.csdn.net/a2352159950/article/details/108153531

因此接下来参考这个博主的博客进行自定义自己的typora字体。

3.更改方法

3.1 下载并安装"华康手札体W5P"字体

hannotate是什么字体？hannotate sc regular字体又叫手札体简常规标准体，这款字体字形清秀工整，线条流畅洒脱，笔形富于变化。

你可以百度"华康手札体W5P字体进行下载或者从如下百度云链接进行获取：

1.http://www.downcc.com/font/341067.html （但是这个虽然叫做绿色下载网站，但是下载后附带一大波软件，无语了。。。。。）
2.百度云链接：

链接：https://pan.baidu.com/s/125Hh-tqWOy1Ht-GvD_P2MQ
提取码：z6ka
复制这段内容后打开百度网盘手机App，操作更方便哦–来自百度网盘超级会员V6的分享

将压缩包解压后，直接把华康手札体w5.ttf文件复制到windows下的C:\WINDOWS\Fonts目录下即可。

3.2 修改Typora默认的字体为好看秀美的中文字体"华康手札体"

我的Typora使用的是github这个主题(不同的主题只需要在相应的.css文件中进行同样的修改即可)，我将以它为例（这里用mac界面展示，win也是一样的）

1.首先打开typora的偏好设置，在外观中找到主题文件夹，打开这个文件夹

2.打开github.css文件

3.这里是修改字体的，找到下面的代码位置，将"华康手札体W5P"添加到下面的位置，一定要放在最前面
(注意，如果改了字体却并未生效，说明你电脑里面没有"华康手札体W5P"这个字体，可以百度搜一下手札体下载，下载解压安装，重启typora即可生效）

+++

这里需要注意：网上其实也有一些关于Typora换字体的文章，但是大多都有一个问题——中文字体无法正常显示问题。下面将详细说明如何解决这个问题；（一般是给出2中方法，推荐后面那一种）

Typora的各种属性都是在主题文件中定义的，实际上Typora就是一个带编辑功能的浏览器，其主题文件就是一个个.css文件；
知道了这一点，学过前端的朋友可能就懂了，虽然我没学过前端。。只是略懂一些网页的渲染原理;
在这个文件夹下面有几个子文件夹和几个.css文件，实际上这些css就是主题，文件名就是主题名称;

然后在下面几行有一个body里面定义了一个font-family，这个就是字体的定义了:

在 font-family 后面加一个自己的字体试试？比如 “宋体” 像这样。

注意双引号和逗号！！

重启Typora并选择github主题，你会发现字体并没有变化，这是因为typora现在并不认识中文。别的教程说的是使用字体的英文名称，比如“微软雅黑”是“Microsoft Yahei”
——这不失为一种解决方案，但是我个人认为，微软雅黑也并不好看。

所以，在花了一个下午，研究了其他的主题换字体的方式后，我发现——其他的主题也全™是用的英文。。。于是又试了很多方案，在试的过程中无意发现浏览器里面的源码里面可以有中文注释，浏览器是怎么认识中文的呢？
百度一下发现css文档前面声明字符集，浏览器就可以识别中文了，像这样

把这个github.css文件用VScode软件打开：

在VScode底端可以看到文档的字符集是GB2312，那么就在github.css首行加上：

@charset "gb2312"；

有可能我在编辑过程中不小心修改了，你的可能和我不一样，最好自己确认一下，如果你的是utf-8,那就加上:

@charset "UTF-8"；

我本次这个是utf-8：

@charset "UTF-8"；

再重启Typora看看？感染果然变成了宋体

以此类推，只要你电脑里面有的字体，就都可以用了。

下面是一些小的注意事项，建议看完。（如何刚改代码区域字体及背景色？）
上面的操作修改完，只是body的字体，也就是普通编辑区的字体变成了 “宋体” ，但是还有一些区域还是原来的，比如：

这个代码块的字体肯定不是我们设置的宋体，那么要怎么改呢？（虽然这个字体挺好看的，貌似MAC里面用的就是这种字体）
继续研究了一段时间发现，代码的字体是其他的地方限制的，在github.css的任意地方加上这一段，重启typora：

.CodeMirror div.CodeMirror-code {
    background-color: rgb(195, 195, 195);
    font-family: "宋体";
}

其中background-color是设置代码块的背景颜色，效果就是这样：

这里只是作为演示，代码块这一文字我这里就保持默认了，感觉默认挺好看的。

代码块颜色就比较突出了，怎么样？是不是很棒？

+++

按照上面方法，把字体换成本次要使用的：

重启typora查看效果：

已经更换成功，完美！！！

3.3 定制Typora高级功能

设置标题颜色：

找到下图的代码文位置，添加红色框框显示的代码，这里修改的是绿色的标题，你自己也可以设置其他颜色，可以在网上找一下rgb颜色表，找一个自己喜欢的颜色作为标题颜色:

color: rgb(26, 143, 55);

部分文字标红:

先在偏好设置中选中下面这个高亮(建议拓展语法全勾上）

然后在github.css文件最后一行加入如下代码，用的时候用左右==包围文字就可以标红了，举例：==要标红的文字==

/*==背景高亮==*/
mark {
    background: #ffffff;
    color: #db3f1e;
    font-weight: bold;
    border-bottom: 0px solid #ffffff;
    padding: 0.0px;
    margin: 0 0px;
  }

选中文字部分颜色修改

当选中一段文字之后，颜色编程如下的草绿色

在github.css中最后一行加上如下代码就可以实现了:

::selection {
    background-color: #d1ff79;
}

好了，本次改善typora到此结束了，哈哈。

欢迎点赞

4.总结

typora是一款非常好用的编辑器，可以用坚果云+typora进行自己的笔记同步备份，虽然网页端无法预览图片，但整体使用下来个人感觉还是很不错的。

多谢下面2位博主的文章，本次借鉴了他们的博客，这里表示非常感谢博主的无私分享。

参考文章：

原文链接：https://blog.csdn.net/qq_40522908/article/details/104218707

原文链接: https://blog.csdn.net/a2352159950/article/details/108153531

📍 实战：一定不能错过的 Typora 增强插件 VLOOK-2021.11.26

实战：一定不能错过的 Typora 增强插件 VLOOK-2021.11.26

软件位置

1、什么是VLOOK？

1.让Markdown的自动化排版和交互性上了N个台阶

2.内置多套原创文档主题、字体主题，一键切换，支持私人定制

3.表格排版+:单元格合并、列格式、表格行分组、自动编号…

4.零成本的图片自动排版～题注、高分屏、反色、替换、版式、…

5.火力全开的演示辅助～聚光灯、激光笔、注音…

6.OMG!可以按:大纲、逐章、段落、插图，多维度浏览文档内容

7.完美适配Dark模式，Markdown变得更Cool了

8.音/视频、标签、引用折叠、高清插图、…30+特性开箱即用

2、下载与配置

Step 1•下载与配置

a. 从 VLOOK™ 在 GitHub(https://github.com/MadMaxChow/VLOOK/releases) 或 Gitee(https://gitee.com/madmaxchow/VLOOK/releases) 的主页下载最新发布的版本
b. 也可直接在项目主页中下载主题文件(https://github.com/MadMaxChow/VLOOK/tree/master/released/theme)（备用链接
(https://gitee.com/madmaxchow/VLOOK/tree/master/released/theme)）

Step 2•安装并选择主题

b. 模板文件在哪？在目录 released 下的文件「VLOOK-Document-Template.md」，也可直接在项目主页中下载文档模板

(https://github.com/MadMaxChow/VLOOK/tree/master/released)（备用链接

(https://gitee.com/madmaxchow/VLOOK/tree/master/released)）

Step 3•应用插件

项目仓库：https://github.com/MadMaxChow/VLOOK

实际测试效果

不是很理想，图片不能展示到html出来，很奇怪。。-20210806

📍 实战：自定义Typora护眼色主题(博客输出-成功测试)-2021.3.27

1.原文链接

https://blog.csdn.net/u011622109/article/details/78313850?utm_source=blogxgwz3

2.配置方法

链接：https://pan.baidu.com/s/1q4vhIOLkhHLYaDl1Va3fFw
提取码：3qz1
复制这段内容后打开百度网盘手机App，操作更方便哦–来自百度网盘超级会员V6的分享

3.总结及改进

上述这种方法，自己已测试且有效果，但因个人爱好不同，有不同的需求，因此后续自己可以自定义样式。

主要是这个字体问题：默认主体字体是微软雅黑，但新主体字体是宋体。

在本次github默认主体，其字体应该是微软雅黑好像，看起来还是比较美观的：

但github_yuxl_bg主体中，默认字体好像是宋体，这个看起来就有些不舒服了：

测试办法1：因此，在github_yuxl_bg主体主体中直接使用默认github主体的字体，观测效果：（字体还是没改过来。。）

测试办法2：再次修改，这次换成微软雅黑的字体：终于有效果了，这次字体全部编程微软雅黑了，这个字体看着确实舒服。

'Microsoft YaHei'

因此，关于本次自定义主体github_yuxl_bg的优点如下：

背景色变成了护眼色；
标题变成了蓝色；
分割线变成了虚线；
table增加了样式；
导航大纲有高亮显示；

10.如何结合typora+坚果云实现本地笔记维护 & 结合picGo 阿里云oss来上传md笔记到csdn博客？

（1）默认情况，关闭图片上传功能：

（2）如果有上传到博客需求时，配置如下：打开上传图片到阿里云oss功能，再一键上传本地所有图片。

4.修改次主题的一级标题为左对齐

这个主体，一级标题是居中对齐的，这个有些怪，应该是可以修改css文件来着的：

本次主体css文件：

默认主体css文件：

修改这里为left后，果然变成了向左对齐了，完美：

5.如何给typora换一个优美的字体呢？

6.如何给typora换一个其他的官方主题呢？

https://theme.typora.io/

下载主题压缩包，将压缩包里边的几个文件解压到Typora的自定义主题目录，包括：
pie.css
pie-dark.css
pie（文件夹）

主题：pie

更换后效果如下：

更换主题solarized（更换后效果）

7改进：如何使这个图片居左对齐呢？

他提供的这个是居左对齐的。

请看标题5配置方法：

配置后效果如下：

关于我

我的博客主旨：我希望每一个人拿着我的博客都可以做出实验现象，先把实验做出来，然后再结合理论知识更深层次去理解技术点，这样学习起来才有乐趣和动力。并且，我的博客内容步骤是很完整的，也分享源码和实验用到的软件，希望能和大家一起共同进步！

各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人免费帮您解决问题：

个人微信二维码：x2675263825 （舍得）， qq：2675263825。
个人博客地址：www.onlyonexl.cn
个人微信公众号：云原生架构师实战
个人csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

最后

好了，关于如何定制一款编辑&阅读超级舒适的typora主题实验就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

实战：定制一款编辑&amp；阅读超级舒适的typora主题-2021.12.04

实战：定制一款编辑&阅读超级舒适的typora主题-2021.12.04

文档更新时间

typora.css主题迭代版本

目录

文章目录

本文已在github开源

实验环境

实验软件

1、什么是markdown

1、Markdown 是什么

2、那么到底 easy 在哪里呢

3、Markdown 的好处

4、哪些牛人都在用

5、Markdown 格式标记符号说明(&Typora常用快捷键)

1.标题

2. 有序列表

3. 无序列表

4. 插入图片

5. 插入链接

6. 粗体、斜体、删除线、下划线

7. 引用

8. 表格

9. 代码

10. 目录

11.首行缩进

12.分割线

13.代办清单

14.Typora其他快捷键

2、什么是typora及其常用配置

1、什么是typora

2、下载

3、优点

📍 所见即所得

📍 足够开放

📍 足够简单

📍 图床支持

📍 版本管理

📍 新版本更新了什么？

📍 typora收费情况

4、Typora常见配置

1.本地编辑md文件一般配置方法

2.配置自动保存功能

3.更改字体、大小、颜色、背景色

3.侧边栏的大纲视图允许折叠和展开

4.picgo如果配置的是阿里云oss图床的话，那么很轻松可以在typora里一次性上传本地所有图片的；-20211107(已完成)完美

5.TS：typora导出word方法(成功测试)？-2021.4.28

6.TS：我淦-typora的代码出现了格式问题-2021.11.30

1、问题现象

2、排查过程

3、解决办法

4、验证效果

7.

5、typora图标(666)

1.people

2.Places

3.Symbols

3、定制一款编辑&阅读超级舒适的typora主题

1、最新版typora主题版本css文件

2、typora主题定制细节

📌定义的是界面颜色、文字颜色(配置护眼绿)：root字段(已完成)

📌正文字体大小及字体类型(配置好看的字体)配置：body字段(已完成)

📌定制typora主题css文件

📌正文字体大小及字体类型配置：font(已完成)

📌设置图片默认左对齐：image(已完成)

📌引用段落：quote(已完成)

📌修改typora编辑区域左右间距方法：write(已完成)

📌模拟mac的三个图标：（已完成）

📌选中文字部分颜色修改：selection(已完成)

📌修改标题颜色：h1-h6(已完成)

📌选中文字部分颜色修改:selection字段(已完成)

📌部分文字标红：mark字段(已完成)

📌链接：(已配置)

📌修改代码背景颜色为sublime text3的背景色：(已完成)

❓markdown nice这种好看的主体如何定制到typora里面来？

📍 实战：修改Typora默认的字体为好看秀美的中文字体华康手札体并配置一些高级定制功能(成功测试-博客输出)-2021.04.04

本次测试环境

软件位置

1.请客官先体验下最终效果图

2.需求产生

4.picgo如果配置的是阿里云oss图床的话，那么很轻松可以在typora里一次性上传本地所有图片的；-20211107(已完成)`完美`

📌定义的是界面颜色、文字颜色(配置护眼绿)：`root字段`(已完成)

📌正文字体大小及字体类型(配置好看的字体)配置：`body字段`(已完成)

📌正文字体大小及字体类型配置：`font`(已完成)

📌设置图片默认左对齐：`image`(已完成)

📌引用段落：`quote`(已完成)

📌修改typora编辑区域左右间距方法：`write`(已完成)

📌选中文字部分颜色修改：`selection`(已完成)

📌修改标题颜色：`h1-h6`(已完成)

📌选中文字部分颜色修改:`selection字段`(已完成)

📌部分文字标红：`mark字段`(已完成)