プロローグ
この投稿は、「 行番号を付けずにソースコードをコピーする 」という記事に基づいています。 また、この投稿には、Web開発およびWebデザインの専門家向けの新しい情報はありません。 そして、あなた自身をそのように考えるならば、あなたは穏やかな魂で猫の下を見ることができません。
khrabrachitatelの下を見ると、上記の記事に基づいて、Delphi言語の構文の美しいハイライト、苦痛の説明、新たなバグとの戦いを行うアマチュアの試みが見つかります。 まあ、5つの一般的なブラウザの少し主観的な印象。
博覧会
私の職業の性質上、私は
もちろん、多くのIT従業員は、これが別のバイクであり、Apache、Ngnix、またはDropBox / SugarSyncで入手できると言うでしょう。一般的にはDelphiWorldがあります。 しかし、言い訳として、これらはすべて、「HTTPプロトコル」、「Webサーバーデバイス」、「gzipを使用する」、そしてもちろん、自転車の構築で新しい経験を積むスキルを向上させることを主な目的としています。
私の仕事はWeb開発とはまったく関係ないので、Firefoxは2年前に偶然にメインのブラウザになりました。 残りも知りませんでした IEを除き、ビルトインOSにより、必要な場合と必要でない場合にクロールします。
ネクタイ
「 行番号を付けずにソースコードをコピーする 」という記事が登場したとき、プロジェクトで指定された開発を使用することが決定されました。 最初の試みで問題が明らかになりました。この記事では、IE7 / IE8のハイフネーションが正しく機能しませんでした。 作者はすぐに応答しました-リファクタリング中に必要な行が削除されたことがわかりました。
そのため、コードはIEおよびFirefoxで正常に動作するようです。 しかし、そこにありました。
アクション開発
IEとFirefoxはどちらも、必要に応じてテキストを表示していましたが、コピーと貼り付けの際に、 preタグとcodeタグの両方が指定されていたにもかかわらず、どちらも安全にスペースを使用しました。 そして、彼らはさまざまな方法でそれらを食べました：最初は多くのスペースを1つに絞り、2つ目は先頭のスペースを投げました。 もちろん、最初の考えは、上記の記事の著者がデモで行ったように、スペースをnbspに置き換えることです。 しかし、この決定のために何かが私の心を揺さぶりませんでした。
精神的にシャーバニックなタンバリンを拾い上げて、私は3つの夜のために野生のダンスに深く入りました。 神様、それから私はタイプセッターを軽視して無駄に扱っていることに気付きました。 ただし、これらは2つのブラウザにすぎません。
クライマックス
マシン上の「ダンス」中にオペラが登場しました。 驚いたことに、彼女はスペースを食べませんでした。 オンラインディレクトリ、3つのブラウザー、2つのエディターの間でスローが始まりました-修正、切り替え、更新、ハイライト、コピー、切り替え、貼り付け、2番目のブラウザーへの切り替え、更新、スワイプなど、さまざまな組み合わせで円を描きます。
レイアウトが浮かんでいる、余分な改行が挿入されている、背景色が消えている、などなど。 徐々に、「基本的にそれなしで機能する」という基準に該当するものはすべて、元のコードから削除されました。
デノウメント
実際、彼女は次のとおりです。
<!doctype html> <html> <head> <title>Copy source code with no line number</title> <meta http-equiv="content-type" content="text/html; charset=win-1251" /> <style type="text/css"> .over { display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(#); } .evn { display: block; background: #F8F8F8; } .odd { display: block; background: #F0F0F0; } .lineNumber { position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; background: none; border: none; font-family: monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; -webkit-user-select: none; user-select: none; pointer-events: none; } .lineContent { display: block; margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; white-space: pre-wrap; } .token-strings { color: #000088; } .token-comment { color: navy; font-style: italic; } .token-keyword { font-weight: bold; } .header { display: block; margin-top: 1ex; padding-top: 1ex; margin-left: 1ex; padding-left: 2ex; font-family: times; font-size: 120%; font-weight: none; white-space: pre-wrap; } </style> </head> <body> <span class="header"> "Hello, World!" Delphi</span> <pre class="lineContent"> <span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="1" unselectable="on"><span class="over"></span><span class="token-keyword">program</span> Hello; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="2" unselectable="on"><span class="over"></span><span class="token-comment">{$APPTYPE CONSOLE}</span> </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="3" unselectable="on"><span class="over"></span><span class="token-keyword">begin</span> </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="4" unselectable="on"><span class="over"></span> Writeln('<span class="token-strings">Hello, World!</span>'); </span><span class="odd"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="5" unselectable="on"><span class="over"></span> Readln; </span><span class="evn"><input class="lineNumber" tabIndex="-1" readOnly="readonly" value="6" unselectable="on"><span class="over"></span><span class="token-keyword">end.</span> </span></pre> </body> </html>
エピローグ
このソリューションの短所：
-番号付けの背景が背景コードと一致しません。
-Operaでは、フィールドから番号付けを選択して上に選択し始めると、バッファには何もコピーされません。
-コピーされたテキストの終わりに異なるブラウザでは、異なる数の改行が追加されます。
すべてが好きです。 最後の2つのブラウザーをインストールし、「それらの作業」を確認するために残ります。 単純なユーザーとして私には理解できない瞬間がここにありました。
Chrome：
-メインインストーラーがダウンロードしたハーフバイトブートローダーがインストール時にサイレントに起動し、最後に「インストール済み」のChromeがサイレントに起動しました。 最初の試行ではうまくいきませんでした-「ようこそ」という見出しの小さな空のウィンドウが表示されました-一部が「バット」であることがわかりました。 2回目の試行は成功しました-小さなウィンドウがデフォルトの検索エンジンの選択であることが判明しました。 この選択により、Google、Yandex、Mail.Ruが提供されました。
-まだクリーンなデスクトップにショートカットを貼り付けた唯一のブラウザでした。
-インストール後、「* .html」などとのファイルの関連付けは、Safariのように表示されませんでした。
-そのような関連付けを作成しようとしたときに、長い間（1分半）私はインストールした場所を検索しました-デスクトップ上のショートカットの理由は明らかになりましたが、なぜそこにたどり着いたのかは不明でした-インストールは管理者の下から開始されました。
Safari：
-インストーラーの最大サイズ。
-長時間の起動時にプレビューを形成しました。
-私見、あなたはそのサムネイルに慣れる必要があります-二次実用的なガイドの後、それはあまり馴染みがありません。
-インストール後、OperaやFirefoxとは異なり、「* .html」などのファイルの関連付けは表示されませんでした。
-自動的に理解しなかった唯一の人、エンコーディング「charset = win-1251」がファイルで指定されています。
また、比較のために、他のブラウザの欠点は私にとって重要です（そしてより低いと高い-すべて私見）：
オペラ：
-ページを開いても、ダウンロードが進行中であることを知らせません-インジケーターもページの予備レンダリングもありません-アプリケーションがフリーズしているように感じます。
Firefox：
-彼らは長い間見ていました-2月に約束された第4バージョンはまだリリースされていません-昨日は3.6.15がリリースされ、バージョン3.6.14に登場したJavaスクリプトの不具合を修正しました。
IE：
-WinXPの新しいバージョンはありません。
ほとんどすべてのブラウザーの共通のマイナス点： 2回目の起動時にのみ、デフォルトのブラウザーとして自分自身を設定するように要求します。
PS
lahmatiyユーザーハブ （彼へのすべてのプラス:)、およびインターネットをより美しく、便利で人道的にするすべてのWeb開発者に感謝します-あなたの困難な仕事に対する忍耐。
そして、自転車を完成させます-「ウェブページをタイプセットする」のは私の仕事ではありません！