shd101wyy / vscode-markdown-preview-enhanced

One of the "BEST" markdown preview extensions for Visual Studio Code
https://shd101wyy.github.io/markdown-preview-enhanced
Other
1.4k stars 171 forks source link

[BUG] 自定义 HTML Head 中脚本以及 Markdown 中导入的外部 CSS 文件 (非less) 的效果在 VSCode 预览界面不显示 #1980

Open van-lee-fxp opened 2 months ago

van-lee-fxp commented 2 months ago

我在使用 Markdown Preview Enhanced 编辑 Markdown 文件的时候,为了能够实现更加灵活的格式调整,我使用了 Costumize Preview HTML Head 这个功能添加了一些脚本,但是发现脚本的运行效果在 VSCode 中的预览视图中不能呈现,只有在浏览器中打开时,才能看到正确的脚本运行效果。

例如,我添加了以下脚本,为 HTML 文档中含有换行符 <br/><p> 元素添加类名 no-indent 以取消其缩进 (样式表中有设置对应的样式)——

document.querySelectorAll ( "p" ).forEach (   
    element => {
        if ( element.querySelector ( "br" ) ) {
            element.classList.add ( "no-indent" );
        }
    } 
);

但是在VSCode中的预览效果仍然能够看到缩进。以下是 VSCode 与浏览器中预览效果的对比图——

PixPin_2024-04-05_19-33-49

PixPin_2024-04-05_19-35-48

另外,我发现,在 Markdown 文档中,通过 @import 语句导入的外部 .less 样式表是可以正常预览的,但是如果导入的是 .css 样式表,VSCode 预览视图中就看不到效果了,同样是只有在浏览器中打开才能看到效果 (测试过程中 Preview Theme 始终选的是 None 防止干扰)。

这个问题是我在最近将我自己写的样式表由 less 切换为 SASS 时发现的,由于 MPE 暂未支持直接导入 .scss 样式表,我是先通过 Live SASS Complier 编译为 CSS 再导入 CSS, 导入之后就发现预览不显示的问题。

PixPin_2024-04-05_19-56-55

PixPin_2024-04-05_19-57-54

PixPin_2024-04-05_20-01-28

van-lee-fxp commented 2 months ago

昨天晚上使用的时候发现 CSS 不生效的问题出现的情景:打开单个的 Markdown 文件时,会出现 CSS 预览不生效的问题,但如果打开的是文件夹,且目标 CSS 文件包含于文件夹的目录树中,这时再打开文件夹中的 Markdown 文件时,CSS 在预览中就能生效。但是脚本不生效的问题是仍然存在的。