I’m developing a Markdown Previewer, but I’m having a problem.
Not all Markdown commands are working, I’m using the React Markdown library and a plugin called remarkGfm.
This is my code:
import './App.css';
import React, { Component } from 'react';
import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm';
class App extends Component {
constructor(props) {
super(props);
this.state = {
textAreaValue: "",
};
}
handleInputChange = (event) => {
this.setState({ textAreaValue: event.target.value });
};
render() {
return (
<div class="mt-5 mb-5">
<h1 className="text-white fs-3 mb-3">Editor:</h1>
<textarea
rows="10"
cols="50"
value={this.state.textAreaValue}
onChange={this.handleInputChange}
></textarea>
<br />
<br />
<h2 className="text-white">Previewer:</h2>
<div id="preview" className="preview bg-white">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{this.state.textAreaValue}</ReactMarkdown>
</div>
</div>
);
}
}
export default App;