Tell us what’s happening:
Hi, I’m on the second challenge to create the Simple Markdown Previewer in the Front-End Libraries course. I’m completely stuck on one of the first hurdles however, actually importing the library into my code and then using it. I’ve been researching online and all the solutions just don’t make sense to me - there’s clearly a gap in my knowledge but I’m really looking for help understanding exactly what I need to do to import the library suggested in CodePen, and then to utilise it (again, documentation online suggests I use a ‘Marked’ function? Albeit I’m seeing people talk about Dangerouslysetinnerhtml as well which I’m not clear on).
I would please appreciate any help here, I think once I can get the library imported and the markdown function working in my app, I’ll be able to take it from there.
Your code so far
NOTE: I’ve put $ signs in the library links as forum wouldn’t let me post otherwise
import React from ‘https:$//esm.sh/react@18.2.0’
import ReactDOM from ‘https:$//esm.sh/react-dom@18.2.0’
import Markdown from ‘https:$//cdnjs.cloudflare.com/ajax/libs/marked/5.1.2/marked.min.js’;
/* const html = marked.parse(‘# Marked in Node.js\n\nRendered by marked.’) */
const htmlMarkup = marked(‘# Marked in Node.js\n\nRendered by marked.’);
class EditMachine extends React.Component {
constructor(props) {
super(props);
this.state = {
editorText:‘’,
previewText:‘’
};
};
render() {
return (
{htmlMarkup}
);
}
};
const rootEditor = ReactDOM.createRoot(document.getElementById(‘rootEditor’));
rootEditor.render();
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Front End Development Libraries Projects - Build a Markdown Previewer
Link to the challenge:
