How do I need to configure VSCode so that I get syntax highlighting?

[IHIutch]

I think I have the file association correct HTML (Twig), but I'm only seeing white text 🤔 . Any suggestions?

[kaermorchen]

🤔 Hm...

You don't need some specific settings for the syntax highlighting. It should work by default.

Do you have the other features like the autocompletion of the twig filters and functions?

[IHIutch]

Doesn't seem like it :/

Here's my VS Code details

Version: 1.81.0 (Universal)
Commit: 6445d93c81ebe42c4cbd7a60712e0b17d9463e97
Date: 2023-08-02T12:40:02.782Z (1 wk ago)
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Darwin arm64 22.5.0

I'm also using

MacBook Pro, 16-inch, 2021
13.4.1 (22F82)

Please let me know if there's any additional information I can provide!

[kaermorchen]

Do you see just white text without any other syntax highlighting? Can you show me a screenshot?

Do you use some other twig extensions?

Can you show me your custom file association settings in your vscode settings, if you have it?

[IHIutch]

https://github.com/kaermorchen/twig-language-server/assets/20825047/e2960d34-4af4-4b61-b0f0-5785be02f203

Here's my settings, I tried disabling everywhere that referenced twig for a fresh install

{
  "editor.renderWhitespace": "none",
  "breadcrumbs.enabled": true,
  "editor.renderControlCharacters": false,
  // "editor.fontFamily": "Operator Mono",
  // "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 24,
  "editor.formatOnSave": true,
  "editor.fontFamily": "'SourceCodePro-Medium', Menlo, Monaco, 'Courier New', monospace",
  "explorer.decorations.badges": false,
  "emmet.includeLanguages": {
    // "twig": "html",
    "eex": "html"
  },
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1px",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1px 0 0",
          "borderStyle": "dotted",
          "borderColor": "white",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  "editor.minimap.enabled": false,
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.suggest.insertMode": "replace"
  },
  "[mjml]": {
    "editor.defaultFormatter": "attilabuti.vscode-mjml",
    "editor.suggest.insertMode": "replace"
  },
  "[HTML (Eex)]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // "[HTML (Twig)]": {
  //   "editor.defaultFormatter": "stanislav.vscode-twig"
  // },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",
  "vetur.grammar.customBlocks": {
    "page-query": "graphql",
    "static-query": "graphql"
  },
  "vetur.validation.template": false,
  "files.associations": {
    "*.eex": "html",
    "*.mdx": "mdx",
    "*.php": "php",
    "*.jsx": "javascriptreact",
    "*.css": "postcss",
    // "*.twig": "html"
  },
  "settingsSync.keybindingsPerPlatform": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vscode-pets.position": "explorer",
  "vscode-pets.petSize": "medium",
  "workbench.editor.untitled.hint": "hidden",
  "editor.accessibilitySupport": "off",
  "redhat.telemetry.enabled": true,
  "security.workspace.trust.untrustedFiles": "open",
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "plaintext": true,
    "markdown": true
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "python.defaultInterpreterPath": "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python",
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "Community Material Theme Darker High Contrast",
  "editor.tokenColorCustomizations": {
    "[Community Material Theme Darker High Contrast]": {
      "textMateRules": [
        {
          "scope": [
            "string.unquoted.js",
            "constant.other.object.key.js",
            "meta.function-call.with-arguments.js"
          ],
          "settings": {
            "foreground": "#EEFFFF"
          }
        }
      ]
    }
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "react-native-tools.showUserTips": false,
  "totalTypeScript.hideAllTips": false,
  "totalTypeScript.hideBasicTips": false,
  "totalTypeScript.hiddenTips": [
    "passing-generics-to-types",
    "typeof",
    "typing-function-parameters",
    "union-type",
    "literal-type",
    "ts-object-type",
    "array-type",
    "basic-types",
    "optional-object-property",
    "null-keyword",
    "undefined-keyword",
    "interface-declaration",
    "variable-type-annotation",
    "any-type",
    "non-null-expression",
    "as-assertion"
  ],
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "window.zoomLevel": -1
}

[antikmozib]

Have the same issue. Extension not working.

[kaermorchen]

I have found the bag and fixed it in. Check out the latest version.

[IHIutch]

Thats definitely better. I'm getting some syntax highlighting and some autocomplete

[IHIutch]

Looks like my syntax highlighting is similar to yours if I'm using the Dark Modern theme

[IHIutch]

https://github.com/kaermorchen/twig-language-server/pull/18 Resolves any additional issues I was having with HTML syntax highlighting.

Thanks for working together @kaermorchen