Code sample highlighting removed after load

[wopian]

Describe the bug

Once the API documentation has finished loading, all free-form code samples that were previously highlighted show up as plaintext (with the DOM nodes responsible for highlighting removed from the <code> blocks).

This only affects redoc-cli bundle app.yaml. redoc-cli serve app.yaml keeps the code highlighting as expected.

Expected behaviour

Code samples are highlighted in production builds.

Minimal reproducible OpenAPI snippet(if possible)

(Note: more obvious with larger spec files that take longer to render DOM - this example is near instant)

// package.json
{
  "scripts": {
    "build": "openapi bundle --output app.yaml",
    "serve": "redoc-cli serve app.yaml",
    "bundle": "redoc-cli bundle app.yaml --output docs/index.html",
    "start": "npm run build && npm run serve",
    "start:bundle": "npm run build && npm run bundle"
  },
  "dependencies": {
    "@redocly/openapi-cli": "^1.0.0-beta.76",
    "redoc-cli": "^0.13.2"
  }
}

# openapi.yaml
openapi: 3.0.2
info:
  title:  API
  version: 0.1.0
  description:
    $ref: "./description.md"
servers:
  - url: 'https://api.example.com'
    description: Production Server

<!-- documentation.md -->
# Introduction

### Registration Request

#### application/json

```json5
{
    client_name: "<desired client name>",
    token_endpoint_auth_method: "client_secret_basic|client_secret_post",
    scopes: ["<desired scope>"], // Optional, if not provided you will obtain default scopes
    grant_types: ["authorization_code", "client_credentials", "refresh_token"], // Optional, default is authorization_code
    redirect_uris: ["<HTTPS URI>"], // Required if authorization_code grant was requested
    isProtectedResource: true|false,
    scopePrefix: "<scope prefix>"   // Required for protected resources
}

Screenshots

https://user-images.githubusercontent.com/3440094/147754111-63abeedb-c41a-490a-85eb-5eceae8ac147.mov

[uilton-oliveira]

I also noticed this bug.. Any news on this?

[brettgoss]

I'm also experiencing this issue. Oddly, it seems to be only when using redocly-cli, and applies to json but not js language types.

From what I can tell, the js type actually breaks each character or highlight group out into a separate span element within the code element, like this:

whereas the json is just a big stringified json blob like this:

The only real difference that I notice between the other docs and the redocly-cli version is that the docs without syntax highlighting have a html= attribute on the same element as the redoc-markdown class, and that attribute seems to have a value of all of the correct html with the individual span elements for each highlighting group. So it seems like the elements for syntax highlighting and being generated, they just aren't making it to the DOM as their own elements and instead are left in the redoc-markdown elm in the html= attribute.

If it helps, I'm using the latest @redocly/cli@1.2 and building the docs with the build-docs command. Using the same underlaying version of redoc (v2.1.2) used by the cli but with Redoc.init() does not result the same bug.