一、摘 要

目前內容產業比較火，輸出更高質量的內容將變得越來越重要，因為互聯網一直都在潛移默化地影響著我們。在各大自媒體平臺發布圖文/視頻固然是一個不錯的選擇，但是Ofter可能要求較高，不希望有發布次數限制，無緣無故被審核不通過，修改內容有限制，無法發布動圖等等。

因此，Ofter痛下決心學習搭建自己的系統化知識平臺。之前Ofter介紹過如何使用布局和如何搭建網站，確實比較基礎也比較繁瑣。目前在各大平臺發布內容，基本上都使用Markdown編輯器，線下編輯好markdown文件，發布到互聯網上豈不很舒服？

二、Markdown

我們經常看到的md文件就是markdown，寫起來確實挺方便。

如何能將md文件內容呈現在網上呢？如下圖：

首先，我們需要了解下markdown的一些使用規范。

1.標題（需空格）一級標題二級標題 三級標題依次類推2.目錄（單獨一行）[TOC]3.字體（不要空格）** **:加粗* *:斜體*** ***:斜體加粗~~ ~~:刪除線4.引用>5.分割線（需空格）--- 和 ***6.圖片7.超鏈接[鏈接名稱](鏈接路徑)//例如：[百度鏈接](www.baidu.com)8.列表（需空格）有序列表:1.無序列表:*或-9.代碼```代碼```三、搭建項目

開發工具：Pycharm

開發語言：React

安裝包工具：Node

1.創建項目

在左下角terminal執行如下命令

npminstall-gcreate-react-appcreate-react-app XXX //項目名cd XXX //項目名2.安裝包

此次解析markdown，我們用markdown-it包，通用布局使用antd包，路由用react-router-dom，代碼的復制功能用clipboard。

npminstallantd clipboard highlight.js markdown-it markdown-it-anchor markdown-it-multimd-tablemarkdown-it-task-lists markdown-it-toc-done-rightreact-router-dom3.創建頁面js

在src目錄下創建js, css, md文件

四、解析Markdown1.js代碼

在MDEcharts.js中復制如下代碼

import React fromreact;import MarkdownIt frommarkdown-it;import hljs fromhighlight.js;import toc from"markdown-it-toc-done-right";import anchor frommarkdown-it-anchor;import lists frommarkdown-it-task-lists;import table frommarkdown-it-multimd-table;import Echarts from../document/echarts.mdimport./md.css;import Clipboard fromclipboard;import {message} fromantd;class MDEcharts extends React.Component { state = { markdown:, current:mail, };componentDidMount() { fetch(Echarts) .then(res => res.text()) .then(text => this.setState({markdown: text})); const clipboard = new Clipboard(.copy-btn) // 復制成功失敗的提示 clipboard.on(success, (e) => { message.success(復制成功) }) clipboard.on(error, (e) => { message.error(復制失敗) }) }render() { const {markdown} = this.state const md = new MarkdownIt({ html:true, linkify:true, typographer:true, highlight:function(str, lang) { // 當前時間加隨機數生成唯一的id標識 const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000) // 復制功能主要使用的是 clipboard.jslethtml = `

本文標題：5分鐘搭建豐富的內容平臺(Markdown)
URL地址：http://m.newbst.com/news30/309280.html

成都網站建設公司_創新互聯，為您提供自適應網站、外貿建站、云服務器、動態網站、面包屑導航、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯