Comments (11)
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:
- 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:
- 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 ?
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.
Related Issues (20)
- Accessing image properties from renderer isn't working. HOT 1
- Add anchor tag support for Page Navigation HOT 3
- Update @graphcms/html-to-slate-ast to use newer versions of Slate HOT 3
- <p> tag className formatting "overwrites" <a> tag ClassName formatting HOT 2
- Import element fuctions to reuse on my own code HOT 3
- Impossible to render a clickable image with Reactjs and rich-text HOT 9
- Video Props typings are not correct HOT 5
- Error: Cannot find module './xhr-sync-worker.js' HOT 7
- ClientError: expected RichText raw value to be object: HOT 1
- Newline added by astToHtmlString for link object
- <p></p> returned in empty rich text box
- Feature request: Allow assign class name directly to image in rich text editor
- GraphCMS Marcom website says to use children as prop HOT 1
- React duplicate key issue HOT 3
- [help wanted] How to zoom an image rendered by rich-text-renderer with react-awesome-lightbox library HOT 1
- Is there a way to render iFrame? HOT 1
- Link is not recognized HOT 3
- Images are being parsed as links HOT 1
- RichText rendering nested li's causing nextjs hydration errors HOT 2
- Link embed with Assets not working HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rich-text.