css在线编辑器(CodePen在线编辑器)

大家好，感谢邀请，今天来为大家分享一下css在线编辑器的问题，以及和CodePen在线编辑器的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

html在线编辑器怎么用

只要你输入任意字元在任意编辑器窗格里，你会立刻发现「网址列」发生了变化，如下图所示，编号1的地方就是你的BinID，编号2的地方则是这个Bin的版本编号(预设会从1开始)，编号3的地方则是目前的显示模式，edit则代表「编辑」模式。预设的情况下，你输入的HTML/ CSS/ JavaScript都会立刻反映到最右边的Output窗格。

注:在JS Bin里面，每一个前端网页组合( HTML+ CSS+ JavaScript)都被称为一个Bin！

当然，只要你把这个Bin设定完成后，便可直接把你当下的JS Bin网址分享出去，非常方便！

导览列介绍

如下图是JS Bin进入后的主要版面，非常简洁，最上方就是个导览列而已，接下来会依图编号解说：

找个css样式编辑器

CSSVista是一款Windows（只能在XP上使用）平台的第三方CSS编辑工具，当然，它是免费的。它的主要功能就是将FF、IE6以及CSS编辑器集合到一个框架里面。可以所见即所得的对页面进行CSS调试。

运行软件后打开页面文件或直接在地址栏输入页面路径打开页面，点击地址栏右边的Edit Css，软件将自动获取CSS在左边显示。软件右边将分别显示IE6和FF下的页面。对左边的CSS直接进行修改，右边的页面将及时更新。

软件整体功能很简单，一切都是围绕在CSS编辑。其他辅助功能主要有：

1、禁用CSS样式、禁用图片浏览；

2、设置浏览页面尺寸；

3、标记div、span、p、li、a、h1、h2…等等元素

CSSVista运行环境：

需要Microsoft’s.NET Framework 2.的支持。你可以到这里下载

CSSVista下载地址：

正好下午有一个页面需要调整，正好针对CSSVista进行了一个小测试，

优点：

1、系统占用内存大约65M左右，相对IE加FF加DW，这个算很小了；

2、提供FF与IE同时预览编辑，不用再切换了。这也是这个软件最大的卖点；

3、类似Developer的元素标记功能方便CSS调试；

不足之处：

1、需要安装.NET框架；

2、由于CSS Editer与IE、FF预览框整合在一起，页面浏览面积太小；

3、虽然IE7已经发布一段时间了，但是CSSVisita暂时只能测试IE6；

4、CSS Editer没有提供代码输入提示、也就是说代码需要一个个的敲，有点费时间；

5、CSSVisita自带的这个集成浏览器不会屏蔽弹出广告，如果你修改的页面会弹几个，会弹双倍吗？我不知道。哈哈。

CSSVisita只是一个CSS编辑小工具，作为现在的功能他很适合对已经完成的页面进行FF与IE间的调试。如果只是一些小的问题，相信开一个 CSSVisita已经足以应付。好过要开FF、IE和DW三个。从官网上的信息来看，作者对这个小工具并没有太多时间去开发。也许这个只是他们的主要产品Sitevisita的一个附属品。如果你有兴趣，可以去他们的网站看看。

微软开源在线代码编辑器——Monaco Editor

Monaco Editor是为VS Code提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块，你可以将Monaco Editor用到自己的项目中，作为云端编辑器的支持，支持IE 11，Edge，Chrome，Firefox，Safari和Opera！

Github：

文档和示例等：

安装没什么好说的，你可以到上面地址中下载，也可以直接使用npm安装

TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML

XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C……

内联代码差异比较

非内联代码差异比较

上面都是原生Visual Studio亮色主题

Visual Studio Dark主题：

高对比度暗色主题：

想要直接开发可能不是一件非常简单的事情，所以给出官网提供的所有示例，建议感兴趣的同学可以直接下载下来查看相关示例代码

1、在终端执行以下四条命令，前提是你已存在git和node的环境，如果不存在则先安装git或者node

2、然后访问即可体验

选择你想体验的示例，有一些可能还需要其他的操作，按照提示来即可

3、项目示例Demo介绍

其他示例和用法

想要深入学习的小伙伴可以直接到官网上手学习，左边是配置，右边即可看到效果，这样的话学习起来会比较的快

以下版本可能无法跟进最新的版本

React版本：

Vue版本：

Angular版本：

Monaco Editor不得的不说是一个非常强大的在线代码编辑器，可以为自己的项目提供云端代码编辑器的基础技术支持，可以在其基础上扩展很多强大的功能，当然上手不一定简单，需要根据自己的需求确定开发方案，有需求的小伙伴可以去研究一下！

OK，关于css在线编辑器和CodePen在线编辑器的内容到此结束了，希望对大家有所帮助。