Markdown(md)文档开发-Typora

title: Markdown(md)文档开发-Typora id: 83e58433cfac886565dff941a9956213 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

Markdown(md)文档开发-Typora

作为程序员，想要快速提升自己，就必须要做好学习记录、技术归档，不然光学的快，过段时间不用某项技术，就会忘得光光的，轻则去官网或百度再快速学一遍，重则可能一点印象都没有了。

所以做好自己的笔记很重要，这样就算忘了，通过自己的笔记，也能快速回忆起学习过程，唤醒脑子深处的被雪藏的技能，但看别人的教程，肯定就比较慢了。

我写文档的历程：

• 有道云笔记的笔记：不能展示美观的代码，比较不方便。

• 有道云笔记中的 Markdown 笔记：支持代码了，但如果不在自己电脑上，想看文档就不方便了，还在人家电脑上登录自己的有道云笔记看？

• 使用 node 的 gitbook：所有的 md 文档们编译成一个静态 html 网站，用上之前买的服务器域名什么，把自己的文档们做成了个网站，解决了不能随处查看的问题，但还有问题，就是修改开发不方便，需要打开项目 + 编辑修改 + 提交 git 并推送 + 打开自己的 Jenkins 点一下部署，还是有点麻烦。

• 博客系统：自己开发一套前端 + 后台的博客系统，其实就类似 wordpress，想着自己开发能在开发过程学点东西，就自己开发的，使用自己的密码登录后，就能编辑并更新了，但我的这个的在线编辑器并不太好用，而且编辑时光标偶尔会跳，于是平时在 vs code 中写 md，写好后复制过来提交更新。

• Typora：使用 vs code 编辑 md，慢慢的发现不太舒服，因为代码和预览左右分离，这时我已经早就知道了 Typora 这款 Md 编辑神器了，于是拿来使用。

• 很好用，现阶段就使用 Typora 写 Md，完事后再复制到我的系统中提交，然后随处打开网站，查看我的文档了。

去Typora 官网下载，软件使用介绍：哔哩哔哩「狂神说」的 Typora 讲解，几分钟视频，可以大概了解一下。

注意，现在最新版本的Typora，已经要收费了，只有半个月的试用期。

Typora 支持自定义样式，下面是我给标题们加上了序号的 css，粘贴到主题 css 文件的最后，再重启 Typora 即可生效。

/* 以下为自定义内容 */
h2 {
  counter-increment: h2;
  counter-reset: h3;
  position: relative;
  left: 0;
  top: 0;
}
h2:before {
  content: counter(h2, decimal) '.';
  margin-right: 4px;
  padding-left: 0.8em;
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.19em;
  height: 1em;
  width: 0.3em;
  background-color: #40a9ff;
}
h2::after {
  opacity: 0.8;
}
h3 {
  counter-increment: h3;
  counter-reset: h4;
  position: relative;
  left: 0;
  top: 0;
}
h3:before {
  content: counter(h3, decimal-leading-zero) '.';
  margin-right: 4px;
  padding-left: 0.8em;
}
h3::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.19em;
  height: 1em;
  width: 0.3em;
  background-color: #40a9ff;
}
h3::after {
  opacity: 0.6;
}
h4 {
  counter-increment: h4;
  counter-reset: h5;
  position: relative;
  left: 0;
  top: 0;
}
h4:before {
  content: counter(h4, upper-alpha) '.';
  margin-right: 4px;
  padding-left: 0.8em;
}
h4::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.19em;
  height: 1em;
  width: 0.3em;
  background-color: #40a9ff;
}
h4::after {
  opacity: 0.5;
}
h5 {
  counter-increment: h5;
  counter-reset: h6;
  position: relative;
  left: 0;
  top: 0;
}
h5:before {
  content: counter(h5, lower-alpha) '.';
  margin-right: 4px;
  padding-left: 0.8em;
}
h5::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.19em;
  height: 1em;
  width: 0.3em;
  background-color: #40a9ff;
}
h5::after {
  opacity: 0.2;
}
h6 {
  counter-increment: h6;
  counter-reset: h7;
  position: relative;
  left: 0;
  top: 0;
}
h6:before {
  content: counter(h6, lower-roman) '.';
  margin-right: 4px;
  padding-left: 0.8em;
}
h6::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.19em;
  height: 1em;
  width: 0.3em;
  background-color: #40a9ff;
}
h6::after {
  opacity: 0.1;
}