プログラムコードエディタとブラウザコードエディタ＆コード可視化実行プロセス
31412 ワード
チュートリアルポイント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)簡易バージョンで、文法が明るくなく、自動的にインデントしていません。ブラウザをテキストエディタにするだけです。
（2）背景色の下のコードを自動的に切り替えて、エディタがあなたの側でタイプを打つ時に、背景色を切り替えることができます。
実際、上のコードを簡単に修正すれば、すぐにブラウザを他の言語のエディタに変えられます。Markdown、C/C+、Javscript、Javaなどほとんどのプログラミング言語を含みます。あなたがしたいのは、コードの中のスペース/mode/pythonだけです。スペース/mode/対応する言語に変更すればいいです。
複数の言語をサポートするほか、ページテーマの変更もサポートしています。Eclipse、Github、Textmateなど多くの経典テーマがあります。すべてサポートします。ace/theme/textmateのtextmateをあなたの好きなテーマに置き換えるだけでいいです。
(6)描画pythonエディタ
4.可視化コード実行プロセス
VISUALIZE Python、Java、Java Script、Type Script、Ruby、C、and C++
Start visualizing your code now(or try live programming)
5.既にあるオンラインコード編集サイト
オンラインPythonエディタ
JSFiddlehttps://jsfiddle.net/
JSBnhttps://jsbin.com/
https://c9.io/
http://codepen.io/dylnhdsn/pen/pheJs
http://codepen.io/sparanoid/pen/nHAmi コードはホームページを参照できます。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
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, （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;">
data:text/html;charset=utf-8, <title>TextEditortitle> <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>
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>
実際、上のコードを簡単に修正すれば、すぐにブラウザを他の言語のエディタに変えられます。Markdown、C/C+、Javscript、Javaなどほとんどのプログラミング言語を含みます。あなたがしたいのは、コードの中のスペース/mode/pythonだけです。スペース/mode/対応する言語に変更すればいいです。
複数の言語をサポートするほか、ページテーマの変更もサポートしています。Eclipse、Github、Textmateなど多くの経典テーマがあります。すべてサポートします。ace/theme/textmateのtextmateをあなたの好きなテーマに置き換えるだけでいいです。
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 moredata: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>
(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>4.可視化コード実行プロセス
VISUALIZE Python、Java、Java Script、Type Script、Ruby、C、and C++
Start visualizing your code now(or try live programming)
5.既にあるオンラインコード編集サイト
オンラインPythonエディタ
JSFiddlehttps://jsfiddle.net/
JSBnhttps://jsbin.com/
https://c9.io/
http://codepen.io/dylnhdsn/pen/pheJs
http://codepen.io/sparanoid/pen/nHAmi コードはホームページを参照できます。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