Having trouble with custom markdown styles

[solvworx]

Hello,
I'm probably doing something wrong, but when I try to set up a custom markdown stylesheet, I cannot get absolute paths to work. Also, there appear to be two locations in settings, and I'm not sure which one to use.

I know the custom stylesheet itself works, because if I set up a relative path to the same directory, the stylesheet is applied.

Here is my entire settings.json:

{
    "security.workspace.trust.untrustedFiles": "open",
    "git.openRepositoryInParentFolders": "never",
    "extensions.ignoreRecommendations": true,
    "editor.fontSize": 14,
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "editor.tabSize": 2,
    "editor.mouseWheelZoom": true,
    "print.alternateBrowser.enable": true,
    "print.alternateBrowser.path": "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
    "print.filepathHeadingForIndividuallyPrintedDocuments": false,
    "print.folder.includeFileList": true,
    "print.general.filepathHeadingForIndividuallyPrintedDocuments": false,
    "print.markdown.stylesheets": [
        "./solvworx-markdown.css",
        "~/solvworx-markdown.css",
        "file:///Users/joe/solvworx-markdown.css"
    ],
    "markdown.styles": [
        "~/solvworx-markdown.css",
        "file:///Users/joe/solvworx-markdown.css"
    ]

}

What am I doing wrong, and should I be using print.markdown.stylesheets or markdown.styles?
My goal is to set up one custom stylesheet for any markdown file on my machine, which is why I'm putting it in the macOS home directory.

Thanks!

P.S.: Oddly enough, it works as expected with an external URL:
https://www.solvworx.com/artifacts/solvworx-markdown.css

Curious as to why it won't recognize local absolute paths.

[PeterWone]

Ways to manage your stylesheets

There are separate settings for source code, plain text and markdown stylesheets. The same path resolution mechanism is used for all stylesheets and all other resources (eg images).

Relative to your documents

A relative path is resolved relative to the directory that contains the document. If your repo contains docs/some.md then for that document, a stylesheet path of ./md.css will resolve to docs/md.css

This allows you to have a private md.css for each folder of documents.

Relative to your workspace

Workspace relative paths are (surprise!) relative to the workspace. For the snap below I put the stylesheet in the root of the workspace but you don't have to. If you wanted to keep several css files in a directory stylesheets you could specify stylesheet paths like workspace.relative/stylesheets/md.css

Global resources

Globally available resources can be served from a webserver as you have already discovered. Which is the best arrangement depends on your use case. Relative paths are intended for people sharing via a repository or people who don't want to depend on a constant internet connection.

Troubleshooting

If things don't behave as you expect, the embedded webserver that Print uses will serve the error message. For resources, this is less obvious but you can make your browser show it by pressing F12 and selecting the network tab. You may need to press F5 to reload. In the snap below I have the path specified as ./md.css but the file is in the root of the repo whereas the document is in src so the path does not resolve.

One stylesheet for all my documents regardless of path?

Serve it from a webserver. That takes care of your entire network, not just your notebook.

If you have only one workstation on your network and you don't want to go to all the bother of setting up a webserver, update your extension and use the brand new, just-for-you magic path symbol absolute in your stylesheet paths, like this: absolute/D:/path/to/the.css

Absolute paths aren't suitable for shared documents, they only work on one computer. But they're easy and simple, if it's just you.

[PeterWone]

@solvworx - have I answered this to your satisfaction?

[solvworx]

Yes. I just incorrectly assumed that local absolute paths would work the same as global (web served) url paths. The new 'absolute' keyword should work great. Thanks!