ブラウザをコードエディタに変えるにはどうすればよいでしょうか? _html/css_WEB-ITnose
ウェブを閲覧したり、オンラインビデオを視聴したりするためにブラウザを使用していませんか?引き続きブラウザでコーディングできますか?
そうです！本当にできます。 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 を実行してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7569
15
1386
52
87
11
28
107
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
