Markdown Preview Enhanced自定义vscode配置

文件-->首选项 -->设置 -->搜索Markdown Preview Enhanced

选择允许运行js脚本

按F1 找到如图的位置

插入下列less代码


/* 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;
}

继续按F1

插入如下代码

const scripts = `
<script>
    function setCurrent(){
        const links = document.querySelectorAll(".md-sidebar-toc a")
        for(const link of links){
            link.style.color="";
        }
        const hash = location.hash;
        const a = document.querySelector('a[href="'+hash+'"]');
        if(a){
            a.style.color = "#f40";
        }
    }
    setCurrent();
    window.onhashchange = setCurrent;
</script>
`;
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 `
<p class="markdown-p-center">
  <img src="${g2}" alt="${g1}" style="max-width:${width}"/>
</p>
<p class="markdown-img-description">
  ${g1}
</p>
  `;
      });
      resolve(markdown);
    });
  },
  onDidParseMarkdown: function(html) {
    return new Promise((resolve, reject) => {
      return resolve(scripts + html);
    });
  }
};

回答: 如果你想在VSCode自定义Markdown的代码补全和其他设置,你可以按照以下步骤进行操作。 首先,打开VSCode的用户代码片段配置文件。你可以通过点击"首选项",然后选择"配置用户代码片段"来打开该文件。在其中,你可以输入以下代码来配置Markdown的代码补全: ```json "code": { "prefix": "code", "body": \[ "```shell", "$1", "```" \], "description": "Add shell code block" } ``` 这段代码定义了一个名为"code"的代码片段,当你输入"code"时,它会自动补全为一个包含shell代码的代码块。你可以根据需要修改代码块的内容。 接下来,你可以打开VSCode的设置文件"setting.json",并根据需要进行配置。以下是一些参考配置: ```json { "markdown-preview-enhanced.previewTheme": "pepper.css", "markdown-preview-enhanced.codeBlockTheme": "pepperLight.css", "markdown-preview-enhanced.printBackground": true, "\[markdown\]": { "editor.defaultFormatter": "DavidAnson.vscode-markdownlint" }, "markdown.extension.toc.levels": "2..4", "markdown-preview-enhanced.enableExtendedTableSyntax": true, "markdown-preview-enhanced.enableScriptExecution": true, "markdownlint.config": { "MD029": false, "MD033": false } } ``` 这些配置可以设置Markdown预览的主题、代码块的主题、打印背景、默认的Markdown格式化器、目录结构的级别、扩展的表格语法、脚本执行以及Markdown的lint规则等。 最后,如果你想在Markdown编辑器中启用快速建议功能,你可以在"setting.json"的"\[markdown\]"部分新增或修改"editor.quickSuggestions"的设置,例如: ```json { "\[markdown\]": { "editor.quickSuggestions": { "other": "on", "comments": "on", "strings": "on" } } } ``` 这样,当你在Markdown编辑器中输入代码时,将会有代码补全的建议。 希望以上信息对你有帮助! #### 引用[.reference_title] - *1* [macOS VScode Markdown 自定义补全 代码块](https://blog.csdn.net/u010953692/article/details/127798451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vscode markdown个人自定义样式和调用方法说明](https://blog.csdn.net/hippyoo/article/details/130716012)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [解决vscodemarkdown自定义的snippet出不来的问题](https://blog.csdn.net/zoujiawei6/article/details/128035118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值