ブラウザをコードエディタに変えるにはどうすればよいでしょうか? _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）
ホットトピック
7328
9
1626
14
1350
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
