在线html编辑器-html在线编辑器运行源码 收藏 0

推荐6个又好用又免费的在线代码编辑器

大家好，我是 Echa。

前段时间，老铁们私信我有么有又免费又好用的在线代码编辑器，最近找了找。终于找到了。给老铁们安排上。创作不易，喜欢的老铁们转发加个关注，点个赞，速速收藏，谢谢！

今天来推荐六个好用又免费的在线代码编辑器！

在线地址：https://codesandbox.io/

CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目，其提供了多种模块：

CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能：

• Npm 支持：可以添加几乎任何 npm 上可用的包；
• 支持 TypeScript、热更新、GitHub 导出、静态文件托管等；
• 使用 Monaco 编辑器构建，Monaco 是为 VSCode 的提供支持的代码编辑器，有很多相似的体验；
• 集成的 DevTools、linting、错误覆盖、测试框架 (Jest)等；
• 强大的 CLI 可以直接将本地项目导入 CodeSandbox。

在线地址：https://codepen.io/

CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS。CodePen 不仅是一个在线编辑器，还是一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。

在线地址：https://stackblitz.com/

Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目：

Stackblitz 具有以下特性：

• 在浏览器中集成了一个 Dev Server，在离线的情况下仍然可以进行开发；
• 除了支持前端项目外，还支持在浏览器中运行 Node.js 环境；
• 支持连接 GIthub 仓库，可以直接将代码 push 到 Github 上，也可以拉取 Github 项目进行查看和编辑；
• 所有应用程序都会自动部署在其服务器上。

在线地址：http://jsfiddle.net/

JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示。

在线地址：https://jsbin.com/

JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的。

在线地址：https://code.juejin.cn/

码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。

HTML 编辑器

HTML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

参考文档：https://www.cjavapy.com/article/3299/

Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。

1）安装和配置

官网地址：Visual Studio Code – Code Editing. Redefined

根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。

2）新建HTML文件

在 VS Code 安装完成后，选择\” 文件(F)->新建文件(N) \”，在新建的文件中输入以下代码：

3）编辑HTML文件

在VS Code中，点击左上角的\”文件\”菜单，选择\”打开文件\”，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。

在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。

Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。

Prettier：格式化HTML代码，使代码结构更整洁。

Auto Close Tag：自动闭合HTML标签，提高编码效率。

Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。

Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。

Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。

1）安装和配置

官网地址：Sublime Text – Text Editing, Done Right

根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。

2）新建HTML文件

在Sublime Text 安装完成后，选择\” File->New File \”，在新建的文件中输入以下代码：

3）编辑HTML文件

在Sublime Text中，点击左上角的\”File\”菜单，选择\”Open File\”，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。

Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。

Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。

SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。

Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。

1）安装和配置

官网地址：Website design software | Adobe Dreamweaver

根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。

2）编辑HTML文件

在Dreamweaver中，点击左上角的\”File\”菜单，选择\”New\”，然后选择\”HTML\”，即可新建一个空白的HTML文件。内容如下：

使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的\”Live View\”按钮即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。

4）网页上传和发布

Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击\”Site\”菜单，选择\”Manage Sites\”，配置好站点设置，即可进行上传和发布。

5）Dreamweaver模板和库

Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。

参考文档：https://www.cjavapy.com/article/3299/

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com