Closed KLynn2019 closed 2 years ago
Could you please share the settings you are using? Especially the value of asciidoc.styles
?
I cannot reproduce on Linux:
I can reproduce this issue on Windows. I think the documentation (imported from the Markdown extension) is wrong. It says that you need to write \
as \\
but it actually does not work if you do that.
On my machine the following paths are working:
C:\path\to\workspace\vscode-asciidoc-preview.css
C:/path/to/workspace/vscode-asciidoc-preview.css
.\vscode-asciidoc-preview.css
./vscode-asciidoc-preview.css
vscode-asciidoc-preview.css
Paths that do not work:
C:\\path\\to\\workspace\\vscode-asciidoc-preview.css
@KLynn2019 could you confirm (or not) that you are experiencing the same problem?
@Mogztter None of these paths are working for me.
None of these paths are working for me.
Make sure to close the preview and reopen it when you update preview settings. Here's what I get:
Yep...I did all of that and I'm still getting the error message.
🤔 I don't really know why it's not working on your machine. Could you please "Toggle Developer Tools" from the "Help" menu? Then, go to the "Network" tab in the Chrome DevTools:
Close the preview (if it was opened), and open it again. You should see a GET request to the custom stylesheet. The request URL might give us an hint.
It's still a no for me...
As you can see, your request URL contains double front slashes //
:
https://file+.vscode-resource.vscode-cdn.net/c%3A//Users//klynn//Documents//vscode-asciidoc-preview.css
Mine contains single front slashes: /
:
https://file+.vscode-resource.vscode-cdn.net/c:/Users/ggrossetie//Documents/GitHub/asciidoctor-vscode/test-workspace/vscode-asciidoc-preview.css
That's why your URL cannot be resolved. Are you sure that you are using single slashes in your settings?
I am now...but I'm still getting the same result.
Unfortunately I have to tap out for today...I'll check tomorrow to see if there's anything else I can do on my end to help.
We are definitely making progress, this request URL looks better.
Could you please copy and paste the end of the URL (starting at c%3A/...
) in a browser and see if it can be resolved?
It's not resolving. This is bizarre...I can see the file in my folder...
If I replace %3A with a colon, it does resolve.
It's not resolving. This is bizarre...I can see the file in my folder... If I replace %3A with a colon, it does resolve.
Which browser are you using? Your browser should decode %3A
to :
automatically but it does not explain why VS Code cannot resolve it...
I'm using Chrome. We're a Google shop, for better or worse...
I was wrong, Chrome does not automatically convert %3A
to :
. I used "Copy value" and the %3A
was automatically replaced when I paste the URL in the Chrome address bar.
It might be a security/trust issue. It seems that this file is not part of your workspace? I know that VS Code has implemented a Workspace Trust feature to allow/disallow some features.
You should click on "Manage" (gear icon) on the left menu bar, then "Manage Workspace Trust". Make sure that this folder is in the "Trusted Folders & Workspaces":
You can also try to move this file next to your AsciiDoc file (and update the path accordingly)
The file is in a trusted folder. It's still not working.
Because we're using Antora and generating locally, I prefer to keep only necessary files in the repositories.
Sorry we're still not able to pin this down...I'm out of ideas.
Could you try a non-special location for the OS, e.g. c:\temp for your workspace. Just to prove it's not a security or access issue.
On Thu, 7 Jul 2022, 06:49 KLynn2019, @.***> wrote:
The file is in a trusted folder. It's still not working.
Because we're using Antora and generating locally, I prefer to keep only necessary files in the repositories.
Sorry we're still not able to pin this down...I'm out of ideas.
— Reply to this email directly, view it on GitHub https://github.com/asciidoctor/asciidoctor-vscode/issues/595#issuecomment-1176559988, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFEXX2X4XSDEPGU6KSQ3R3VSXINBANCNFSM52WNBR6Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>
No dice...
Well, I can't reproduce it but I did find another problem with stylesheets (alas, #598)
I thought it might have been the dash but it was not.
I had a look at the response headers and compared with https://github.com/asciidoctor/asciidoctor-vscode/issues/595#issuecomment-1175460253
I notice that the Content-Type is different in my example (css rather than text) and there is an Etag value. I don't know if this is relevant.
@KLynn2019 could you try relative a path (i.e., ../../file.css
)? Additionally, could you try to prefix your path by file:///
(for instance, file:///C:/path/to/file.css
)?
And also could use front slashes instead of back slashes?
I have tried every configuration I can think of and it's still not working. So now I'm going to see if someone else on my team is free to test on their machine. We've got a release coming up so it may not be right away...but I'll report back.
I am having a similar issue after switching to the pre-release version 3.0.1 on M1 macbook air.
Version: 1.69.1 (Universal)
Commit: b06ae3b2d2dbfe28bca3134cc6be65935cdfea6a
Date: 2022-07-12T08:21:51.333Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Darwin arm64 21.4.0
In my header 1 section of my testing_document.adoc
, I use :highlightjs-theme: dracula
and I get a console error saying (Error: Unable to resolve nonexistent file '/Users/foobar/.vscode/extensions/asciidoctor.asciidoctor-vscode-3.0.1/media/highlightjs/styles/dracula.min.css')
As for my general stylesheet path, in setting I used:
/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css
Which worked in the previous 2.9.8 version, but suddenly doesn't work. I have also tried relative paths with dots .
but that didn't work either.
I have also made sure to entrust the workspace folder and each subfolder with .adoc
files.
I believe this has something to do with the change with how internal .adoc
files link. I switched to 3.0.1 from 2.9.8 because I wanted internal linking to work, and it does now!; but now it seems linking to local files using the header attribute :highlighterjs-theme:
and/or the asciidoc setting 'asciidoc.styles' doesn't link properly.
The console errors also show https://file+.vscode-resource
[...] when retrieving both readthe_dracula_modified.css
and dracula.min.css
. I am not sure if this is how it's supposed to work in VSCode because it has a built in browser, but may be important.
Request URL: https://file+.vscode-resource.vscode-cdn.net/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css
I will try to test more.
In my header 1 section of my testing_document.adoc, I use :highlightjs-theme: dracula and I get a console error saying (Error: Unable to resolve nonexistent file '/Users/foobar/.vscode/extensions/asciidoctor.asciidoctor-vscode-3.0.1/media/highlightjs/styles/dracula.min.css')
The VS Code extension is now using Highlight.js 11. The dracula theme was moved to a subfolder named base16
: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/base16/
So you should use :highlightjs-theme: base16/dracula
.
Is the CSS file located in the same workspace? Could you please open the Dev Tools to debug the request and see which status code you get?
The :highlightjs-theme: base16/dracula
solved that part, and it shows the coloring in rendered preview!
The CSS file is not within the workspace, since the workspace only includes my vscode_folder
in this directory tree, while the CSS sheet is outside of it:
.
├── documents
│ ├── asciidoc_files.code-workspace
│ └── vscode_folder
│ └── testing_document.adoc
└── stylesheets
└── user_created
└── readthe_dracula_modified.css
4 directories, 3 files
This is the error within Dev Tools > Network > readthe_dracula_modified.css > Headers
:
General:
|--------|
Request URL: https://file+.vscode-resource.vscode-cdn.net/Users/foobar/Documents/asciidoc_documents/stylesheets/user_created/readthe_dracula_modified.css
Request Method: GET
Status Code: 401 (from service worker)
Referrer Policy: strict-origin-when-cross-origin
Response Headers:
|-------------------|
Content-Type: text/plain;charset=UTF-8
Request Headers:
|-----------------|
Provisional headers are shown
Referer
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 12_3_1) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.69.1 Chrome/100.0.4896.160 Electron/18.3.5 Safari/537.36
I noticed something. Previously there was an option (in 2.9.8): Asciidoc: Use_asciidoctor_js
. I unchecked it and if I open the JSON, it looks fine in editor (not greyed):
But when I switch to the new version, that option disappears, and this is what the JSON looks like:
Perhaps helpful?
Edit: Deleting the line didn't seem to do anything after checking console again.
Maybe VS Code cannot load resources outside of the current workspace using https://file+.vscode-resource.vscode-cdn.net
protocol.
Could you please try to move the stylesheet in the same workspace as the AsciiDoc file and try again?
The use_asciidoctor_js
option is deprecated since Asciidoctor.js is now the only option available (i.e., Asciidoctor CLI was dropped in 3.x). I'm pretty sure this is unrelated.
After putting the file within the workspace, specifically within vscode_folder
and changing the settings to the new path, it is still not working.
However, I am apparently getting problems with the CSS itself, as VSCode is warning me:
'-ms-text-size-adjust' is not supported by Chrome, Chrome Android, Edge, Firefox, Safari, Samsung Internet. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+, Samsung Internet 6.0+.
'-webkit-text-size-adjust' is not supported by Chrome, Chrome Android, Edge 79+, Firefox, Safari, Samsung Internet. Add 'text-size-adjust' to support Chrome 54+, Chrome Android 54+, Edge 79+, Samsung Internet 6.0+.
So maybe the newer asciidoc version (3.0.1) has a more updated browser, and some CSS declarations are breaking the rendering?
Edit: I lied. I apparently didn't correctly source the file after I put it into vscode_folder
.
Now after using /Users/foobar/Documents/asciidoc_documents/documents/vscode_folder/readthe_dracula_modified.css
my css is rendering:
And the internal links are working using link:foobar.adoc[baz]
! nice 👍
So it seems to confirm that VS Code cannot load resources from outside the workspace using https://file+.vscode-resource.vscode-cdn.net
.
I'm not sure if we want to continue to support that as we merely bypass the security model of VS Code... 🤔
My experience, on Windows, with custom CSS, so far:
asciidoctor.css
.In both cases, the CSS isn't being loaded. My CSS full pathname looks like: F:\Archive\Configurations\CSS\adoc-final.css
.
I can otherwise include
files as usual, using relative paths.
Interesting, in both cases you are using an absolute path? F:\Archive\Configurations\CSS\adoc-final.css
.
When I preview a file that resides on a different partition than the CSS, I get an error message that warns me: "Could not load 'asciidoc.styles': {path}"
The message is really Could not load 'asciidoc.styles': {path}
or does the {path}
variable get correctly replaced?
When I preview a file on the same partition, volume, as the CSS, but not the same folder, I see no pop-up error, but the preview ignores the CSS and uses the VScode one, rather than the default asciidoctor.css.
Probably because you are outside of the workspace. I'm not sure why we don't get the error message in this case. I will try to reproduce this issue.
I can otherwise include files as usual, using relative paths.
The include directive relies on Asciidoctor.js to resolve and read files whereas stylesheets are loaded using VS Code API.
Interesting, in both cases you are using an absolute path?
F:\Archive\Configurations\CSS\adoc-final.css
.
Yes, that's the case. I store various CSS in a central folder. For the record, your Chrome/Firefox extension handles absolute paths fine.
The message is really
Could not load 'asciidoc.styles': {path}
or does the{path}
variable get correctly replaced?
The path gets replaced; {path}
is my own addition to shorten the error message.
The include directive relies on Asciidoctor.js to resolve and read files whereas stylesheets are loaded using VS Code API.
I understand, thanks.
I fiddled around with workspaces:
If I create a workspace, trust it, move the CSS to the workspace folder ... the preview will actually show up as expected, whether it's an absolute or relative path. That's not practical.
If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.
This (User\settings.json):
"extensions.supportUntrustedWorkspaces": {
"asciidoctor.asciidoctor-vscode": {
"supported": true,
"version": "3.0.1"
},
}
... has no effects on the preview.
En tous cas, merci.
That's really valuable, thanks!
Does it change anything if you use forward slashes instead of blackslashes: F:/Archive/Configurations/CSS/adoc-final.css
?
If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.
I'm pretty sure this case works fine on Linux/macOS...
Would you be kind enough to repeat those tests using the built-in Markdown extension? Since the code is heavily inspired by this extension I want to make sure that we didn't mess things up!
Thanks
An important note, the path is relative to the workspace directory. For instance:
.
├── doc
│ └── index.adoc
└── styles
└── custom.css
2 directories, 2 files
The relative path should be: ./styles/custom.css
(and not ../styles/custom.css
)
If I keep the CSS and .adoc in separate folders, but add both folders to the trusted workplace ... the preview won't show up with the CSS, specified with its absolute path.
I can confirm that it does not work on Linux as well. The good news is that it's working on the Markdown extension so definitely something is wrong... 🐛
Description
The preview pane is unable to load our custom stylesheet.
System Information
VSC information: Version: 1.68.1 (user setup) Commit: 30d9c6cd9483b2cc586687151bcbcd635f373630 Date: 2022-06-14T12:48:58.283Z Electron: 17.4.7 Chromium: 98.0.4758.141 Node.js: 16.13.0 V8: 9.8.177.13-electron.0 OS: Windows_NT x64 10.0.19044
VSC extension version is 3.0.0 (pre-release)
To Reproduce
Ensure the stylesheet is in the path specified in the Asciidoc > Preview: Style setting. (In my setup, the path is explicit, not relative.)
Open an AsciiDoc file. Open the preview. A message displays: "Could not load 'asciidoc.styles': [path to stylesheet]
Close VSC and reopen. The same file and preview pane display, but inside the preview pane, a message displays: "An error occurred while loading view: asciidoc.preview"
Screenshots & Files
Stylesheet: vscode-asciidoc-preview.zip