您的位置：首页 > 编程语言

程序代码编辑器和浏览器代码编辑器＆代码可视化执行过程

2016-03-18 11:44 639 查看

tutorialspoint

http://www.tutorialspoint.com/codingground.htm

1. Sublime Text ：http://blog.l1n3.net/editor/sublime-text-introduce/

下载：http://www.sublimetext.com/3

2. Notepad++ https://notepad-plus-plus.org/zh/
更多细节请查看 http://blog.l1n3.net/category/editor/

3. 浏览器编辑器

（1）简易版本，没有语法高亮，也没有自动缩进，仅仅是将浏览器变成一个文本编辑器

data:text/html, <html contenteditable>

只需要将上面的代码复制粘贴到浏览器的地址栏，然后按回车，就可以让浏览器变成编辑器。

（2）自动切换背景颜色

下面这段代码，可以让编辑器在你一边打字时，一遍切换背景颜色：

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

（3）笔记本样式

下面这段代码可以将浏览器页面变成一个笔记本的样式，看上去很有感觉

data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>

（4）如何变身Python编辑器？

接下来，我们来看怎样将浏览器打造成Python编辑器。只需要在地址栏输入下面的代码即可

data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/textmate");e.getSession().setMode("ace/mode/python");</script>

这段代码是由jdkanani在Github上分享的。

事实上，我们只要简单修改一下上面的代码，就可以马上将浏览器变成其他语言的编辑器，包括Markdown、C/C++、Javscript、Java等几乎所有编程语言。你所要做的，只是将代码中的ace/mode/python，修改成ace/mode/相应的语言（如java）即可。

除了支持多种语言，它还支持更改页面主题！Eclipse、Github、Textmate等众多经典主题，统统支持！只需要将ace/theme/textmate中的textmate替换成你喜欢的主题即可，如monokai。

For other language: Instead of ace/mode/ruby, Use

Markdown -> ace/mode/markdown
Python -> ace/mode/python
C/C++ -> ace/mode/c_cpp
Javscript -> ace/mode/javascript
Java -> ace/mode/java
Scala- -> ace/mode/scala
CoffeeScript -> ace/mode/coffee
and
css, html, php, latex, tex, sh, sql, lua, clojure, dart, typescript, go, groovy, json, jsp, less, lisp,
lucene, perl, powershell, scss, textile, xml, yaml, xquery, liquid, diff
and many more...

For other theme: Instead of ace/theme/monokai, Use

Eclipse -> ace/theme/eclipse
TextMate -> ace/theme/textmate
and
xcode, vibrant_ink, solarized_dark, solarized_light, tomorrow, tomorrow_night, tomorrow_night_blue, twilight, tomorrow_night_eighties, pastel_on_dark
and some more

（5）渲染Markdown文本

如果你习惯于用Markdown语法写作，你或许会希望直接在页面中查看渲染后的效果。只需要输入下面这行代码即可

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0;left:50%;}</style><div class="e" id="editor"></div><div class="c"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script><script> function showResult(e){consoleEl.innerHTML=e}var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/markdown");var consoleEl=document.getElementsByClassName("c")[0];var converter=new Showdown.converter;e.commands.addCommand({name:"markdown",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec:function(t){var n=e.getSession().getMode().$id;if(n=="ace/mode/markdown"){showResult(converter.makeHtml(t.getValue()))}},readOnly:true})</script>

输入Markdown代码之后，然后按Ctrl+M或Command+M，就可以将代码转换成HTML。

(6)渲染python编辑器

data:text/html,<style type="text/css">.e{position:absolute;top:0;right:50%;bottom:0;left:0;} .c{position:absolute;overflow:auto;top:0;right:0;bottom:0; left:50%;}</style><div class="e" id="editor">   </div><div class="c"></div><script  src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconfl   ict/ace.js" type="text/javascript" charset="utf-    8"></script><script src="http://cdnjs.cloudfl   are.com/ajax/libs/showdown/0.3.1/showdown.min.js">  </script><script> function showResult(e){consoleEl      .innerHTML=e}var e=ace.edit("editor");e.setThem     e("ace/theme/monokai");e.getSession().setMode("ace/mode         /python");var consoleEl=document.getElem        entsByClassName("c")[0];var converter=new Showd     own.converter;e.commands.addCommand({name:"mark         down",bindKey:{win:"Ctrl-M",mac:"Command-M"},exec           :function(t){var n=e.getSession().getMode().$id;if             (n=="ace/mode/python"){showResult(co                    nverter.makeHtml(t.getValue()))}            },readOnly:true})</script>

更多详情请大家查看

http://codingpy.com/article/how-to-turn-your-browser-into-code-editor/

4. 可视化代码执行过程

VISUALIZE Python, Java, JavaScript, TypeScript, Ruby, C, and C++

Start visualizing your code now (or try live programming)

５. 已经有的在线代码编辑网站

在线Python编辑器

JSFiddle

https://jsfiddle.net/

JSBin

https://jsbin.com/

https://c9.io/

http://codepen.io/dylnhdsn/pen/pheJs

http://codepen.io/sparanoid/pen/nHAmi

code 可参考主页：

https://github.com/sparanoid/path-menu/blob/master/app/assets/less/main.less

http://codepen.io/dustinliamc/pen/eAhDo

更多请参考

https://ruby-china.org/topics/4980

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航