Any workarounds for code block language? about rich-text HOT 11 CLOSED

It's true that GraphCMS doesn't natively support selecting a language for code blocks within a rich text field. However, what you can do is to can create a new model on GraphCMS for your code blocks and add language as a text field – or any other data you might want to show with your code snippets, like a filename. Then you can query the model within your rich text and get everything you need. Something like this:

Then you need to enable the model to be embedded in your rich text field:

And finally, in your rich text content, you can embed your model with your code and language:

This approach has some downsides, though:

1. You'll see an embed block instead of the actual code. I've discussed this with the GraphCMS team on their Slack channel, but I understand it's a hard one to fix. I created a naïve proposal, which would allow the user to expand the embeds inline, but I assume implementing something like this is not an easy task. Here's the idea I played around with:

2. You can't create code blocks on the fly. When you want to add a new code block, you first need to go to the code block model and create content there, and only then you can embed the code block. The embed modal doesn't offer an action for creating new content:

from rich-text.

Check out the custom embeds section on the documentation for an example of how to render embeds on the front end.

from rich-text.

That is exactly how I implemented it! I'm planning at some point to switch model to use version control system for what it does the best - edit and store code.

Should be trivial to parse the content even with the direct urls in the text to GitHub gists. Lots of options as soon as you start looking beyond the basic editor.

from rich-text.

I'm glad to hear you got it working. Feel free to close this issue.

from rich-text.

What to use to do sysntax highlighting ?
Im using next.js with @graphcms/rich-text-react-renderer to render the content.

from rich-text.

Hi @AzadKshitij, you can try Prism for syntax highlighting. There's an example on the React rich text renderer page.

from rich-text.

Hi, @jussivirtanen Thank you very much for your help.

from rich-text.

Hi @AzadKshitij, you can try Prism for syntax highlighting. There's an example on the React rich text renderer page.

How should i render this corectly. can you please provide some code for #57 (comment) method!

from rich-text.

What to use to do sysntax highlighting ?

https://highlightjs.org/

from rich-text.

https://github.com/react-syntax-highlighter/react-syntax-highlighter works very nicely with React-based frameworks

from rich-text.

Late to the party, but this is what I do:


I render it with gatsby-plugin-mdx. It works... 🤷🏻‍♂️

from rich-text.