提交本地项目到<1>上

在这篇文章中,我们将会讨论如何将本地项目提交到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文件中添加以下内容:

```

Markdown Editor

```

这将会向浏览器中展示一个空的页面,并引用我们之后创建的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 (

this.editorContainer = el}>

);

}

}

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内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队,专门致力于为客户提供优质的服务。

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

点赞(68) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部