Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Syntax highlighting is broken in server response #6508

Closed
Gragog opened this issue Oct 12, 2020 · 2 comments · Fixed by #6871 or #7199
Closed

Syntax highlighting is broken in server response #6508

Gragog opened this issue Oct 12, 2020 · 2 comments · Fixed by #6871 or #7199

Comments

@Gragog
Copy link

Gragog commented Oct 12, 2020

Q&A (please complete the following information)

  • OS: [Ubuntu 20.04.1]
  • Browser: [Opera]
  • Version: [71]
  • Method of installation: [npm]
  • Swagger-UI version: [^3.32.2]
  • Swagger/OpenAPI version: [OpenAPI 3.0]

Content & configuration

Example Swagger/OpenAPI definition: not relevant
Swagger-UI configuration options: default options (React)

Describe the bug you're encountering

The response body that is shown when trying out an API endpoint uses syntax highlighting.
This highlighting is broken and highlights the response wrong. In my case there are many hexadecimal string-IDs in the response which don't get recognized as strings, causing many HTML tags to alternate between a character and a number (see screenshot), making the response hard to read and causing the browser tab to hang on huge responses.

To reproduce...

Steps to reproduce the behavior:

  1. Try out an API that returns the following JSON response
  2. Click on 'Execute'
  3. See error
{
  "request": {
    "parma": "de",
    "parmb": "fuzzy",
    "parmc": "rel_desc",
    "parmd": 1,
    "parme": 1
  },
  "result": {
    "count": 1,
    "total": 66014291,
    "array": [
      {
        "id": "9d20d34d755b244b808159c3d03998c9d9180b7964699465c2ac0ab79e78df3b",
        "number": "4011885192793",
        "title": "Golden Head - schwarz",
        "description": "4 Kreditkartenfächer mit Druckknopfverschluss",
        "category": {
          "id": null
        },
        "image": {
          "url": "https://cdn.example.com/dynimg/b-BivUcRyqh8xrxnUefwwr5RzKY-Pw9q9LKbtkA0_z9EIBjuz3A4vS2TFag/671296140_large.png"
        },
        "thumbnail": {
          "url": "https://cdn.example.com/dynimg/QX-6zM7oXtog6wKgeWcAvfudc_-yTA2FcxKY-Pw9q9L94KbtkA0_z9EIBjuz3Xa5Wqp3cC18WIYE230-c/671296140_small.png"
        },
        "score": 0
      }
    ]
  }
}

Expected behavior

Syntax highlighting should work correctly, as it did in swagger-ui-react version 3.32.1

Screenshots

Broken

Broken

Expected (version 3.32.1)

Expected

Additional context or thoughts

It seems the strings in the response are highlighted from their end to the beginning of the next string, like if the first quote is overlooked. The JSON itself has a valid syntax.
The issue exists even in the latest version (3.35.0).

@andrefilipesilva73
Copy link

Same happening to me :( Current specs worked well before and work well on https://petstore.swagger.io/

tim-lai pushed a commit that referenced this issue Feb 3, 2021
Refs #6508 

* Add language prop to HighlightCode component

* Use language prop for JSON HighlightCode responses in response-body.jsx
@thSoft
Copy link

thSoft commented Feb 11, 2021

Unfortunately, I can still reproduce this bug by using the SwaggerUI component in swagger-ui-react.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants