如何制作Reaction Stack代码段

wtzytmuj  于 2022-10-15  发布在  React
关注(0)|答案(1)|浏览(147)

我正在尝试使用Stack代码片段显示我的代码。谁能告诉我这个React片段出了什么问题？
这是正在工作的Codepen。

  1. import { marked } from "https://cdn.skypack.dev/marked@4.0.16";
  2. //import DOMPurify from "https://cdn.skypack.dev/dompurify@2.3.8";
  4. const sampleText = `# Welcome to my React Markdown Previewer!
  6. ## This is a sub-heading...
  8. ### And here's some other cool stuff:
  10. Heres some code, \`<div></div>\`, between 2 backticks.
  12. \`\`\`
  13. // this is multi-line code:
  15. function anotherExample(firstLine, lastLine) {
  16.   if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
  17.     return multiLineCode;
  18.   }
  19. }
  20. \`\`\`
  22. You can also make text**bold**... whoa!
  23. Or _italic_.
  24. Or... wait for it...**_both!_**
  25. And feel free to go crazy ~~crossing stuff out~~.
  27. There's also [links](https://www.freecodecamp.org), and
  28. > Block Quotes!
  30. And if you want to get really crazy, even tables:
  32. Wild Header | Crazy Header | Another Header?
  33. ------------ | ------------- | -------------
  34. Your content can | be here, and it | can be here....
  35. And here. | Okay. | I think we get it.
  37. - And of course there are lists.
  38.   - Some are bulleted.
  39.      - With different indentation levels.
  40.         - That look like this.
  42. 1. And there are numbered lists too.
  43. 1. Use just 1s if you want!
  44. 1. And last but not least, let's not forget embedded images:
  46. ![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
  47. `;
  49. class App extends React.Component {
  50.   state = {
  51.     text: sampleText,
  52.   };
  54.   handleChange = (event) => {
  55.     const text = event.target.value;
  56.     this.setState({ text });
  57.   };
  59.   //renderText = (text) => DOMPurify.sanitize(marked(text));
  60.   renderText = (text) => marked(text);
  61.   // On souhaite que les modifications soient enregistrée dans le LocalStorage
  62.   // du navigateur. Ainsi si l'utilisateur rafréchit la page, ses modifications
  63.   // seront sauvegarder.
  65.   // On sauvegarde les modifications
  66.   componentDidUpdate() {
  67.     const { text } = this.state;
  68.     localStorage.setItem('text', text);
  69.   }
  71.   // On réaffiche la sauvegarde lorsque l'App est relancée par le rafréchissement.
  72.   // s'il y à eu du text sauvegardé, je rafiche ce text.
  73.   // Si tout à été supprimé, je remets le sampleText de départ.
  74.   componentDidMount() {
  75.     const text = localStorage.getItem('text');
  76.     if (text) {
  77.       this.setState({ text });
  78.     } else {
  79.       this.setState({ text: sampleText });
  80.     }
  81.   }
  82.   // Vidéo - Anthony Welc - Ch 03 - 05  Du Markdown avec Marked, time 03:44
  83.   render() {
  84.     return (
  85.       <div className="container">
  86.         <div className="row">
  87.           <div className="col-sm-6">
  88.             <textarea
  89.               onChange={this.handleChange}
  90.               className="form-control"
  91.               rows="35"
  92.               value={this.state.text}
  93.             ></textarea>
  94.           </div>
  95.           <div className="col-sm-6">
  96.             <div
  97.               dangerouslySetInnerHTML={{
  98.                 __html: this.renderText(this.state.text),
  99.               }}
  100.             ></div>
  101.           </div>
  102.         </div>
  103.       </div>
  104.     );
  105.   }
  106. }
  108. ReactDOM.render(<App />, document.getElementById('root'));
  1. .container {
  2.   margin-top: 24px;
  3. }
  1. <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
  3. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  6. <div id="root"></div>
reactjs

1条答案

按热度按时间
3hvapo4f

3hvapo4f1#

以下是几个问题：

  • 本地存储在代码段沙箱中不起作用。
  • 模块要正确处理有点麻烦，所以我会使用UMD导入。
  • 标记的最新版本使用marked.parse()，而不是marked()
  1. const sampleText = `# Welcome to my React Markdown Previewer!
  3. ## This is a sub-heading...
  5. ### And here's some other cool stuff:
  7. Heres some code, \`<div></div>\`, between 2 backticks.
  9. \`\`\`
  10. // this is multi-line code:
  12. function anotherExample(firstLine, lastLine) {
  13.   if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
  14.     return multiLineCode;
  15.   }
  16. }
  17. \`\`\`
  19. You can also make text**bold**... whoa!
  20. Or _italic_.
  21. Or... wait for it...**_both!_**
  22. And feel free to go crazy ~~crossing stuff out~~.
  24. There's also [links](https://www.freecodecamp.org), and
  25. > Block Quotes!
  27. And if you want to get really crazy, even tables:
  29. Wild Header | Crazy Header | Another Header?
  30. ------------ | ------------- | -------------
  31. Your content can | be here, and it | can be here....
  32. And here. | Okay. | I think we get it.
  34. - And of course there are lists.
  35.   - Some are bulleted.
  36.      - With different indentation levels.
  37.         - That look like this.
  39. 1. And there are numbered lists too.
  40. 1. Use just 1s if you want!
  41. 1. And last but not least, let's not forget embedded images:
  43. ![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
  44. `;
  46. class App extends React.Component {
  47.   state = {
  48.     text: sampleText,
  49.   };
  51.   handleChange = (event) => {
  52.     const text = event.target.value;
  53.     this.setState({ text });
  54.   };
  56.   renderText = (text) => DOMPurify.sanitize(marked.parse(text));
  57.   // On souhaite que les modifications soient enregistrée dans le LocalStorage
  58.   // du navigateur. Ainsi si l'utilisateur rafréchit la page, ses modifications
  59.   // seront sauvegarder.
  61.   // On sauvegarde les modifications
  62.   componentDidUpdate() {
  63.     const { text } = this.state;
  64.     //localStorage.setItem('text', text);
  65.   }
  67.   // On réaffiche la sauvegarde lorsque l'App est relancée par le rafréchissement.
  68.   // s'il y à eu du text sauvegardé, je rafiche ce text.
  69.   // Si tout à été supprimé, je remets le sampleText de départ.
  70.   componentDidMount() {
  71.     const text = null;
  72.     //const text = localStorage.getItem('text');
  73.     if (text) {
  74.       this.setState({ text });
  75.     } else {
  76.       this.setState({ text: sampleText });
  77.     }
  78.   }
  79.   // Vidéo - Anthony Welc - Ch 03 - 05  Du Markdown avec Marked, time 03:44
  80.   render() {
  81.     return (
  82.       <div className="container">
  83.         <div className="row">
  84.           <div className="col-sm-6">
  85.             <textarea
  86.               onChange={this.handleChange}
  87.               className="form-control"
  88.               rows="35"
  89.               value={this.state.text}
  90.             ></textarea>
  91.           </div>
  92.           <div className="col-sm-6">
  93.             <div
  94.               dangerouslySetInnerHTML={{
  95.                 __html: this.renderText(this.state.text),
  96.               }}
  97.             ></div>
  98.           </div>
  99.         </div>
  100.       </div>
  101.     );
  102.   }
  103. }
  105. ReactDOM.render(<App />, document.getElementById('root'));
  1. .container {
  2.   margin-top: 24px;
  3. }
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
  2. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.7.1/purify.min.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  6. <div id="root"></div>

以下是Reaction 18的版本：

  1. const sampleText = `# Welcome to my React Markdown Previewer!
  3. ## This is a sub-heading...
  5. ### And here's some other cool stuff:
  7. Heres some code, \`<div></div>\`, between 2 backticks.
  9. \`\`\`
  10. // this is multi-line code:
  12. function anotherExample(firstLine, lastLine) {
  13.   if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
  14.     return multiLineCode;
  15.   }
  16. }
  17. \`\`\`
  19. You can also make text**bold**... whoa!
  20. Or _italic_.
  21. Or... wait for it...**_both!_**
  22. And feel free to go crazy ~~crossing stuff out~~.
  24. There's also [links](https://www.freecodecamp.org), and
  25. > Block Quotes!
  27. And if you want to get really crazy, even tables:
  29. Wild Header | Crazy Header | Another Header?
  30. ------------ | ------------- | -------------
  31. Your content can | be here, and it | can be here....
  32. And here. | Okay. | I think we get it.
  34. - And of course there are lists.
  35.   - Some are bulleted.
  36.      - With different indentation levels.
  37.         - That look like this.
  39. 1. And there are numbered lists too.
  40. 1. Use just 1s if you want!
  41. 1. And last but not least, let's not forget embedded images:
  43. ![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
  44. `;
  46. class App extends React.Component {
  47.   state = {
  48.     text: sampleText,
  49.   };
  51.   handleChange = (event) => {
  52.     const text = event.target.value;
  53.     this.setState({ text });
  54.   };
  56.   renderText = (text) => DOMPurify.sanitize(marked.parse(text));
  57.   // On souhaite que les modifications soient enregistrée dans le LocalStorage
  58.   // du navigateur. Ainsi si l'utilisateur rafréchit la page, ses modifications
  59.   // seront sauvegarder.
  61.   // On sauvegarde les modifications
  62.   componentDidUpdate() {
  63.     const { text } = this.state;
  64.     //localStorage.setItem('text', text);
  65.   }
  67.   // On réaffiche la sauvegarde lorsque l'App est relancée par le rafréchissement.
  68.   // s'il y à eu du text sauvegardé, je rafiche ce text.
  69.   // Si tout à été supprimé, je remets le sampleText de départ.
  70.   componentDidMount() {
  71.     const text = null;
  72.     //const text = localStorage.getItem('text');
  73.     if (text) {
  74.       this.setState({ text });
  75.     } else {
  76.       this.setState({ text: sampleText });
  77.     }
  78.   }
  79.   // Vidéo - Anthony Welc - Ch 03 - 05  Du Markdown avec Marked, time 03:44
  80.   render() {
  81.     return (
  82.       <div className="container">
  83.         <div className="row">
  84.           <div className="col-sm-6">
  85.             <textarea
  86.               onChange={this.handleChange}
  87.               className="form-control"
  88.               rows="35"
  89.               value={this.state.text}
  90.             ></textarea>
  91.           </div>
  92.           <div className="col-sm-6">
  93.             <div
  94.               dangerouslySetInnerHTML={{
  95.                 __html: this.renderText(this.state.text),
  96.               }}
  97.             ></div>
  98.           </div>
  99.         </div>
  100.       </div>
  101.     );
  102.   }
  103. }
  105. ReactDOM.createRoot(document.querySelector("#app"))
  106.   .render(<App />);
  1. .container {
  2.   margin-top: 24px;
  3. }
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
  2. <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.7.1/purify.min.js"></script>
  4. <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  5. <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  6. <div id="app"></div>

另请参阅How do I create a React Stack Snippet with JSX support?

展开查看全部
赞(0）分享  回复(0）举报  2022-10-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com