interactive icon indicating copy to clipboard operation
interactive copied to clipboard

Markdown cells don't use workspace settings for styles

Open marklnz opened this issue 2 years ago • 2 comments

Describe the bug

When adding a markdown cell to a polyglot notebook, the rendered markdown does not apply styles that I have set in a "styles.css" file, which my VS Code Workspace Settings includes. I have a settings.json file in the .vscode folder at the root of my workspace, which contains the following (note that I don't normally use consolas as the font - that is included here just to illustrate the point):

{
    "markdown.preview.fontFamily": "consolas, -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu'",
    "markdown-mermaid.darkModeTheme": "dark",
    "markdown.styles": ["styles.css"]
}

In the root of my workspace I have a file named styles.css which contains some of my preferred styling for various markdown elements.

I have a mermaid renderer extension installed (https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) which uses one of the other settings in the settings.json file, with no issues.

If I write a plain markdown file in the same workspace, the styles defined in styles.css are applied. In addition, the font family setting and the mermaid dark mode theme setting are also applied as expected in the preview window.

However, when I add a polyglot notebook file to the same workspace, and add a markdown cell to it, the styles are not applied. Additionally, the font family setting is also ignored. The mermaid dark mode theme IS applied as expected, however. Presumably this is because it's a third party extension which is able to use its settings correctly.

I have tried this both with .ipnyb and .dib file types and the result is the same. I know the styles I have defined can be used by the polyglot notebooks extension when rendering markdown because if I add them to a markdown cell, they are applied correctly. This problem appears be related only to the use of styles defined and linked from a VS Code workspace settings file.

Please complete the following:

Which version of .NET Interactive are you using? (In a notebook, run the #!about magic command. ):

  • OS
    • [x] Windows 11
    • [ ] Windows 10
    • [ ] macOS
    • [ ] Linux (Please specify distro)
    • [ ] iOS
    • [ ] Android
  • Browser
    • [x] Chrome
    • [ ] Edge
    • [ ] Firefox
    • [ ] Safari
  • Frontend
    • [ ] Jupyter Notebook
    • [ ] Jupyter Lab
    • [ ] nteract
    • [x] Visual Studio Code
    • [ ] Visual Studio Code Insiders
    • [ ] Visual Studio
    • [ ] Other (please specify)

Screenshots

Font rendered in consolas and styles applied correctly to a code block in the preview of a .md markdown file:

image

Same markdown rendered in a markdown cell in a polyglot notebook - default font and styles:

image

marklnz avatar Dec 05 '23 18:12 marklnz

Any thoughts on this? Is there something I'm missing with this - or does the "External" label that's been added indicate that this is caused by an external dependency of this library?

marklnz avatar Dec 19 '23 18:12 marklnz

External indicates that the relevant code isn't in this repository. In this case it's not a dependency so much as the VS Code app itself. We can keep the issue open here because it affects Polyglot Notebook users. There might be, or maybe we should open, a primary issue on VS Code for this.

@rebornix?

jonsequitur avatar Dec 19 '23 18:12 jonsequitur