Skip to content

Conversation

@nktnet1
Copy link

@nktnet1 nktnet1 commented Dec 3, 2025

PR Checklist

What is the current behavior?

No syntax highlighting for JSON payload in the web version of MQTTX.

Issue Number

Related to #1362, #1381 and #1390, but for Web.

What is the new behavior?

JSON payload now has syntax highlighting.

Light Theme:

light-theme

Dark Theme:

dark-theme

Night Theme:

night-theme

Does this PR introduce a breaking change?

  • Yes
  • No

Specific Instructions

Are there any specific instructions or things that should be known prior to review?

  1. The theme I use are:

    1. Light: https://github.com/highlightjs/highlight.js/blob/main/src/styles/default.css
    2. Dark: https://github.com/highlightjs/highlight.js/blob/main/src/styles/dark.css
    3. Night: https://github.com/highlightjs/highlight.js/blob/main/src/styles/night-owl.css

    Also, only the JSON language was registered.

  2. With highlight.js, I had to use highlight.js@v10.7.3 (instead of 11.x.x) and @highlightjs/vue-plugin@1.0.2 (instead of 2.x.x) for compatibility with Vue 2.

    There were also typescript issues that required ./src/types/highlight.d.ts to be included, where type any was used. Haven't figured out why or how else to work around this.

@nktnet1 nktnet1 changed the title feat: add syntax highlighting using highlight.js feat: add syntax highlighting for payload in web version using highlight.js Dec 3, 2025
@nktnet1 nktnet1 changed the title feat: add syntax highlighting for payload in web version using highlight.js feat: add syntax highlighting for payload in web version Dec 3, 2025
@nktnet1 nktnet1 changed the title feat: add syntax highlighting for payload in web version feat: add syntax highlighting for JSON payload in web version Dec 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

1 participant