文章目录



  • 主题:如果说typora有什么比较独特的优点,那么可以自定义主题(可以非常之细节)是其最大的亮点.(比之于vscode中的markdown写作流)
  • 批量上传本地图片(您可以配置图床/第三方图床来管理图片,但是如果在网络不稳定的情况下,不妨暂且将图片保存在本地的某个目录下,等到网络情况较好的时候一键上传已经嵌入的本地图片(特别是可以将要分享的(或者别人分享的带有图片文件的markdown中的图片在typora中一键上传并自动替换,可以是的工作目录大为简洁)


工作流(快捷键or鼠标右键)

  • 使用鼠标右键来设定选中的内容样式是typora的一大方便
  • 配合快捷键更好
  • typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_前端

更换主题


  • typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_f5_02

获取更多主题

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_h5_03

下载主题

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_h5_04
typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_h5_05

使用主题

解压主题

  • 复制css文件
    typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_h5_06
  • 从typora open theme folder打开文件夹,将复制的css文件粘贴到打开的文件夹
    typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_编辑器_07
  • 关闭保存所有文件,并所有typora窗口
  • 重新启动typora,打开主题设置,可以看到新下载的主题
  • 应用即可

我修改的主题

  • 建议只在已有的主题文件中拷贝一份再修改,网络上的花哨主题可能使得某些字体颜色和背景过于相近,导致阅读吃力
  • 下面提供了两套主题,第一套比较简单
  • 第二套加入了css 动画和阴影,并且使得标题居中

效果1

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_css_08

(代码块颜色)问题

  • 上述主题的代码块背景会和关键字高亮颜色相近,会导致难以阅读

颜色配置(适用于浅色主题)

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_f5_09

css配置源代码

version1.1

/* 全局属性 */
#write {
  max-width: 860px;
  font-size: 16px;
  color: black;
  padding: 0 10px;
  line-height: 1.6;
  word-spacing: 0px;
  letter-spacing: 0px;
  word-break: break-word;
  word-wrap: break-word;
  text-align: left;
  font-family: "hack nerd font", 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 {
  font-size: 1.5rem;
}
#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: "h2";
  margin: 3%;
  color: rgba(47, 100, 199, 0.664);
  vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent;
}
/* #write h2 span::after {
  content: "h2";
  color: rgba(47, 100, 199, 0.664);
} */

#write h3 {
  font-size: 1.2rem;
}
#write h3:after {
  /* font-size: 1.2rem; */
  content: "h3";
  margin: 3%;
  color: rgba(47, 100, 199, 0.464);
}
#write h4 {
  font-size: 1.1rem;
}
#write h4::after {
  /* font-size: 1.1rem; */
  content: "h4";
  margin: 3%;
  color: rgba(47, 100, 199, 0.364);
}
#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;
  text-decoration: underline dotted hotpink;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 2px;
  color: rgb(68, 70, 134);
  background-color: rgba(27, 31, 35, 0.01);
  /* font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; */
  word-break: break-all;
}

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

#write span img {
  display: inline-block;
  border-right: 0px;
  border-left: 0px;
}

/*表格*/
#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: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #292d3e;
  color: #a6accd;
  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: #676e95 !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) !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);
}

version 1.0

/* 全局属性 */
#write {
  max-width: 860px;
  font-size: 16px;
  color: black;
  padding: 0 10px;
  line-height: 1.6;
  word-spacing: 0px;
  letter-spacing: 0px;
  word-break: break-word;
  word-wrap: break-word;
  text-align: left;
  font-family: "hack nerd font",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 {
  font-size: 1.5rem;
}
#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: "h2";
  color: rgba(47, 100, 199, 0.664);
  vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent;
}
/* #write h2 span::after {
  content: "h2";
  color: rgba(47, 100, 199, 0.664);
} */

#write h3 {
  font-size: 1.2rem;
}
#write h3:after {
  /* font-size: 1.2rem; */
  content: "h3";
}
#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, 0.05);
  font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
  word-break: break-all;
}

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

#write span img {
  display: inline-block;
  border-right: 0px;
  border-left: 0px;
}

/*表格*/
#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: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #292d3e;
  color: #a6accd;
  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: #676e95 !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) !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

鼠标悬浮:标题

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_前端_10

悬浮:图片

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_h5_11

横线(段落换行)

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_f5_12

片段高亮

typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_编辑器_13

css 代码

version2.0

@keyframes spin {
  0% {
    transform: rotateY(-20deg);
  }

  100% {
    transform: rotateY(20deg);
  }
}

/* 全局属性 */
#write {
  max-width: 860px;
  font-size: 16px;
  color: black;
  padding: 0 10px;
  /* line-height: 1.1; */
  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;
}

/*段落*/
content div>p {
  font-size: 16px;
  border-style: solid;
  border-width:  0.02rem 0 0 0;
  border-color: rgba(255, 105, 180, 0.315);
  /* border-left: 0;
  border-right: 0; */
  margin: .1rem 0;
  /* box-shadow: .3rem .1rem 2rem black; */
  /* border-radius: 1.5rem; */
  padding-top: 1px;
  padding-bottom: 1px;
  margin: .3rem 0;
  /* line-height: 26px; */
  color: black;
}

a {
  /* transition: ; */
  transition-property: all;
  transition-duration: 1s;
}

a:hover {
  /* transform: scale(1.5); */
  /* font-size: 1.1rem; */
  border: solid rgb(213, 105, 255) 1px;
  text-align: center;
  text-decoration: double underline red 1px;
}

a span:hover {
  transform: skew(-20deg);
}

/*标题*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: .3rem;
  margin-bottom: 2.5rem;
  /* padding: 1px; */
  font-weight: bold;
  color: black;
  border-radius: 5px 15px;
  /* margin: auto; */
  text-align: center;
  transition-property: all;
  transition-duration: .8s;
}

h1 {
  margin-left: 0;
}

h2 {
  margin-left: 1rem;
}

h3 {
  margin-left: 2rem;
}

h4 {
  margin-left: 3rem;
}

h5 {
  margin-left: 4rem;
}

h6 {
  margin-left: 5rem;
}

h1 {
  /* 使用shorthand 写法指定需要过渡到的终态以及过渡属性状态 */
  /* transition: width, height, background-color, transform, border; */
  /* transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68); */
  text-align: center;
  font-size: 1.5rem;
  transition: all;
  transition-duration: .7s;
  border: solid red;
  /* border: dotted 2px blue; */
  /* shawdow(offset)+blur(px size) */
}

h1:hover,
h1:focus {
  margin: 1rem;
  border: solid .1rem gold;
  border-radius: 4rem 3rem;
  padding: 1rem;
  background-color: #1198aa80;
  box-shadow: 1rem 1rem 2rem rgb(89, 165, 190);
  /* background-color: rgba(214, 37, 170, 0.425); */
  /* transform: rotate(180deg); */
}

h2:hover,
h3:hover,
h4:hover {
  background-color: rgba(231, 193, 222, 0.247);
  /* color: rgb(40, 231, 174); */
  border-radius: 3rem 1.8rem 3rem 2rem;
  box-shadow: 10px 2px 15px rgb(157, 255, 0),
    16px 2px 15px red,
    -14px 2px 15px rgba(31, 31, 30, 0.521);
  /* color: black; */
  text-align: start;
  /* padding: auto; */
  padding: .3rem;
  animation: none;



}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span {
  border-radius: 5px 10px;
  padding: 3px;
  transition: transform 1s;
  transition: all;
  transition-duration: .4s;
  animation: spin 3s linear infinite;
  border-radius: auto;
}

/*
h2 span:hover,
h3 span:hover,
h4 span:hover 
*/
h2:hover span,
h3:hover span,
h4:hover span,
h4:hover span {
  background-color: rgba(214, 37, 170, 0.247);
  /* color: rgb(40, 231, 174); */
  font-weight: bolder;
  text-decoration: double underline rgba(255, 0, 0, 0.637);
  font-size: 1.5rem;
  border-radius: 3rem 1.8rem 3rem 2rem;
  box-shadow: 10px 2px 15px rgb(157, 255, 0),
    16px 2px 15px red,
    -14px 2px 15px rgba(31, 31, 30, 0.521);
  color: black;
  margin: 1rem;
  transform: rotate(2deg);
  margin-left: 1rem;
  animation: none;
}


#write h1::after {
  display: inline-block;
  content: "h1";
  margin-left: 3%;
  color: rgba(47, 159, 199, 0.764);
  /*   vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent; */
}

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



li {
  transition: all;
  transition-duration: 2s;

}

ul li:focus,
ul li:hover {
  /* margin: .5rem; */
  /* margin-left: -.3rem; */

  border-radius: 2rem;
  /* font-weight: ; */
  /* text-decoration: solid underline 2px blue; */
  box-shadow: .5rem .5rem 3rem rgba(46, 226, 196, 0.404);
}


#write h2 {
  font-size: 1.3rem;
  border-bottom: 2px solid rgb(239, 112, 96, 0.7);
  box-shadow: 1px 2px 5px rgb(157, 255, 0), 6px 2px 5px red, 4px 2px 7px green;
}

#write h2 span {
  display: inline-block;
  font-weight: bold;
  background: rgba(96, 218, 239, 0.7);
  color: #000;
  /* padding: 3px 10px 1px; */
  /* border-radius: 6px; */
  margin-right: 3px;
}

#write h2:after {
  display: inline-block;
  content: "h2";
  /* padding: 1px; */
  margin-left: 3%;
  color: rgba(47, 100, 199, 0.664);
  /* vertical-align: bottom;
  border-bottom: 36px solid #efebe9;
  border-right: 20px solid transparent; */
}

/* #write h2 span::after {
  content: "h2";
  color: rgba(47, 100, 199, 0.664);
} */

#write h3 {
  font-size: 1.2rem;
  border-bottom: 2px solid rgb(239, 112, 96, 0.7);
  box-shadow: -4px -4px 5px lightblue;
}

#write h3 span {
  display: inline-block;
  font-weight: bold;
  background: rgba(239, 96, 167, 0.4);
  color: #000;
  margin-right: 3px;
  /* padding: 3px 10px 1px; */
  /* border-radius: 4px 6px; */
  /* border-top-right-radius: 6px;
  border-top-left-radius: 6px; */
}

#write h3:after {
  /* font-size: 1.2rem; */
  content: "h3";
  margin: 3%;
  color: rgba(47, 100, 199, 0.464);
}

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

#write h4 span {
  display: inline-block;
  font-weight: bold;
  background: rgba(198, 96, 239, 0.4);
  color: #000;
  padding: 3px 10px 1px;
  /* border-radius: 5px; */
  margin-right: 3px;
}

#write h4::after {
  /* font-size: 1.1rem; */
  content: "h4";
  margin: 3%;
  color: rgba(47, 100, 199, 0.364);
}

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

h5 span {
  display: inline-block;
  font-weight: bold;
  background: rgba(28, 161, 110, 0.4);
  color: #000;
  padding: 3px 10px 1px;
  /* border-radius: 5px; */
  margin-right: 3px;
}

h5::after {
  /* font-size: 1.1rem; */
  content: "h5";
  margin: 3%;
  color: rgba(151, 47, 199, 0.479);
}

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

/*列表*/
#write ul,
#write ol {
  margin-top: 1px;
  margin-bottom: 1px;
  padding-left: 35px;
  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: 1px;
  margin-bottom: 1px;
  /* 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(96, 134, 239);
  border-bottom: 1px solid rgb(239, 112, 96);
}

/*行内代码(inline codes)*/
#write p code,
#write li code {
  font-family: "hack nerd font";
  font-size: 16px;
  word-wrap: break-word;
  text-decoration: underline dotted hotpink 1px;
  padding: 2px 4px;
  border-radius: 4px;
  margin: 0 2px;
  color: rgb(68, 70, 134, 0.7);
  background-color: rgba(27, 31, 35, 0.01);
  /* font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; */
  word-break: break-all;
}

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

/*图片*/
img {
  display: block;
  /* margin: 0 auto; */
  max-width: 100%;
  border-radius: 1rem;
  border: dotted 1px;
  transition-property: all;
  transition-duration: 0.8s;
}

/* p>img:only-child:hover */
/* p>.md-image:only-child:not(.md-img-error) img:hover, */
body span img:hover {
  border: solid red 3px;
  border-radius: 1.3rem 1rem 1.3rem 1.2rem;
  box-shadow: 10px 12px 15px rgb(157, 255, 0),
    16px 2px 15px red,
    -14px 2px 15px rgba(31, 31, 30, 0.521);
  margin: -.3rem 3rem 2rem -2rem;
  /* margin: 30px !important; */

  /* transition */
}

#write span img {
  display: inline-block;
  border-right: 0px;
  border-left: 0px;
}

/*表格*/
#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 .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;
}

/* block codes代码块主题 :多行代码配置multi line codes*/
.md-fences:before {
  content: " ";
  display: block;
  width: 100%;
  background-size: 40px;
  background-repeat: no-repeat;
  /* background-color: #edf0f5; */
  margin-bottom: -7px;
  border-radius: 5px;
  background-position: 10px 10px;
}

.cm-s-inner.CodeMirror {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* background-color: #f0f1f6; */
  color: #25262c;
  font-family: "hack nerd font", 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: #0fa3a3 !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: #7bb91d !important;
}

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

.cm-s-inner .cm-comment {
  color: #676e95 !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;
}

效果调整

  • ​​shift+F12​​​typora_优雅使用typora/typora的亮点功能/更换主题/使用下载的主题/自定义主题_css_14