精华内容
下载资源
问答
  • 在线代码编辑器

    2014-05-04 15:11:37
    多个在线代码编辑器(转自http://www.7mdm.com/157.html): 1、http://codepad.org/  推荐星级:★★★★ 是否需注册:否(注册的话也很快,几秒钟而已) 优点:网页界面简洁,一目了然,适合手机...
    多个在线代码编辑器(转自http://www.7mdm.com/157.html):
    

    1、http://codepad.org/ 

    推荐星级:★★★★

    是否需注册:否(注册的话也很快,几秒钟而已)

    优点:网页界面简洁,一目了然,适合手机浏览器。且支持C,C++,D,PHP,PYTHON,Perl,Ruby等十几种编程语言,非常强大。查看执行结果时,高亮显示代码。

     缺点:有时点击提交按钮后,给出一个出错页面,需多次提交才给出结果。另外不具有交互性,且不提供编译后的可执行文件。

    2、http://www.comeaucomputing.com/tryitout/ 

    推荐星级:★★

    是否注册:貌似不需要(网页上显示,注册后功能更多)

    优点:编译器的版本多

    缺点:页面文字较多,不适合手机浏览,且编译后显示结果不明了,反正我最简单的”Hello World”程序好像都通不过

     3、http://www.botskool.com/online-compiler(本人最喜欢的)

    推荐星级:★★★★☆

    是否注册:需要(注册简单,绝对值得)

    优点:自动记录上一次所写代码,执行结果显示明显,并且可以进行简单的交互(我认为是亮点)。网站提供了交流论坛,编程学习资料。

    缺点:页面广告文字较多,不过手机浏览的话还可以接受。无论是编写代码还是查看结果,页面大面积是其他用户代码示例,显得页面臃肿。支持语言少,只有C,C++,Java三种。

    4、http://onlinecompiler.net/(现在不知道为什么打不开了,前几天还可以用,在这列出来先)

    推荐星级:★★★

    优点:记不清了,只记得可以下载编译后的exe文件(这就是我列出来的原因)

    缺点:不记得了

     5、http://cmpe150-1.cmpe.boun.edu.tr/phpccompiler/login.php 

    推荐星级:★★★

    是否注册:否

    优点:编辑时有感应提示框,高亮显示语法,可下载编译后exe文件。界面简洁。

    缺点:只支持C语言。只支持IE6以上浏览器,其他浏览器一概不支持,手机无法浏览。不在线显示运行结果。没有出错提示。

    6、http://ideone.com 

    推荐星级:★★★★★

    是否注册:否(注册后功能更强大)

    优点:我见过的支持语言最多的,多达58种(哥惊呆了),编辑功能最强大的(显示行号,语法高亮,查找,定位到行,全屏显示,行信息,列信息显示),错误信息显示清晰,结果显示明显,有简单交互功能,可以上传源文件进行编译,并且可以下载exe文件,界面简洁更难能可贵。

    展开全文
  • CodeMirror 是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的
  • 主要介绍了php单文件版在线代码编辑器,个人感觉相当不错,分享给大家,需要的朋友可以参考下
  • 在线代码编辑器 开源在线代码编辑器
  • HTML5网页在线代码编辑器,代码高亮显示,输入代码爆炸动态效果显示。
  • CodeMirror 是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的
  • CodeMirror 是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的
  • 在线代码编辑器 Codeanywhere介绍

    首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的。教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈~我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转到教程

                   
    本文分为几个部分:

    1.Codeanywhere介绍
    2.Codeanywhere使用前奏
    3.Codeanywhere与Dropbox连接
    4.Codeanywhere改变主题颜色


    一、Codeanywhere介绍


    Codeanywhere是一个在线的代码编辑器,你可以在浏览器中编写html、css、javascript、php、XML的代码,目前支持chrome、firefox、Opera、Safari、IE,当然也可以在android、iphone上安装codeanywhere的软件。
    Codeanywhere的特点是:随时随地可以写代码(虽然我认为手机上写代码有点搞笑)。
    Codeanywhere支持连接FTP Server、Dropbox、Github,比如Dropbox,你只要有一个账号,连上Dropbox后,Codeanywhere能够在Dropbox上创建html等文件,你写的代码都存放在Dropbox上了。

    二、Codeanywhere使用前奏


    要使用codeanywhere之前,除了要注册账号之外,还要安装一个基于浏览器的插件,比如我用的是chrome,进入主页:https://codeanywhere.net/ 后在页面上方会弹出如下图所示:

    安装好后在chrome浏览器中会有名为“codeanywhere utility“的插件,如下图所示:


    三、Codeanywhere连接Dropbox


    这里我们来演示一下Codeanywhere连接Dropbox:

    步骤1:点击左侧Dropbox图标

    步骤2:点击后会弹出如下图,点击connect:


    步骤3:登录Dropbox

    步骤4:授权Codeanywhere访问你的Dropbox账号,如下图:


    这样,就可以在Codeanywhere的编辑器的左侧再次点击Dropbox,
    下图中,我创建了一个codeanywhere文件夹,index.html的html文件,index.php的php文件。


    从下图看出,支持HTML、Javascript的语法高亮。


    并且会在右下角显示你打开的文件类型:


    从下图看出,支持php语法高亮。


    并且会在右下角显示你打开的文件类型:


    四、Codeanywhere改变主题颜色


    步骤1:点击上方的"View"


    步骤2:点击"Preference"


    步骤3:点击"Syntax Coloring"


    步骤4:选择"Theme"


    比如我选择了Bright,则php文件变成了:





               

    浏览人工智能教程

    展开全文
  • CodeMirror 是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的
  • CodeMirror 是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的
  • 网格 ...当他们的API首次公开时,该项目赢得了Firebase的单独黑客马拉松。 也就是说,它将通过新...启动index.html以使用在线代码编辑器。 您将看到一些默认的文本,这些文本将为您提供布局的想法。 预览框可以调整和拖
  • 非常酷炫的一款HTML5在线代码编辑器输入动画特效,有固定的格式化和样式显示,输入时有爆炸和震动动画效果。
  • 用CodeMirror实现的web在线代码编辑器,实现语法高亮、主题选择等功能
  • 为您提供CodeMirror在线代码编辑器下载,CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能。每种语言都带有功能齐全的...
  • 在线代码编辑器选型

    2020-12-18 11:50:21
    在线代码编辑器选型 一、CodeMirror https://github.com/codemirror/CodeMirror 简介 CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,风格包括js, java, php, c++等等100多种语言。比较...

    在线代码编辑器选型

    一、CodeMirror https://github.com/codemirror/CodeMirror

    • 简介

      CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全,代码折叠,可配置键盘事件,vim, emacs, sublime text 风格、能完成查找替换,括号匹配,分栏显示,显示行号,自行配置字体大小和风格,是许多大名鼎鼎的在线代码编辑器的基础库。

    • 实践

      lib 下是放的是核心库和核心 css,mode 下放的是各种支持语言的语法定义,theme 目录下是支持的主题样式。一般在开发中,添加 lib 下的引用和 mode 下的引用就够了。

      下面两个是使用 Code Mirror 必须引入的:

      <link rel="stylesheet" href="./codemirror-5.58.3/lib/codemirror.css">
      <script src="./codemirror-5.58.3/lib/codemirror.js"></script>
      

      接下来要引用的就是在 mode 目录下编辑器中要编辑的语言对应的 js 文件,这里以 javascript 为例:

      <!--代码高亮-->
      <script src="./codemirror-5.58.3/mode/javascript/javascript.js"></script>
      

      引用的文件用于支持对应语言的语法高亮。

      不同的主题,只需按照如下引入即可:

      <!--引入css文件,用以支持主题-->
      <link rel="stylesheet" href="./codemirror-5.58.3/theme/dracula.css"/>
      

      创建编辑器
      使用textarea标签作为容器

      <textarea id="demotext"></textarea>
      

      在js中进行对之前引入的文件进行配置配置

      var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
              lineNumbers: true,
              mode: "javascript", // 语言
              theme: "dracula",	//设置主题
              //readOnly: true,        //只读
          });
      
    • 效果图

      效果图

    • 总结

      通过以上配置可以快速生成一个简洁的在线编辑器,也可以通过引入其他功能对应的js文件进行丰富。总言而之是个小巧、灵活的在线编辑器库!

    • 参考链接

      https://blog.csdn.net/qq_37193537/article/details/88426196


    二、Monaco Editor https://github.com/microsoft/monaco-editor

    • 简介

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

    • 实践

      为了编写demo方便,我直接用的script直接引入的js文件。
      官方也提供了不同情况下的demo,非常全。github链接

      下面放一些核心代码,更详细的配置请参见官网。

          <!-- css文件 -->
          <link
      		rel="stylesheet"
      		data-name="vs/editor/editor.main"
      		href="./package/min/vs/editor/editor.main.css"
          />
      
          <!-- js文件 -->
          <script>
      		var require = { paths: { vs: './package/min/vs' } };
      	</script>
          <script src="./package/min/vs/loader.js"></script>
      	<script src="./package/min/vs/editor/editor.main.nls.js"></script>
      	<script src="./package/min/vs/editor/editor.main.js"></script>
          <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
      	<script>
      		var editor = monaco.editor.create(document.getElementById('container'), {
      			value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
                  language: 'javascript',
                  theme: "vs-dark" // 主题
      		});
      	</script>
      
    • 效果图

      效果图

    • 总结

      由图可见,功能十分齐全,基本上是vscode 在线版。


    展开全文
  • 为您提供CodeMirror在线代码编辑器下载,CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能。每种语言都带有功能齐全的...
  • 好像园里没啥帖子介绍在线代码编辑器,网上也多少相关资料,我做在线代码编辑器http://www.wcodei.com/的时候走了一堆的弯路,现在分享一下经验吧,我记性很差,就只能想到哪儿写到哪儿了,希望大家别介意。...

    前言


    好像园里没啥帖子介绍在线代码编辑器,网上也多少相关资料,我做在线代码编辑器http://www.wcodei.com/的时候走了一堆的弯路,现在分享一下经验吧,我记性很差,就只能想到哪儿写到哪儿了,希望大家别介意。

     

    一.所见即所得编辑器与代码编辑器的技术对比

     


    两者看上去貌似很相似,都不是传统的editarea,都需要编辑器中显示的内容能够支持带颜色。

    所见即所得编辑器的技术核心就是contenteditable="true"属性,只要在一个html容器中使用该属性,则该html容器就能变成一个简单的编辑器,现在常见的一些所见即所得编辑器都是在这个技术的基础上再加上一些控制编辑器内容的代码而已。而代码编辑器则不能采用该技术,因为这样在编辑html代码时会造成混淆。所以常见的在线代码编辑器一般是弄一个隐藏的editarea来支持键盘输入,将编辑的内容存储在js对象中,然后再动态的创建html对象来展示着色的代码。

    这样看来代码编辑器相对于所见即所得编辑器来说,还是更有难度一些的。

    特别对我这种页面布局方面比较抓瞎的人来说,在线代码编辑器无比的烦人。。。到现在都还有隐现的页面展示bug。

     二.代码编辑器的一些功能实现


    1.光标

    代码编辑器需要自己实现光标的闪烁效果,这个很简单,就是间隔一段时间显示/隐藏div就行啦。

    setInterval(function() {
            tCursor.toggle();
          }, 530);

    当然光标的位置需要自己计算。

     

    2.滚动条

    滚动条实现的难易要看你想要怎样的功能,如果你不需要行号,或者不需要固定行号,则用html对象自带的滚动条就行了。

    如果你和我一样想实现固定位置的行号,这就麻烦一些,需要自己实现滚动条的效果,并自己用代码来同步滚动条的状态和页面的scroll状态。

     

    3.着色

    个人感觉着色不是那么复杂,主要就是把一些需要着色的东东找出来就行了。

     

    4.拷贝,剪切等

    实现这个比较复杂的一点是ie不支持直接访问剪贴板,这样就只能曲线救国了,先把要拷贝,剪切的内容放到editarea里面,再弄到剪贴板里去。

    5.打开本地文件

    其实我本来想实现一种比较酷炫的功能,本地文件直接拖动到编辑器打开,然后快捷键ctrl-s保存文件。不过到实现的时候却发现拖动打开可以,但是保存文件不行,因为我找了一圈都没找到怎么获取被拖动打开文件的文件地址,就算用插件也貌似得不到。顶多得到文件名,具体地址得不到!

    于是我只能做成那种通过插件浏览我的电脑来一步步打开文件,并进行保存的方式了。

     

    三、演示

    我挺喜欢vs的在没有选择文本的时候用ctrl-x,ctrl-c会剪切复制当前行的功能

    和ultraedit的列编辑模式(用ctrl-m切换),所以在我的编辑器中也实现了这两个功能。

    另外这个版本因为要访问本地文件,所以需要装插件,囧!

    http://www.wcodei.com/

     



     

    转载于:https://www.cnblogs.com/studynote/p/4174488.html

    展开全文
  • 使用 CodeMirror 打造在线代码编辑器

    万次阅读 2019-03-12 18:40:10
    写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么做的,这里我把公司项目里用到的那部分抽出来,单独写篇博客...
  • CodeMirror 在线代码编辑器是一款Online Source Editor,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。 软件介绍 可以看出,...
  • CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。CodeMirror本身的定位也很明确,...
  • HTML5在线代码编辑器输入特效是一款有固定的格式化和样式显示,输入数字字母文字爆炸动画效果。
  • 欢迎使用在线代码编辑器 :waving_hand: 一个强大的开源在线代码编辑器! :house: 作者 :bust_in_silhouette: 斯图Ruby 推特: : :handshake: 贡献 欢迎贡献,问题和功能要求! 随时检查。 表示支持 给一个 :...
  • 在线代码编辑器适合人教学和学习HTML、CSS和JavaScript
  • CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法突出显示,以帮助阅读和编辑复杂...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,650
精华内容 1,460
关键字:

在线代码编辑器