search

bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
10.02k stars 1.28k forks source link

Add Syntax Highlighting for Code Blocks and Inline Code #5895

Open skiniks opened 2 weeks ago

skiniks commented 2 weeks ago

Describe the Feature

Earlier today, @patak-dev made a post highlighting the importance of syntax highlighting, especially for developers sharing accessible code snippets rather than images. This feature would not only improve accessibility but would continue to foster a developer-friendly environment, promoting more experimentation with the protocol.

Here’s the original post:

"Are there plans to add syntax highlighting to code blocks and inline code to Bluesky? It is one of the top features devs appreciated in Elk. Being able to share a11y code snippets instead of images makes a huge diff. I think it could help a lot to promote tinkering with the protocol among devs."

@gaearon also expressed support for the idea, stating:

"We should add that imo. The question to me is, do we detect markdown code fences or do we have some special facets for code?"

I am happy to contribute time to help work on this feature once a direction has been chosen.

Attachments

Here's the attachment from @patak-dev's post as an example:

bafkreidtkxfrfe4jlaw2eixfeqtz3gpdpvvanfbcqmyhqb7l4dv5w74c7u

Describe Alternatives

No response

Additional Context

No response

Gugustinette commented 1 day ago

I guess @antfu Shiki would be a good fit ?

uncenter commented 1 day ago

I guess @/antfu Shiki would be a good fit ?

Some mention of it already here and later in the thread: https://bsky.app/profile/ryanskinner.com/post/3l7teiwotse2q

antfu commented 11 hours ago

Let me know if you need any help on adopting to Shiki :)

skiniks commented 4 hours ago

@antfu I did some digging, and it looks like the incompatibility with React Native is due to the use of RegExp's d flag to access match.indices for capture group position tracking, which isn't currently supported by Hermes. this appears to be the only incompatibility i could find with @shikijs/engine-javascript.

would love to hear your thoughts on potential solutions—perhaps adding a fallback/simulation mechanism for environments without d flag support?

antfu commented 3 hours ago

Uhm, I see. The d flag is a fundamental requirement for it to work, I don't think it would be easily polyfillable. On the other hand, does React Native support WASM? Or maybe C binary? We could use that to create a custom engine for Shiki with thr native binding if possible.

skiniks commented 1 hour ago

unfortunately no WASM support natively in React Native. C binary is definitely possible and I believe that would allow for the use of Oniguruma directly