【Typora】设置及轻度美化

个人设置

直接在主题文件夹下，新建base.user.css,并写入。

• 使用JetBrains Mono字体：JetBrains Mono字体官方下载

• 使用时，可以设置自定义锚点 Typora官方说明
  语法格式：
  设置，块中不要填内容就会显示⚓

  <a id='mark'></a>

  使用

  [点击跳转到mark](#mark)

点击查看base.user.css设置

/* 代码块主题 */
/* 顶部 */
.md-fences {
  /* color: #c5c8c6; */
  background-color: #f8f8f8 !important;
  border-radius: 5px;
  /* box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%); */
  padding-top: 30px;
  font-family: "JetBrains Mono", "Microsoft YaHei" !important;
}

.md-fences::before {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: " ";
  height: 12px;
  left: 12px;
  margin-top: -20px;
  position: absolute;
  width: 12px;
}

.CodeMirror-wrap .CodeMirror-code pre {
  font-family: "JetBrains Mono", "Microsoft YaHei" !important;
}

code {
  font-family: "JetBrains Mono", "Microsoft YaHei" !important;
}

blockquote {
  font-family: "JetBrains Mono", "Microsoft YaHei" !important;
}

/* 
input: 
        <a id='mark'></a>
use link:
        [click to mark](#mark) */
/* hide the anchor HTML */
a:empty + .md-raw-inline {
  display: none;
}
a:empty {
  text-decoration: none;
}
a:empty:before {
  content: "⚓";
}
/* show the anchor HTML when cursor is inside */
.md-expand .md-raw-inline {
  display: inline !important;
}

/* --- 分割 */
/* hr {
  background-image: repeating-linear-gradient(-45deg, #ddd, #ddd 4px, transparent 4px, transparent 8px);
  border: 0;
  height: 3px;
  margin: 40px 0
} */

/* == == 高亮 */
mark {
  background-color: #3e69d7;
  color: rgb(252, 252, 252);
  padding: 0 4px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* > 引用块 */
blockquote{
  margin: 8px 0 !important;
  padding: 8px !important;
  background: rgba(62, 105, 215, 0.06) !important;
  box-sizing: border-box !important;
  border-right: 10px solid transparent !important;
  border-left: 4px solid #3e69d7 !important;
  border-radius: 8px !important;
}

代码块mac风格

参考自B站

样式预览

css样式

点击查看css代码

.md-fences {
  /* color: #c5c8c6; */
  background-color: #f8f8f8 !important;
  border-radius: 5px;
  /* box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%); */
  padding-top: 30px;
  font-family: "JetBrains Mono", "Microsoft YaHei" !important;
}

.md-fences::before {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: " ";
  height: 12px;
  left: 12px;
  margin-top: -20px;
  position: absolute;
  width: 12px;
}