vscode中预览markdown文件

1.扩展商店搜索Markdown Preview Enhanced

2.在设置中搜索Markdown Preview Enhanced

image.png

3.按f1搜索

image.png

把里面的内容替换成

/* 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;  
  font-family: "consolas", "Noto Sans S Chinese";
  font-size: 1em;
}

.markdown-img-description{
    text-align: center;
    margin-top: -1em;
    color: #666;;
    margin-bottom: 2em;
}

html body img{
    border:2px solid #ccc;
}

.markdown-p-center{
    text-align: center;
}

4.按f1搜索

image.png

把里面的内容替换成

const scripts = `

`;
var fs = require("fs");
module.exports = {
  onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject) => {
      const reg = /\!\[(.*)\]\((\S+)\)/gm;
      markdown = markdown.replace(reg, function(match, g1, g2) {
        var width = "100%";
        if (g1) {
          var w = g1.split("|");
          if (w.length > 1) {
            width = w[1] + "px";
            g1 = w[0];
          }
        }
        return `

  


  ${g1}

  `;
      });
      resolve(markdown);
    });
  },
  onDidParseMarkdown: function(html) {
    return new Promise((resolve, reject) => {
      return resolve(scripts + html);
    });
  }
};

设置完之后可以设置图片的注释和大小

image.png