feat: add syntax highlighting for JSON payload in web version

[nktnet1]

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:

Dark 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.

[ysfscream]

Hi @nktnet1,

Sorry for the late response. Thank you so much for your contribution to MQTTX!

I have a few suggestions and questions before we can merge this:

1. Light theme color issue: The syntax highlighting colors for the published message box (right side) don't look quite right in the light theme. Could you please adjust and optimize the colors for better readability?

   As a suggestion, you might consider removing the highlighting from the publish message box entirely, since users can already see the syntax highlighting in the editor when composing messages. This is how the desktop version works - you can use it as a reference.

2. Code duplication: I noticed that night-owl.scss and dark.scss have identical code. Could you refactor these to share a single file and reduce code duplication?

3. Performance concerns: Since MQTT can handle a very high volume of messages, I'm a bit concerned about the performance impact of adding this component to every message item. A few questions:

   • How accurate is autodetect in practice?
   • Have you tested with large message volumes?

   I would suggest adding a toggle/switch in settings to enable/disable syntax highlighting. This way users can turn it off to improve performance when dealing with high message throughput.

4. Language detection: When syntax highlighting is enabled and the received payload format is JSON, I'd recommend explicitly setting language="json" instead of using autodetect. This would improve both accuracy and performance.

Looking forward to your thoughts on these points. Thanks again for your work on this feature!

[nktnet1]

Hey @ysfscream,

Thanks for the review :).

1. Personally, I think it would be nice to still have syntax highlighting on MsgRightItem, especially when scrolling to see past messages. However, since the Desktop version doesn't do this, I've removed it for consistency (8f310f9).

2. I forgot to copy the right theme when refactoring (92a6b39) - fixed in 7af62c5.

3. I've updated the MsgLeftItem to conditionally show JSON depending on the chosen receivedMsgType. Autodetect has been removed in favour of language="json" (223fd1d).

   night-theme-syntax-highlighting-toggle.webm

[ysfscream]

Looks good to me now. Thank you so much for your contribution and for addressing all the feedback! 🎉