Syntax Highlighting for Code Snippets

Hey everyone, had a question on what can be done with the “Rich Text” content type for code snippets.

I’m trying to make a code snippet directory for Javascript

I read in the docs that Softr can handle markdown via Rich text, so ideally I was hoping to put some JavaScript code in like this (back ticks to denote that its a code in markdown)

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

This was the result:

image

It seems like the rich text field type isn’t able to recognize the back ticks that would usually create some form of code highlighting

Best case scenario id have full multi colored highlighting like youd see in vs code

If there is no way to do this with Softr out of the box, is there a way for me to customize a block to allow for the feature im looking for? (I have dev experience). Thanks!

Hello,

Please check this article, it will help you to better understand where and how to implement Markdown within Airtable.

Thus, when you proceed with it there should not be any issues with Softr.

Thanks!