Problems rendering Markdown commands!

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;

What do you mean by this?

Also, FYI.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.