0%

Using Markdown Preview Enhanced only with a style.less:

Markdown Preview Enhanced

Theme Style

效果图:

配置文件


/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;
  
  --title-color: #8064a9;
  --text-color: #444444;
  --light-text-color: #666666;
  --link-color: #2aa899;
  --code-color: #745fb5;
  
  --shadow-color: rgba(116, 95, 181, 0.1);
  --purple-light: rgba(116, 95, 181, 0.3);
  --border: #eee;
  --shadow: 0rem 0.2rem 0.4rem rgba(116, 95, 181, 0.1);
  
  --side-bar-bg-color: #fafafa;
  --control-text-color: var(var(--light-text-color));
  --active-file-text-color: var(--title-color);
  --active-file-bg-color: rgba(116, 95, 181, 0.1);
  --item-hover-bg-color: rgba(116, 95, 181, 0.1);
  --active-file-border-color: var(var(--title-color));
  
  --base-font: "Helvetica Neue", "Noto Sans", -apple-system, Ubuntu,
    "Microsoft YaHei", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans",
    "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
    "Source Han Sans CN", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
    SimHei, "WenQuanYi Zen Hei Sharp", "Source Sans Pro", sans-serif;
  --title-font: "EB Garamond", Georgia, "Noto Serif", "Noto Serif CJK SC",
    "Nimbus Roman No9 L", "Songti SC", "Source Han Serif SC",
    "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun,
    SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN",
    "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU,
    "Ubuntu", "Source Sans Pro", serif;
  --monospace: "JetBrains Mono", "Fira Code", "Cascadia Code", "Sarasa Term SC",
    Monaco, "Deja Vu Sans Mono", Consolas, "Lucida Console", "Andale Mono",
    "Roboto Mono", Courier, Monospace !important;
  
  body{
    font: "Helvetica Neue"

  }  
  
  /* 打印 */
  @media print {
    html {
      font-size: 0.9rem;
    }
  
    table,
    pre {
      page-break-inside: avoid;
    }
  
    pre {
      word-wrap: break-word;
    }
    #write {
      max-width: 100%;
    }
    @page {
      size: A4; /* PDF A4 */
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: initial;
  }
  
  body {
    color: "#444444";
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    overflow-x: hidden;
    
  }
  
  /* 页边距 和 页面大小 */
  #write {
    font-family: var(--base-font);
    /* max-width: 914px; */
    margin: 0 auto;
    padding: 1rem 4rem;
    padding-bottom: 100px;
  }
  
  #write p {
    line-height: 1.6rem;
    word-spacing: 0.05rem;
  }
  
  body > *:first-child {
    margin-top: 0 !important;
  }
  
  body > *:last-child {
    margin-bottom: 0 !important;
  }
  
  a {
    color: var(--link-color);
    text-decoration: none;
  }
  #write a {
    border-bottom: none;
  }
  #write a:hover {
    border-bottom: 1px solid var(--link-color);
    color: var(--link-color);
    text-decoration: none;
  }
  .md-content {
    color: var(--light-text-color);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-weight: normal;
    line-height: 1.3;
    cursor: text;
    color: #8064a9;
    font-family: var(--title-font);
  }
  
  h1 {
    text-align: center;
    font-size: 2.25em;
    margin-bottom: 2rem;
  }
  h1:after {
    content: "";
    display: block;
    margin: 0.2em auto 0;
    width: 6rem;
    height: 2px;
    border-bottom: 2px solid var(--title-color);
  }
  
  h2 {
    padding-left: 0.4em;
    font-size: 1.75em;
    border-left: 0.4em solid var(--title-color);
    border-bottom: 1px solid var(--title-color);
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.3em;
  }
  h5 {
    font-size: 1.2em;
  }
  h6 {
    font-size: 1.1em;
  }
  
  p,
  blockquote,
  ul,
  ol,
  dl,
  table {
    margin: 0.8em 0;
  }
  
  /* horizontal rule */
  hr {
    margin: 1em auto;
    border: 0;
    border-top: 1px solid var(--border);
  }
  
  /* 列表 */
  li > ol,
  li > ul {
    margin: 0 0;
  }
  
  li p.first {
    display: inline-block;
  }
  
  ul,
  ol {
    padding-left: 2rem;
  }
  
  ul:first-child,
  ol:first-child {
    margin-top: 0;
  }
  
  ul:last-child,
  ol:last-child {
    margin-bottom: 0;
  }
  
  #write ol li,
  ul li {
    padding-left: 0.1rem;
  }
  
  /* 引用 */
  blockquote {
    border-left: 0.2em solid rgba(116, 95, 181, 0.3);
    padding-left: 1em;
    background: #fffbfb !important;
    color: #666666;
    font-family: var(--base-font);
  }
  
  /* 表格 */
  table {
    margin-bottom: 1.25rem;
  }
  table th,
  table td {
    padding: 8px;
    line-height: 1.25rem;
    vertical-align: middle;
    border: 1px solid #ddd;
  }
  table th {
    font-weight: bold;
  }
  table thead th {
    vertical-align: middle;
  }
  table tr:nth-child(2n),
  thead {
    background-color: #fcfcfc;
  }
  
  /* 粗体 */
  #write strong {
    padding: 0 2px;
    font-weight: bold;
  }
  code {
    padding: 2px 4px;
    border-radius: 0.3rem;
    //font-family: "Fira Code" !important;
    font-size: 0.9rem;
    color: #745fb5;
    background-color: #f4f2f9 !important;
    margin: 0 2px;
  }
  pre[class*="language-"]{
    padding: 1rem;
    font-size: 90% !important;
    line-height: 1.45;
    background: #fdfdfd !important;
    border: dashed !important;
    border-radius: 10px;
    color: #60965e;
    margin-top: 0 !important;
  }

  /* inline code */
  #write code,
  tt {
    padding: 2px 4px;
    border-radius: 0.3rem;
    font-family: "JetBrains Mono";
    font-size: 0.9rem;
    color: #745fb5;
    background-color: #f4f2f9 !important;
    margin: 0 2px;
  }
  
  #write .md-footnote {
    color: #745fb5;
    background-color: #f4f2f9;
  }
  
  /* highlight. */
  #write mark {
    background-color: #f9f2f4;
    border-radius: 0.3rem;
    padding: 2px 4px;
    margin: 0 2px;
    color: #c7254e;
  }
  
  #write del {
    padding: 1px 2px;
  }
  
  .md-task-list-item > input {
    margin-left: -1.3em;
  }
  
  #write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #f5e6e6;
    margin-top: 0 !important;
  }
  
  .mathjax-block > .code-tooltip {
    bottom: 0.375rem;
  }
  
  /* 图片 */
  .md-image > .md-meta {
    border-radius: 3px;
    font-family: "JetBrains Mono";
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
  }
  /* 图片靠左显示 */
  /* p .md-image:only-child {
    width: auto;
    text-align: left;
    margin-left: 2rem;
  } */
  
  /* 写![shadow-...]() 显示图片阴影 */
  img[alt|="shadow"] {
    box-shadow: 0rem 0.4rem 0.8rem rgba(116, 95, 181, 0.1);
  }
  
  #write a.md-toc-inner {
    line-height: 1.6;
    white-space: pre-line;
    border-bottom: none;
    font-size: 0.9rem;
  }
  
  header,
  .context-menu,
  .megamenu-content,
  footer {
    font-family: var(--base-font);
  }
  
  .file-node-content:hover .file-node-icon,
  .file-node-content:hover .file-node-open-state {
    visibility: visible;
  }
  
  .md-lang {
    color: #b4654d;
  }
  
  .html-for-mac .context-menu {
    --item-hover-bg-color: #e6f0fe;
  }
  
  /* 代码段 背景 */
  pre {
    --select-text-bg-color: #ebe1f5;
  }
  
  /* border and bg */
  .md-fences {
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fdfdfd !important;
  }
  #write pre.md-fences {
    display: block;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0rem 0.2rem 0.4rem rgba(116, 95, 181, 0.1);
  }
  
  .cm-s-inner {
    padding: 0.25rem;
    border-radius: 0.25rem;
  }
  
  .cm-s-inner.CodeMirror,
  .cm-s-inner .CodeMirror-gutters {
    color: #3a3432 !important;
    border: none;
  }
  
  .cm-s-inner .CodeMirror-gutters {
    color: #6d8a88;
  }
  
  .cm-s-inner .CodeMirror-linenumber {
    padding: 0 0.1rem 0 0.3rem;
    color: #b8b5b4;
  }
  
  .cm-s-inner .CodeMirror-line::selection,
  .cm-s-inner .CodeMirror-line::-moz-selection,
  .cm-s-inner .CodeMirror-line > span::selection,
  .cm-s-inner .CodeMirror-line > span::-moz-selection,
  .cm-s-inner .CodeMirror-line > span > span::selection,
  .cm-s-inner .CodeMirror-line > span > span::-moz-selection {
    background: rgba(116, 95, 181, 0.1);
  }
  
  .md-fences.md-focus .cm-s-inner .CodeMirror-activeline-background {
    background: rgba(116, 95, 181, 0.1);
  }
  
  .cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: #a34e8f !important;
  }
  
  #fences-auto-suggest .active {
    background: #ddd;
  }
  
  .cm-s-inner span.cm-comment {
    color: #9daab6;
  }
  .cm-s-inner span.cm-builtin {
    color: #0451a5;
  }
  
  /* language tip */
  #write .code-tooltip {
    border: 1px solid var(--border);
  }
  
  .auto-suggest-container {
    border-color: #b4b4b4;
  }
  
  .auto-suggest-container .autoComplt-hint.active {
    background: #b4b4b4;
    color: inherit;
  }
  
  /* task list */
  #write .md-task-list-item > input {
    -webkit-appearance: initial;
    display: block;
    position: absolute;
    border: 1px solid #b4b4b4;
    border-radius: 0.2rem;
    margin-top: 0.3rem;
    height: 1rem;
    width: 1rem;
    transition: background 0.3s;
  }
  
  #write .md-task-list-item > input:focus {
    outline: none;
    box-shadow: none;
  }
  
  #write .md-task-list-item > input:hover {
    background: #ddd;
  }
  
  #write .md-task-list-item > input[checked]::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    height: 60%;
    width: 2px;
    transform: rotate(40deg);
    background: #333;
  }
  
  #write .md-task-list-item > input[checked]::after {
    content: "";
    position: absolute;
    top: 46%;
    left: 25%;
    height: 30%;
    width: 2px;
    transform: rotate(-40deg);
    background: #333;
  }
  
  #write .md-task-list-item > p {
    transition: color 0.3s, opacity 0.3s;
  }
  
  #write .md-task-list-item.task-list-done > p {
    color: #b4b4b4;
    text-decoration: line-through;
  }
  
  #write .md-task-list-item.task-list-done > p > .md-emoji {
    opacity: 0.5;
  }
  
  #write .md-task-list-item.task-list-done > p > .md-link > a {
    opacity: 0.6;
  }
  
  /* sidebar */
  #typora-sidebar,
  .typora-node #typora-sidebar {
    box-shadow: 3px 0px 10px rgba(116, 95, 181, 0.1);
  }
  .sidebar-content-content {
    font-size: 0.9rem;
  }
  
}

主要是从一个Typora主题移植的,代码块比较难处理,所以自己大致重新设置了一下。打开浏览器,F12查看各个属性对照修改就行。