ホームページ >ウェブフロントエンド >htmlチュートリアル >ブラウザをコードエディタに変えるにはどうすればよいでしょうか? _html/css_WEB-ITnose
ブラウザをコードエディタに変えるにはどうすればよいでしょうか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:061350ブラウズ
ウェブを閲覧したり、オンラインビデオを視聴したりするためにブラウザを使用していませんか?引き続きブラウザでコーディングできますか?
そうです！本当にできます。 JSFiddle や JSBin など、オンライン コード編集用の Web サイトはすでに多数ありますが、今回紹介する方法では、サードパーティの Web サイトを登録する必要はなく、ブラウザのアドレス バーにコードを 1 行入力するだけです。 。まずは具体的な効果を見ていきましょう。
上の図では、Python コードをブラウザに入力でき、構文の強調表示と自動インデントがサポートされていることがわかります。では、これはどのようにして達成されるのでしょうか?
これは実際、2012 年に Jose Aguinaga という名前の外国人開発者が Coderwall で共有したヒントにまで遡ることができます。
ブラウザをシンプルなテキストエディタに変える
初期機能は非常にシンプルで、構文の強調表示や自動インデントはまったくなく、ブラウザをテキストエディタに変えるだけです。
Jose が共有したコードは次のとおりです:
data:text/html, <html contenteditable>
上記のコードをコピーしてブラウザのアドレス バーに貼り付け、Enter キーを押すだけでブラウザがエディタに変わります。とても簡単なことではありませんか？
その背後にある原理は深いものではなく、データ URI 形式を使用するだけです。このコード行はブラウザに HTML ページをレンダリングするように指示しており、このページには H5 属性 contenteditable があります。
データ URI は、小さなファイルをドキュメントに直接埋め込むために RFC 2397 で定義されたスキームです。形式は次のとおりです: データ:[ ][;charset= ][;base64], .実際には、全体はステートメント、パラメータ + データの 3 つの部分として考えることができます。カンマの左側が各種パラメータ、右側がデータです。
試してみたい方は、このコード行は Chrome などの最新のブラウザにのみ適用されることに注意してください。 IE8 などの古いブラウザを使用している場合は、効果がありません。
さまざまなスタイルが派生しました
上記の小さなトリックの出現により、多くの開発者が独自のバージョンを共有するようになりました。
背景色を自動的に切り替える
次のコードを使用すると、入力中にエディタで背景色を一度に切り替えることができます:
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>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>
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> このコードは、Github で jdkanani によって共有されました。
実際、上記のコードを変更するだけで、ブラウザを Markdown、C/C++、Javscript、Java およびほぼすべてのプログラミング言語を含む他の言語のエディターにすぐに変えることができます。コード内の ace/mode/python を ace/mode/対応する言語 (java など) に変更するだけです。
多言語のサポートに加えて、ページテーマの変更もサポートしています。 Eclipse、Github、Textmate、その他多くの古典的なテーマがすべてサポートされています。 ace/theme/textmate の textmate を、monokai などのお気に入りのテーマに置き換えるだけです。
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 に変換します。
の背後にある原則 これらの例を読んだ後、あなたはすでに理解しているかもしれません: これらの例はすべて、ブラウザーがデータ URI 形式を通じて HTML コードの一部をレンダリングできるようにします。エディター関連のスタイルは、すでにコードに記述されています。これは、対応する HTML コードを別のファイルで開くのと同じ効果があります。
最初の 2 つの例では、ace.js というファイルが実際にコード内で使用されていることに気づいたでしょうか。編集者の理解によれば、Ace は JavaScript で書かれた埋め込みコードエディターであり、Sublime、Vim、TextMate などのネイティブエディターと同等の機能とパフォーマンスを持つと言われています。さらに、Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。
Ace は、Cloud9IDE と呼ばれるオンライン統合開発環境で使用されるメインエディターでもあります。具体的な効果については、以下の図を参照してください:
SlimText
プログラマーは気まぐれな種族です。一部の開発者は、手動でコードを入力してブラウザをエディタに変える、または実際のエディタを直接移動してブラウザ内で実行するという上記の方法にまだ満足していません。これが最後に紹介する SlimText です。以下は具体的なスクリーンショットです。
スクリーンショットに示されているように、SlimText は実際のブラウザ側のコード エディタであり、Chrome プラグインの形式で存在し、ファイル構造、ファイル検索、ファイル保存などの機能を備えています。 tylerlongという中国人によって開発され、Windows、Linux、Mac OS Xなどの複数のプラットフォームをサポートしています。
興味がある場合は、Chrome ウェブストアから直接インストールすることをお勧めします。 Windows 8 でのインストール時に問題が発生した場合は、Windows 7 互換モードで Chrome を実行してください。