Ok, what did I do wrong?
I added marked as a dependency but it is not recognised in code:
https://codesandbox.io/s/o7loy7kpx9
So in which file are you using it?
This is my first attempt with codeSandbox. I added the dependency but “marked” is not recognised in index.js.
Clearly I missed a step somewhere.
I don’t see anything related to marked
inside index.js?
createMarkup() {
return {
__html: marked(this.props.md)
}
}
and
render() {
let value = this.state.md;
return (<div>
<div className="left">
<h3>Input markdown here:</h3>
<textarea value={this.state.md} onChange={this.updatePreview.bind(this)}></textarea>
</div>
<div className="right">
<h3>Your markdown preview:</h3>
<div className="outputbox" dangerouslySetInnerHTML={{ __html: marked(value) }}></div>
</div>
</div>)
}
Okay, so if you click the link from your first post, what do you see? I only see some default app and marked
in the dependency list. So, I have no idea what you tried.
Anyway, here is what worked for me. Orginal code index.js
:
import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<h2>Start editing the to see some magic happen {"\u2728"}</h2>
</div>
);
render(<App />, document.getElementById("root"));
Working test (at least confirming that marked
works):
import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import marked from 'marked';
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const createMarkup = (val) => {
console.log(marked(val))
}
createMarkup("# test")
const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<div dangerouslySetInnerHTML={{ __html: marked(`## test`) }}></div>
</div>
);
render(<App />, document.getElementById("root"))
So I missed import marked from 'marked';
Thanks for taking the time.
1 Like