Syntax highlighting broken alongside 1Password extension

[amadeann]

Hi there,

Code samples in the docs miss syntax highlighting when I have 1password extensions in MS Edge on Windows 11 enabled. Here's how it looks with 1password enabled:

I'm getting the following console error. This error is there both with 1password disabled and enabled, so it appears to be coming directly from Statamic docs, not the extension. I.e. the JS in the docs seems to be broken. Visually, without browser extensions like 1password enabled that bug doesn't break the site. However, that bug in JS trips up the browser extensions somehow, which then breaks the layout.

site-BExdU4Eu.js:6  Uncaught TypeError: Cannot redefine property: $persist
    at Object.defineProperty (<anonymous>)
    at E (site-BExdU4Eu.js:6:51173)
    at site-BExdU4Eu.js:6:15375
    at Array.forEach (<anonymous>)
    at Object.au [as plugin] (site-BExdU4Eu.js:6:15364)
    at Object.md [as start] (site-BExdU4Eu.js:86:8003)
    at HTMLDocument.<anonymous> (site-BExdU4Eu.js:87:9955)

When I dig into console errors, it appears to be coming somehow from "persist" alpine plugin seems to be loaded twice:

[aerni]

Same issue in Chrome on macOS. Disable 1Password and syntax highlighting is back.

https://github.com/user-attachments/assets/67fd263f-9f3d-4ddd-8946-1ea595046787

[duncanmcclean]

Thanks for reporting! I've noticed it too.

As soon as you disable the 1Password extension, the syntax highlighting renders correctly so it's got to be something wrong with the extension. I've logged a support ticket with them - hopefully they'll be able to fix it on their end. 🤞

FYI: The JavaScript error should be fixed now. It was unrelated.

[amadeann]

@duncanmcclean Thank you for the reply. ~On my end now syntax highlighting works fine, even with 1password enabled.~

Update: actually no, on page refresh syntax highlighting broken again. But the initial JS error I mentioned is gone. So seems what you're saying is true, the bug is likely with 1password.

Just I still don't understand something. When I stop the execution of the page right after loading (or let the page open uninterrupted with 1password disabled), the syntax highlighting doesn't have language-antlers class on pre tag, as here:

When I let the page execution run uninterrupted with 1 password enabled, the language-antlers CSS class is added to the pre element:

It seems very strange that having 1password enabled would cause some CSS classes specific to torchlight syntax highlighting being added.

[amadeann]

One more observation around this: On first page load, the syntax highlighting is broken. But when I navigate to anything in the sidebar menu (or even "reopen" the same page via sidebar link), syntax highlighting gets fixed:

[duncanmcclean]

Just heard back from 1Password:

I can confirm there's currently a known issue where 1Password browser extension breaks syntax highlighting on certain webpages. Our development team is investigating this, and I've added you as an affected user to the internal issue we have open.

I'm not able to offer a timeframe for when a fix will be available, but I recommend keeping 1Password up to date to ensure you receive all fixes and improvements as soon as they're released.

[duncanmcclean]

This seems to be resolved now.