[开发工具]VSCode & Markdown

Markdown All in One

Plugins

• Markdown All in One
• Markdown Preview Enhanced

notepad "%AppData%\Code\User\settings.json"

"markdown.extension.print.theme": "dark",
"markdown-preview-enhanced.mermaidTheme": "dark",
"markdown-preview-enhanced.codeBlockTheme": "atom-dark.css",
"markdown-preview-enhanced.printBackground": true,

Mermiad

notepad %Userprofile%\.mume\mermaid_config.js

MERMAID_CONFIG = {
  startOnLoad: false,
  theme: 'dark'
}

Style

notepad %Userprofile%\.mume\style.less

* {
  padding: 0;
  margin: 0;
}

/* 主体 */
html body {
  background-color: black;
  color: #DDDDDD;
  // font-family: 'Times New Roman', '黑体';
  // overflow: initial;
  // box-sizing: border-box;
  // word-wrap: break-word;
}
/* 滚动条 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: transparent;
}
::-webkit-scrollbar-corner {
  background-color: black;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 32px;
}

// 单倍行距值
@RowSpacing : 8px;

.markdown-preview.markdown-preview {
  /* 自定义样式 */
  .hint {
    color: #666;
  }
  .highlight {
    color: #99FFFF;
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 总体样式 */
  background-color: #333333;
  color: #DDDDDD;
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 标题 */
  h1 { color: #EF7823; margin-bottom: @RowSpacing; border-bottom: 1px solid gray; }
  h1:before { content: "🌞"; }
  h1~* { margin-left: @RowSpacing; }
  h2 { color: #FF69B4; margin-bottom: @RowSpacing; border-bottom: 1px solid gray; }
  h2:before { content: "🌙"; }
  h2~* { margin-left: @RowSpacing * 2; }
  h3 { color: #DEDA00; margin-bottom: @RowSpacing; border-bottom: 1px dashed gray; }
  h3:before { content: "?"; }
  h3~* { margin-left: @RowSpacing * 3; }
  h4 { color: #5CD009; margin-bottom: @RowSpacing; border-bottom: 1px dashed gray; }
  h4:before { content: "💡"; }
  h4~* { margin-left: @RowSpacing * 4; }
  h5 { color: #FFFFFF; margin-bottom: @RowSpacing; border-bottom: 1px dashed gray; }
  h5:before { content: "?"; }
  h5~* { margin-left: @RowSpacing * 5; }
  /* 标题链接 */
  h1>a, h2>a, h3>a, h4>a, h5>a { color: inherit; }
  h1>a:after, h2>a:after, h3>a:after, h4>a:after, h5>a:after { content:"📌"; font-size: 45%; }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 引用 */
  blockquote {
    color: #DDDDDD;
    background-color: rgba(100, 100, 100, 0.6);
    border-left: 5px solid;
    padding: 0.5em;
    margin-bottom: @RowSpacing * 2;
    margin-top: @RowSpacing * 2;
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 斜体、删除线、粗体、代码 */
  em { color: inherit; }
  s { color: inherit; }
  strong {
    color: inherit;
    font-weight: bold;
    filter: brightness(150%);
    -webkit-filter: brightness(150%);
  }
  code:not(pre code) {
    color: inherit;
    background-color: rgba(34, 34, 34, 0.8);
    font-family: 'Consolas', '黑体';
    border-radius: 3px;
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 段落 */
  p:not(blockquote p) {
    margin-bottom: @RowSpacing;
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 列表 */
  ul, ol, dl {
    margin-top: @RowSpacing;
    margin-bottom: @RowSpacing * 2;
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 表格 */
  table {
      color: inherit;
      border-collapse: collapse;
      th {
        color: inherit;
        filter: brightness(150%);
        -webkit-filter: brightness(150%);
        padding: 0.2em 0.5em 0.2em 0.5em;
      }
      td {
        color: inherit;
        padding: 0.2em 0.5em 0.2em 0.5em;
      }
  }
  /*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
  /* 代码 */
  pre {
    // padding: 0.5em;
    border-radius: 3px;
    // background-color: #222;
    margin-top: @RowSpacing;
    margin-bottom: @RowSpacing * 2;
  }
}