VSCode Documentation/Help Browser

[mjsyts]

I’m running SC in VSCode and I mostly love it, but there are a few things that are bugging me.

The biggest issue is that the help browser doesn’t open source files. Is there a fix for this?

Less pressing, but still annoying is that the help browser code examples look strange. I’m using the Tomorrow Theme, but I’ve modified my User Settings JSON to my preferences.

Lastly, I think someone has mentioned this, but it would really be nice to be able to execute code from the help broswer without making a new set of parenthesis and pasting in the example code.

My JSON

{
  "workbench.colorTheme": "Tomorrow",
  "workbench.iconTheme": "vs-minimal",
  "C_Cpp.default.compilerPath": "/usr/bin/clang",
  "supercollider.sclang.cmd": "/Applications/SuperCollider.app/Contents/MacOS/sclang",
  "supercollider.sclang.confYaml": "/Users/josiahsytsma/Library/Application Support/SuperCollider/sclang_conf.yaml",
  "security.workspace.trust.untrustedFiles": "open",
  "files.autoSave": "afterDelay",
  "editor.fontFamily": "Fira Code",
  "editor.renderLineHighlight": "gutter",
  "workbench.colorCustomizations": {
    "editor.bracketPairColorization.enabled": false,
    "editor.guides.bracketPairsHorizontal": false,
    "editor.guides.highlightActiveBracketPair": true,
    "editor.lineHighlightBackground": "#efefef",
    "editorBracketHighlight.unexpectedBracket.foreground": "#c82829",
    "editorLineNumber.foreground": "#4d4d4c"
  },
  "editor.tokenColorCustomizations": {
    "[Tomorrow]": {
      "textMateRules": [
        {
          "name": "Keywords",
          "scope": "keyword.control",
          "settings": {
            "foreground": "#c82829",
          }
        },
        {
          "name": "Environmental Variable",
          "scope": "variable.environment",
          "settings": {
            "foreground": "#eab700",
          }
        },
        {
          "name": "Operator",
          "scope": "keyword.operator",
          "settings": {
            "foreground": "#4d4d4c",
          }
        },
        {
          "name": "Class",
          "scope": "entity.name.class",
          "settings": {
            "foreground": "#4271ae",
          }
        },
        {
          "name": "Symbol",
          "scope": "constant.other.symbol",
          "settings": {
            "foreground": "#718c00",
          }
        },
        {
          "name": "Number",
          "scope": "constant.numeric",
          "settings": {
            "foreground": "#8959a8",
          }
        },
        {
          "name": "Variable",
          "scope": "variable",
          "settings": {
            "foreground": "#4d4d4c",
          }
        },
        {
          "name": "Comment",
          "scope": "comment",
          "settings": {
            "foreground": "#8e908c",
          }
        },
      ]
    }
  },
  "editor.formatOnPaste": true,
  "editor.bracketPairColorization.enabled": false,
  "editor.autoClosingBrackets": "beforeWhitespace",
  "cmake.configureOnOpen": true,
  "bitoAI.codeCompletion.enableAutoCompletion": true,
  "bitoAI.codeCompletion.enableCommentToCode": true,
  "git.openRepositoryInParentFolders": "never",
  "cmake.options.statusBarVisibility": "compact",
  "vslilypond.general.pathToLilypond": "/usr/local/Cellar/lilypond/2.24.3/bin/lilypond",
  "vslilypond.intellisense.enabled": false,
  "redhat.telemetry.enabled": false,
  "editor.inlineSuggest.showToolbar": "always",
}

[scztt]

There are two problems with the code snippets in help…

1. The docs system uses the CodeMirror js plugin to display source code. This has it’s own syntax highlighting. To match code snippets to the VSCode color theme, we’d need to set these (I think the selectors are here: supercollider/HelpSource/codemirror.css at develop · supercollider/supercollider · GitHub). This can probably be done in the frontend.css that we use to map vscode theme colors to css selectors used by the docs system. Howeverrrrrrrrrrrr…
2. Last I checked, VSCode does not currently have an API to allow plugins to access syntax highlighting colors. This is an open feature request that a lot of people are asking for: [api] Allow extensions to use the syntax highlighter · Issue #56356 · microsoft/vscode · GitHub . Without this, we wouldn’t be able to match syntax highlighting between the docs snippets and the vscode editor sadly.

I think the best we can do is something like this:

1. Set some reasonable css styles for the code snippets, based on the parts of the VSCode theme we DO have access to (this is done in the frontend.css).
2. Based on those styles, choose syntax highlighting colors for CodeMirror that are at least readable (basically: if the background is dark, pick a light theme for highlighting, or vice versa).|
3. Advocate for an API to get the actual syntax theme colors on the github feature request I posted. I suspect this will get implemented eventually, it’s seems important for notebook type extensions, which are very popular.