Dynamic Markdown Blogs in Next.js/React using gray-matter, react-markdown and react-syntax-highlighter by Rishi Raj Jain Rishi Raj Jain is a Front-End Engineer based in New Delhi. He is focused on creating Search Engine Optimized, Bot-Friendly websites, that use modern techniques such as stale-while-revalidate, lazy loading and guarantee quick First Contentful Paint (FCP). Import React from 'react'; import ReactDOM from 'react-dom'; import MDEditor from '@uiw/react-md-editor'; import mermaid from 'mermaid'; const mdMermaid = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it.
One of my biggest mistakes with this blog was not finding a WordPress plugin that would allow me to write my posts with markdown; to this day I still need to write posts in 'Visual' mode and then manually convert the post to HTML for 'Text' mode. One of these days I want to convert existing posts to Markdown and then enable a plugin that will convert Markdown to HTML. This painful process made me ask myself: is there a way I can use Node.js JavaScript to convert HTML to Markdown? There is, and it's called Turndown by Dom Christie.
Convert HTML to Markdown with Node.jsStart by installing Turndown:
Then use Turndown's simple API to convert HTML to markdown:
You can use the interactive Turndown demo to experiment with its capabilities. Turndown has a number of options and allows you to use filters to keep elements you believe could be at risk for improper conversion.
React Convert Markdown To Html
Most developers look for a Markdown to HTML solution so it's rate to find myself in a position to need to convert HTML to Markdown. I look forward to migrating my site's content to Markdown so that writing posts is much less stressful in the future!
React Markdown Editor
| <!doctype html> |
| <htmllang='en'> |
| <head> |
| <metacharset='utf-8'> |
| <metahttp-equiv='X-UA-Compatible' content='IE=edge'> |
| <metaname='viewport' content='width=device-width, initial-scale=1'> |
| <title>Markdown Converter</title> |
| <scriptsrc='//fb.me/react-0.12.2.js'></script> |
| <scriptsrc='//fb.me/JSXTransformer-0.12.2.js'></script> |
| <scriptsrc='//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js'></script> |
| <scriptsrc='//code.jquery.com/jquery-2.1.3.min.js'></script> |
| <linkrel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> |
| <scriptsrc='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script> |
| <style> |
| textarea { |
| height:12em!important; |
| font-family: monospace; |
| } |
| </style> |
| </head> |
| <body> |
| <divid='content'></div> |
| <scripttype='text/jsx'> |
| (function(){ |
| varconverter=newShowdown.converter(); |
| varApp=React.createClass({ |
| getInitialState: function(){ |
| return{ |
| inputText: 'Enter *Markdown text* here.nnFor example, this is a numbered list:nn0. Onen0. Twon0. Threen' |
| }; |
| }, |
| render: function(){ |
| return( |
| <divclassName='container-fluid'> |
| <h2>Markdown Converter</h2> |
| <divclassName='form-group'> |
| <labellabelFor='inputText'>Markdown Input</label> |
| <textarea |
| id='inputText' |
| className='form-control' |
| value={this.state.inputText} |
| onChange={this.onInputTextChange} |
| placeholder='Markdown text' |
| autofocus |
| /> |
| <button |
| className='btn btn-default btn-sm' |
| onClick={this.onClearClick} |
| >Clear Input Text</button> |
| </div> |
| <OutputAndPreview |
| inputText={this.state.inputText} |
| /> |
| </div> |
| ); |
| }, |
| onInputTextChange: function(event){ |
| this.setState({inputText: event.target.value}); |
| }, |
| onClearClick: function(event){ |
| event.preventDefault(); |
| this.setState({inputText: '}); |
| } |
| }); |
| varOutputAndPreview=React.createClass({ |
| render: function(){ |
| varoutputHtml=converter.makeHtml(this.props.inputText) |
| varpreviewHtml=outputHtml.length>0 ? outputHtml : '<p><em>(empty)</em></p>'; |
| return( |
| <div> |
| <divclassName='form-group'> |
| <labellabelFor='outputHtml'>HTML Output</label> |
| <textarea |
| id='outputHtml' |
| className='form-control' |
| value={outputHtml} |
| readOnly='true' |
| placeholder='HTML Output' |
| /> |
| </div> |
| <divclassName='form-group'> |
| <labellabelFor='preview'>Preview</label> |
| <divid='preview'className='bg-info'dangerouslySetInnerHTML={{__html: previewHtml}}/> |
| </div> |
| </div> |
| ); |
| } |
| }); |
| React.render(<App/>,document.getElementById('content')); |
| })(); |
| </script> |
| </body> |
| </html> |
React Markdown Viewer