React中解析markdown(react-markdown插件)

https://github.com/rexxars/react-markdown

yarn add react-markdown
import ReactMarkdown from "react-markdown"
let markdown='# P01:課程介紹和環境搭建\n' +
  '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
  '> Mditor 是一個簡潔、易於集成、方便擴展、期望舒服的編寫 markdown 的編輯器,僅此而已... \n\n' +
   '**這是加粗的文字**\n\n' +
  '*這是傾斜的文字*`\n\n' +
  '***這是斜體加粗的文字***\n\n' +
  '~~這是加刪除線的文字~~ \n\n'+
  '\`console.log(111)\` \n\n'+
  '# p02:來個Hello World 初始Vue3.0\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n'+
  '***\n\n\n' +
  '# p03:Vue3.0基礎知識講解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p04:Vue3.0基礎知識講解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '#5 p05:Vue3.0基礎知識講解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p06:Vue3.0基礎知識講解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p07:Vue3.0基礎知識講解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '```var a=11; ```'
<div className="detailed-content">
                markdown解析內容
                <ReactMarkdown 
                source={markdown} 
                escapeHtml={false}//html標籤不解析保留文本
                />
            </div>

image-20200524215042850
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章