How do you save markdown in database and render it?
Hi! I'm using next.js with react-markdown to render. For my editor, i use react-markdown-editor-lite. I save the markdown data in my database as raw as it is
You can see how messed up it is over at https://ku-di.com/ku-di/p/we-just-launched
I'm using react-markdown because it's light(bundle size) and doesn't need extra layout adjustments unlike markdown-it which is heavy and i need to do some extra css adjustments to my container.
If you see the doc handleEditorChange returns HTML and text, save returned HTML as string in database To show it use following code block
@ThatJsDev Actually, i save the text returned from handleEditorChange in the database. I think it's not advised to render inside dangerouslySetInnerHTML.
Here's an example of what https://github.com/HarryChen0506/react-markdown-editor-lite returns as text: All you need is your **Ku-di** profile link and that's it.\r\n\r\n\r\n\r\n\r\n\r\n## Features\r\n\r\n**Ku-di** has some awesome features that you'll love.\r\n\r\n\r\n\r\n\r\n\r\n1.
This messed up the way of dealing with newlines which i previously did per Makerlog's way
Anyways, i fix the issue by following what nextjs-react-landing-blog did. But in my case i used Chakra-UI instead of MUI.
Thanks for the suggestion.
I would save the markdown in the database and return html from the request. Doing this gives you an opportunity to cache it as it is returned which you can purge should a user change it.
@nblackburn I don't want to do any extra work like turn markdown into html. I'd prefer the Markdown renderer do the work for me. I might consider it for another project but i wonder if there's any benefits of using this approach with nextjs
@waptik Markdown renders directly to HTML (which is what the renderer does) so you are not doing any extra work. All you do is grab the markdown from the database and render it using the renderer before it is returned.
The golden rule is to always retain the original as it is the single source of truth.
You can cache it on the first time it is rendered and just return the cached version skipping the need to render it each time.
Alternatively you can just have two fields in the database, one for the markdown and another for html and do it like that but that feels messy to me hence why I suggested a cleaner approach.
Not related with the packages you're using but maybe it helps. GitHub has a markdown free API that you could use: https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown
I use it in my webiste and what I do is call it to transform my markdown to HTML right before I save an article. that way I can save both the markdown (for when I want to edit an article) and the HTML (to render it in the blog)
The only limitation of the API is that the markdown should be 400kb or less.
@uf4no This is definitely a great product. The limit is very reasonable and I doubt I'd ever pass that or even reach 100kb for a simple post/comment/profile description. I might I might replace the current stack I have with this one.
Please sign in to leave a comment.