提交本地项目到github上，怎么编写一个markdown编辑器

在这篇文章中，我们将会讨论如何将本地项目提交到GitHub，并且会讲解如何从头开始构建一个Markdown编辑器。

一、提交本地项目到GitHub

1. 创建一个GitHub账户并登录。

2. 创建一个新的Repository，选择好仓库名称、描述、公开/私有等选项，并初始化仓库。

3. 在本地创建一个文件夹，用作本地项目的仓库。

4. 打开终端或命令行界面，使用cd命令进入到本地项目的仓库路径。

5. 初始化本地仓库：执行git init命令。

6. 将本地仓库与GitHub仓库建立链接：执行git remote add origin 命令。

7. 将本地项目添加到本地仓库中：执行git add .命令。

8. 提交本地项目到本地仓库：执行git commit -m "此处填写提交说明"命令。

9. 推送本地项目到GitHub仓库：执行git push origin master命令。

二、从头开始构建一个Markdown编辑器

1. 安装必要的软件

在开始构建Markdown编辑器之前，你需要确保自己已经安装以下软件：

* Node.js

* npm

2. 初始化项目

打开终端或命令行界面，使用cd命令进入到你想要构建Markdown编辑器的文件夹路径。执行下列命令：

```

npm init -y

```

这将会将当前文件夹初始化为一个npm项目。

3. 安装必要的依赖

Markdown编辑器需要一些依赖来支持编辑器的操作。执行下列命令安装这些依赖项：

```

npm install --save react react-dom react-markdown codemirror highlight.js

```

其中，react、react-dom和react-markdown是用于构建用户界面的库，codemirror和highlight.js是用于编辑Markdown文本和代码高亮。

4. 创建基本的文件结构

在文件夹中创建以下文件和文件夹：

* src

* App.js

* index.js

* public

* index.html

App.js是应用程序的主要组件，而index.js文件用于将应用程序渲染到浏览器中。index.html将用于承载应用程序。

在index.html文件中添加以下内容：

```

```

这将会向浏览器中展示一个空的页面，并引用我们之后创建的index.js文件。

现在我们需要在App.js文件中添加一些内容：

```

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import ReactMarkdown from 'react-markdown';

import CodeMirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';

class App extends Component {

constructor(props) {

super(props);

this.state = { markdown: '' };

this.doc = CodeMirror.Doc('', 'markdown');

this.handleChange = this.handleChange.bind(this);

}

componentDidMount() {

this.cm = CodeMirror(document.body, {

mode: 'markdown',

value: this.state.markdown,

lineWrapping: true

});

this.cm.on('change', this.handleChange);

}

componentWillUnmount() {

this.cm.off('change', this.handleChange);

}

handleChange(cm) {

const value = cm.getValue();

this.setState({ markdown: value });

ReactDOM.render(, document.getElementById('markdown'));

}

render() {

return (

);

}

}

ReactDOM.render(, document.getElementById('root'));

```

这将创建一个基本的Markdown编辑器，并且可以在右侧实时预览编辑的内容。

在这里，我们使用了React、React-DOM、React-Markdown、Codemirror和highlight.js。Codemirror是用于编辑器的，highlight.js用于代码高亮，React-Markdown用于在预览窗口中解析Markdown文本，React和React-DOM用于渲染用户界面。

5. 执行npm start命令

现在我们已经创建了Markdown编辑器的基本文件结构、组件和依赖，下一步是使用npm start启动本地服务器，预览我们的应用程序。

执行以下命令：

```

npm start

```

这将会启动一个本地服务器，通常可以从 http://localhost:3000 访问应用程序。

总结

在这篇文章中，我们讨论了如何将本地项目提交到GitHub，并且从头开始构建了一个Markdown编辑器。现在你已经可以继续完善这个Markdown编辑器，加入更多的功能来提升其实用性。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！