search

joyceerhl / vscode-github-graphql-notebooks

Run GitHub GraphQL queries and mutations in VS Code
11 stars 5 forks source link

Improve output rendering #3

Open joyceerhl opened 2 years ago

joyceerhl commented 2 years ago

Right now everything is just displayed using the builtin application/json mimetype renderer

jason-dour commented 2 years ago

Looking to leverage the extension to assist with prototyping queries. But the output type of text/x-json renders as black text, which on a dark mode theme makes the output difficult to read.

I changed the extension locally, modifying line 226 to use application/json instead of text/x-json and the output now formats and highlights like any other JSON and is legible since it follows standard highlighting/theme.

joyceerhl commented 2 years ago

The switch to text/x-json is because VS Code is moving support for application/json to a third-party extension. @rebornix this sounds like a potential bug in the rebornix.vscode-code-renderer extension? I also noticed the renderer extension is not web-enabled, which makes the GitHub GraphQL extension unusable in web.

rebornix commented 2 years ago

@joyceerhl there would be two types of code highlight support.

The first one is shipped with VS Code, it uses the markdown renderer to highlight the code, like a code block. It has right colors and tokenizations and it should be web enabled.

The catch with first option is it's not an editor, so no folding support. That's when my code renderer extension can be useful.

jason-dour commented 2 years ago

@joyceerhl thanks for the explanation. I spent a fair amount of time trying to figure out why text/x-json was not highlighting. Is that something I can tune somewhere (missing config)?

Web compatibility would be extremely nice as well. :)

joyceerhl commented 2 years ago

@rebornix Ah, I misunderstood the purpose of the code renderer extension. Thanks for clarifying. It looks like your code renderer extension renders as black text--is that expected? As @jason-dour says, this does make the output hard to read on desktop in dark themes: image

@jason-dour I have removed the GitHub GraphQL notebook extension's dependency on rebornix.vscode-code-renderer. You should now be able to install the GitHub GraphQL notebook extension in vscode.dev / github.dev, and you should get syntax highlighting by default.

jason-dour commented 2 years ago

Indeed! It's web version compatible and renders highlighting just fine. Thanks! :)