[Feature]: Syntax-highlighted code blocks on tldraw.com

[nihaocami]

What's the feature?

Hi all,

I wanted to add a simple "code snippet" tool to add syntax highlighted code into the canvas. Is that something in the works or can I potentially add it?

Thx

Where would you like this feature?

The tldraw.com website

Contact Details

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[linear[bot]]

TLD-3168 [Feature]: Code Snippet

[SomeHats]

It's fairly straight forward to add a custom shape for code snippets. Several people have done this with monaco or codemirror. We don't have a specific example, but the AG grid shape example is a good demo of integrating an external library in tldraw as a custom shape.

You could also do this by adding syntax highlighting to tldraw's rich text, which is based on tiptap.

• Tiptap shows how to configure it here: https://tiptap.dev/docs/examples/advanced/syntax-highlighting
• We show how to customize tiptap in tldraw here: https://tldraw.dev/examples/shapes/tools/rich-text-custom-extension

[nihaocami]

@SomeHats Oh I appreciate the info there! but I think maybe I should rephrase my ask here. I am basically wondering if that feature can be added to tldraw.com. I can definitely make a custom build but it is just more convenient/useful to be on the official website. 😄 Unless that does not align with the current plans.

[SomeHats]

Ah sorry! I missed the "On the tldraw.com website" bit of your ask!

[nihaocami]

@SomeHats haha thx for the correction. Is this something that can be assigned to me or will someone else take a look?

[SomeHats]

We don't usually accept user-facing feature contributions from the community because we have a very high and specific design/ux bar for what goes on tldraw.com. You'll probably have to wait for this to be prioritised internally. Sorry!

[github-actions[bot]]

This issue has been marked as stale because it has been open for 150 days with no activity. If there's no further discussion, it'll be closed in 30 days time. If you would like to ensure it stays open, you can comment on the issue and revive the discussion. Or, you can add the 'keep' label to prevent it from being closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 30 days since being marked as stale.