feat(NcRichText): highlight code syntax if language provided

[Antreesy]

☑️ Resolves

• Fix Syntax Highlighting for Code-Boxes nextcloud/spreed#13687
• install rehype-highlight lib v7.0.1
• use when render markdown
• apply colors from github light/dark theming

Supported languages: https://github.com/wooorm/lowlight/blob/main/lib/common.js

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Introduce new prop?
  • We don't support language syntax before, so use-extended-markdown without providing lang prefix would work as before
• Color themes?
  • I haven't found a better way to do it (see PR). Suggestions are welcome

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[Antreesy]

cc @juliusknorr for possible affect on Office apps

[juliusknorr]

cc @juliusknorr for possible affect on Office apps

Nice one, all good from my side. Only relevant usage is comment rendering in deck, where this works as expected 👍

[ShGKme]

Nice!

But for NcRichText it costs about 6.6 kB css + 191 kB js (297 -> 488 kb) in production minified build.

[ShGKme]

We can load it async on the first code block render, but I don't know if it worth it.

@susnux What do you think?

[susnux]

We can load it async on the first code block render, but I don't know if it worth it.

Yes I think it makes sense, sadly that plugin forces to bundle languages.
For text we load the languages dynamically which reduces the size a lot.

[ShGKme]

We can load it async on the first code block render, but I don't know if it worth it.

Yes I think it makes sense, sadly that plugin forces to bundle languages. For text we load the languages dynamically which reduces the size a lot.

Proposal:

1. Add module-scope reactive property aka highlightAvailable
2. Use rehypeHighlight if highlightAvailable === true
3. Add a function to load rehypeHighlight with dynamic import()
4. Inside rehype2react check for code block and init loading rehypeHighlight from p.3

In theory when it is loaded p.1 changes and triggers rerender in p.2.

[Antreesy]

Added, see screenshot from styleguide network tab.

Did a quick test, remark-gfm is 40kB and could be extracted as well. Shall we do it?

[DorraJaouad]

Tested, looks good

[Antreesy]

Squashed and added a unit test, rewrote Promise syntax to async/await - no other changes
Tested with Talk

[Antreesy]

/backport to next

[jclsn]

How would I test this?

[ShGKme]

How would I test this?

You can make a development setup: https://github.com/nextcloud-libraries/nextcloud-vue?tab=readme-ov-file#development-setup

And then use vue-styleguidist: https://github.com/nextcloud-libraries/nextcloud-vue?tab=readme-ov-file#styleguide

[jclsn]

Thanks, I'll just wait until it's shipped then.

[ShGKme]

Thanks, I'll just wait until it's shipped then.

If you want to test it in a specific app, you can also link it with npm link

[jclsn]

I am using the docker installation of Nextcloud. It is probably a bit more of a hassle. If it ships with the next update, it's fine.