ホバー時にコードブロックをフルスクリーンに切り替えます
StackExchange サイトでフルスクリーンとコードブロックにコピー機能を追加することによってコードビュー体験を向上させる包括的なユーザースクリプト.
このスクリプトは、StackExchange ネットワーク全体で動作します。
「JavaScript」 // コア機能 addStyles() // ボタンやレイアウトの CSS を注入する addButtons() // コードブロックのホバーボタンを作成します openCodeInNewTab() // フルスクリーンの視聴体験を生成します copyToClipboard() // コードコピー機能を処理する
### CSSアーキテクチャ
- **透明なラッパー** - 元のスタイルを妨げないでください
- **レスポンス設計** - 異なる画面サイズに適応
- **ホバーインタラクション** - クリーンで直感的なユーザー体験
- **フルスクリーン最適化** - 専用ビューで最大の読みやすさ
### イベント管理
- **ロードイベント** - ページコンテンツのロード後に初期化
- **ホバー状態** - 制御ボタンを表示する/隠す
- **クリックハンドラー** - フルスクリーンとコピー操作を管理します
- **キーボードイベント** - フルスクリーンでエスケープキーサポート
## カスタマイズ
### スタイルオプション
スクリプトはCSS変数を変更することでカスタマイズできます:
```css
/* Button appearance */
.button {
background- color: #eee; /* Button background */
font- size: 12px; /* Button text size */
padding: 4px 8px; /* Button spacing */
}
/* Fullscreen styling */
.toolbar button {
background: #007acc; /* Toolbar button color */
color: white; /* Toolbar text color */
}
構文強調は、以下を含む190以上のプログラミング言語をサポートします。
ボタンが表示されない
フルスクリーンでポップアップがブロックされました
構文強調が動作しません
コピーが動作しない**
MITライセンス - 個人および商業用途のために無料。
問題、機能リクエスト、または貢献について: