Performance degradation in Preview mode due to lengthy code syntax highlighting

[devleejb]

Description:

When working with lengthy code blocks, the Preview performance degrades significantly when syntax highlighting is applied. This occurs in both edit and preview modes during typing, causing delays with text, code, and equations. However, typing in edit mode does not exhibit this lag. Removing all equations (by deleting $ characters) does not resolve the issue, but removing all code (by deleting backtick characters) does eliminate the lag.

It appears that the performance issues may be related to the size of the DOM tree due to the creation of multiple DOM elements for each keyword in the code syntax highlighting functionality.

Why:

To maintain a smooth user experience, especially when interacting with lengthy code blocks during the Preview mode.

Reference:
https://web.dev/articles/dom-size-and-interactivity

[devleejb]

Related to #393.