首页 > 其他分享 >不需额外安装 npm,Markdown 文章目录生成之 VSCode 编辑器和博客园的完美契合

不需额外安装 npm,Markdown 文章目录生成之 VSCode 编辑器和博客园的完美契合

时间:2022-08-17 17:34:37浏览次数:47  
标签:npm Markdown VSCode 博客园 生成 目录

博客园支持 Markdown 语法写入。对于目录生成更是简洁得很,只需要在想要生成目录的地方输入

[toc]

那么当前文章下的所有的标题将会在当前位置组合为该文章的目录。比如博客园编辑窗口:
cnblogs编辑器.png

预览相应内容如下:
cnblogs预览相应内容.png

然而对于 VSCode 而言,其自身的 Markdown Preview 是不能支持这种写法的:
对于 VSCode 而言,其自身的 Markdown Preview 是不能支持这种写法的.png

npm 可以将写好的 Markdown 内容生成目录树,但是首先得安装 npm 包,其次还得安装 doctoc 插件,再次它生成的目录树的内容看起来是这样子的:
doctoc生成的目录树内容.jpg

虽然它的浏览器效果和上述

目录

    这与 VSCode 简约的风格也是背离的。有国人写了一个 VSCode 插件 Markdown Preview Enhanced 可以完美解决这一问题:
    Markdown Preview Enhanced 插件的安装.png

    安装成功以后只需要重启 VSCode,即可实现支持

    目录

      安装 Markdown Preview Enhanced 后的预览效果.png

      标签:npm,Markdown,VSCode,博客园,生成,目录
      From: https://www.cnblogs.com/defonds/p/16596032.html

      相关文章

      • 幻16装机_ubuntu22.04+显卡驱动+CUDA+Anaconda+Chrome+pycharm+vscode+搜狗输入法
         前言电脑是ROG幻162022版本,显卡是NVIDIARTX3060laptop版本,预装win11系统。1安装ubuntu22.04(双系统)从Ubuntu官网下载https://ubuntu.com/download/deskt......
      • 【环境配置】| vscode中命令行运行如何设置默认环境、切换环境?
        1转到setting.json使用快捷键CTRL+SHIFT+P从调出的窗口中输入'python',选择解释器(Interpreter)2查看当前环境3选择目标环境4测试......
      • yarn和npm设置国内镜像源
        yarn和npm设置国内镜像源2022-08-16feat:更新最新镜像地址。由于npm包部分依赖下载速度缓慢,最好使用国内镜像源来解决,一般使用淘宝开源的镜像。安装yarnnpmi-gyarn......
      • vscode comment translate失效问题
        TranslateError:CheckOutputPannelfordetails查了一圈,换翻译源也没用,最终查到了:在官网下载的vscode的版本应该是VSCodeSetup-x64-x.xx.x而不是VSCodeUserSetup-x64......
      • 博客园样式
        前言因为有人私聊我想要我博客园的样式,所以出一篇文章,读者直接复制黏贴即可。1.博客设置https://i.cnblogs.com/settings2.页面定制CSS代码.article-info-tag,butt......
      • pnpm 对 npm 和 yarn 降维打击的
        欢迎关注前端早茶,与广东靓仔携手共同进阶前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~npm2用node版本管理工具把node版本降到4,那npm版本就是2.x了。 ......
      • yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因
        使用VSCode的命令行安装yarn(npminstallyarn-g),安装成功后,查看版本报错原因:命令行执行策略,默认设置为Restricted不加载配置文件或运行脚本。需变更设置为RemoteSi......
      • vscode打开自动显示cli.js
        最近打开vscode自动弹出cli,js  我去官网上查 https://github.com/microsoft/vscode/issues/91613发现是我之前在兼容性里面设置了以管理员打开vscode导致的  ......
      • Python3 virtual environment 在 vscode 的实践
        1、虚拟环境实际上就是将python解释器+项目中可能用的的modules,统一放在虚拟环境对应的目录2、activate虚拟环境,只是保证相关module下载到对应文件夹中,而不是说pyth......
      • 博客园代码美化css
         .cnblogs_codepre{font-family:CourierNew!important;font-size:15px!important;word-wrap:break-word;white-space:pre-wrap;}.cnblogs_codespan{fo......