5分钟搭建丰富的内容平台(Markdown)

一、摘 要

目前内容产业比较火，输出更高质量的内容将变得越来越重要，因为互联网一直都在潜移默化地影响着我们。在各大自媒体平台发布图文/视频固然是一个不错的选择，但是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地址：https://www.cdcxhl.com/news30/309280.html

成都网站建设公司_创新互联，为您提供自适应网站、外贸建站、云服务器、动态网站、面包屑导航、网站排名

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联