Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>js-beautify 設定エディタ</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-css.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.4/beautify-html.min.js"></script> | |
| <div id="google_translate_element" style="float:left; margin-left:2px; margin-top:-8px; width:158px; border:0px solid #fff;"></div> | |
| <script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ja', includedLanguages: 'ar,bg,cs,da,de,el,en,es,fa,fi,fr,hi,hu,id,it,iw,ja,ko,ms,nl,no,pl,pt,ro,ru,sl,sv,th,tl,tr,uk,ur,vi,zh-CN,zh-TW', layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');} </script> | |
| <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script> | |
| <style> | |
| :root { | |
| --primary-color: #4a6fa5; | |
| --secondary-color: #f8f9fa; | |
| --border-color: #dee2e6; | |
| --hover-color: #e9ecef; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| h1, h2, h3 { | |
| color: var(--primary-color); | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| .panel { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .section { | |
| margin-bottom: 25px; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 15px; | |
| } | |
| .section:last-child { | |
| border-bottom: none; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| label { | |
| flex: 1; | |
| margin-right: 10px; | |
| font-size: 14px; | |
| } | |
| input, select { | |
| padding: 8px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| width: 100px; | |
| } | |
| .checkbox-group { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .checkbox-group input { | |
| width: auto; | |
| margin-right: 5px; | |
| } | |
| .help-icon { | |
| display: inline-block; | |
| width: 18px; | |
| height: 18px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 18px; | |
| font-size: 12px; | |
| margin-left: 8px; | |
| cursor: help; | |
| position: relative; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background-color: #333; | |
| color: white; | |
| padding: 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| width: 250px; | |
| z-index: 100; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| margin-bottom: 5px; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .help-icon:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| button { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #3a5a80; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 300px; | |
| padding: 10px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| font-family: monospace; | |
| resize: vertical; | |
| } | |
| .tab-container { | |
| display: flex; | |
| margin-bottom: 15px; | |
| } | |
| .tab { | |
| padding: 8px 15px; | |
| background-color: var(--secondary-color); | |
| border: 1px solid var(--border-color); | |
| border-bottom: none; | |
| cursor: pointer; | |
| border-radius: 4px 4px 0 0; | |
| margin-right: 5px; | |
| } | |
| .tab.active { | |
| background-color: white; | |
| border-bottom: 1px solid white; | |
| margin-bottom: -1px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .json-viewer { | |
| background-color: #f8f8f8; | |
| padding: 10px; | |
| border-radius: 4px; | |
| border: 1px solid var(--border-color); | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>js-beautify 設定エディタ <small>v1.15.4</small></h1> | |
| <div class="container"> | |
| <div class="panel"> | |
| <h2>設定オプション</h2> | |
| <div class="tab-container"> | |
| <div class="tab active" data-tab="common">共通オプション</div> | |
| <div class="tab" data-tab="js">JavaScript</div> | |
| <div class="tab" data-tab="css">CSS</div> | |
| <div class="tab" data-tab="html">HTML</div> | |
| </div> | |
| <div id="common" class="tab-content active"> | |
| <div class="section"> | |
| <h3>基本設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| indent_size (インデントのスペース数) | |
| <span class="help-icon">? | |
| <span class="tooltip">インデントに使用するスペースの数。デフォルトは4。</span> | |
| </span> | |
| </label> | |
| <input type="number" id="indent_size" value="4" min="1" max="8"> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| indent_char (インデント文字) | |
| <span class="help-icon">? | |
| <span class="tooltip">インデントに使用する文字（スペースまたはタブ）。デフォルトはスペース。</span> | |
| </span> | |
| </label> | |
| <select id="indent_char"> | |
| <option value=" " selected>スペース</option> | |
| <option value="\t">タブ</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| indent_with_tabs (タブでインデント) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとタブでインデントします。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="indent_with_tabs"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| editorconfig (.editorconfig 参照) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると.editorconfigファイルを参照します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="editorconfig"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| eol (改行文字) | |
| <span class="help-icon">? | |
| <span class="tooltip">使用する改行文字（例: "\n"）。デフォルトは"\n"。</span> | |
| </span> | |
| </label> | |
| <select id="eol"> | |
| <option value="\n" selected>\n (LF)</option> | |
| <option value="\r\n">\r\n (CRLF)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| end_with_newline (ファイル末尾に改行追加) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとファイルの最後に改行を追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="end_with_newline"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>改行設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| preserve_newlines (元の改行保持) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると元の改行を保持します。デフォルトはtrue。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="preserve_newlines" checked> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| max_preserve_newlines (改行の最大保持数) | |
| <span class="help-icon">? | |
| <span class="tooltip">連続する改行の最大保持数。デフォルトは10。</span> | |
| </span> | |
| </label> | |
| <input type="number" id="max_preserve_newlines" value="10" min="1" max="100"> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| indent_empty_lines (空行にもインデント付加) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると空行にもインデントを追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="indent_empty_lines"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>スペース設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| space_in_paren (括弧内スペース) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると括弧内にスペースを追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="space_in_paren"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| space_in_empty_paren (空括弧内スペース) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると空の括弧内にスペースを追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="space_in_empty_paren"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| space_after_anon_function (無名関数の後にスペース) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると無名関数の後にスペースを追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="space_after_anon_function"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| space_after_named_function (名前付き関数の後にスペース) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると名前付き関数の後にスペースを追加します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="space_after_named_function"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h3>その他の設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| jslint_happy (JSLint互換フォーマット) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとJSLint互換のフォーマットになります。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="jslint_happy"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| unescape_strings (文字列のエスケープ解除) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると文字列のエスケープを解除します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="unescape_strings"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| wrap_line_length (1行の最大長) | |
| <span class="help-icon">? | |
| <span class="tooltip">1行の最大文字数。0は無制限。デフォルトは0。</span> | |
| </span> | |
| </label> | |
| <input type="number" id="wrap_line_length" value="0" min="0" max="500"> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| comma_first (カンマを行頭に移動) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとカンマを行頭に移動します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="comma_first"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="js" class="tab-content"> | |
| <div class="section"> | |
| <h3>JavaScript 設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| brace_style ({} のスタイル) | |
| <span class="help-icon">? | |
| <span class="tooltip">"collapse" (デフォルト), "expand", "end-expand", "none" のいずれか</span> | |
| </span> | |
| </label> | |
| <select id="js_brace_style"> | |
| <option value="collapse" selected>collapse</option> | |
| <option value="expand">expand</option> | |
| <option value="end-expand">end-expand</option> | |
| <option value="none">none</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| unindent_chained_methods (チェーンメソッドのインデント抑制) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとチェーンメソッドのインデントを抑制します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="unindent_chained_methods"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| break_chained_methods (チェーンメソッドを改行) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとチェーンメソッドを改行します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="break_chained_methods"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| keep_array_indentation (配列のインデントを保持) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにすると配列のインデントを保持します。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="keep_array_indentation"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| operator_position (演算子の配置) | |
| <span class="help-icon">? | |
| <span class="tooltip">"before-newline" (デフォルト), "after-newline", "preserve-newline" のいずれか</span> | |
| </span> | |
| </label> | |
| <select id="operator_position"> | |
| <option value="before-newline" selected>before-newline</option> | |
| <option value="after-newline">after-newline</option> | |
| <option value="preserve-newline">preserve-newline</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="css" class="tab-content"> | |
| <div class="section"> | |
| <h3>CSS 設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| brace_style ({} の配置) | |
| <span class="help-icon">? | |
| <span class="tooltip">CSS用の{}配置スタイル</span> | |
| </span> | |
| </label> | |
| <select id="css_brace_style"> | |
| <option value="collapse" selected>collapse</option> | |
| <option value="expand">expand</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| selector_separator_newline (セレクタ間の改行) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとセレクタ間で改行します。デフォルトはtrue。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="selector_separator_newline" checked> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| newline_between_rules (ルール間の改行) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとCSSルール間で改行します。デフォルトはtrue。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="newline_between_rules" checked> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="html" class="tab-content"> | |
| <div class="section"> | |
| <h3>HTML 設定</h3> | |
| <div class="form-group"> | |
| <label> | |
| indent_inner_html (<body>内のインデント) | |
| <span class="help-icon">? | |
| <span class="tooltip">trueにするとbodyタグ内をインデントします。デフォルトはfalse。</span> | |
| </span> | |
| </label> | |
| <div class="checkbox-group"> | |
| <input type="checkbox" id="indent_inner_html"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| indent_scripts (スクリプトのインデント方法) | |
| <span class="help-icon">? | |
| <span class="tooltip>"normal", "keep", "separate" のいずれか</span> | |
| </span> | |
| </label> | |
| <select id="indent_scripts"> | |
| <option value="normal" selected>normal</option> | |
| <option value="keep">keep</option> | |
| <option value="separate">separate</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| wrap_attributes (属性の折り返し) | |
| <span class="help-icon">? | |
| <span class="tooltip>"auto", "force", "force-aligned", "force-expand-multiline", "aligned-multiple", "preserve", "preserve-aligned" のいずれか</span> | |
| </span> | |
| </label> | |
| <select id="wrap_attributes"> | |
| <option value="auto" selected>auto</option> | |
| <option value="force">force</option> | |
| <option value="force-aligned">force-aligned</option> | |
| <option value="force-expand-multiline">force-expand-multiline</option> | |
| <option value="aligned-multiple">aligned-multiple</option> | |
| <option value="preserve">preserve</option> | |
| <option value="preserve-aligned">preserve-aligned</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| wrap_attributes_min_attrs (折り返し最小属性数) | |
| <span class="help-icon">? | |
| <span class="tooltip">この数以上の属性がある場合に折り返します。デフォルトは2。</span> | |
| </span> | |
| </label> | |
| <input type="number" id="wrap_attributes_min_attrs" value="2" min="1" max="10"> | |
| </div> | |
| <div class="form-group"> | |
| <label> | |
| extra_liners (改行追加対象タグ) | |
| <span class="help-icon">? | |
| <span class="tooltip">これらのタグの前後に改行を追加します。カンマ区切りで指定。</span> | |
| </span> | |
| </label> | |
| <input type="text" id="extra_liners" value="head,body,/html"> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generate-json">設定を生成</button> | |
| <button id="reset-settings">リセット</button> | |
| </div> | |
| <div class="panel"> | |
| <h2>設定プレビュー</h2> | |
| <div class="section"> | |
| <h3>生成された設定JSON</h3> | |
| <div id="json-preview" class="json-viewer">設定を生成してください...</div> | |
| </div> | |
| <div class="section"> | |
| <h3>コードテスト</h3> | |
| <label for="test-code">テストコード:</label> | |
| <textarea id="test-code" placeholder="ここにテストコードを入力..."></textarea> | |
| <div class="form-group"> | |
| <label for="test-type">コードタイプ:</label> | |
| <select id="test-type"> | |
| <option value="js">JavaScript</option> | |
| <option value="css">CSS</option> | |
| <option value="html">HTML</option> | |
| </select> | |
| <button id="test-beautify">整形テスト</button> | |
| </div> | |
| <label for="test-result">結果:</label> | |
| <textarea id="test-result" readonly></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // タブ切り替え | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| tab.classList.add('active'); | |
| document.getElementById(tab.dataset.tab).classList.add('active'); | |
| }); | |
| }); | |
| // 設定生成 | |
| document.getElementById('generate-json').addEventListener('click', () => { | |
| const options = { | |
| indent_size: parseInt(document.getElementById('indent_size').value), | |
| indent_char: document.getElementById('indent_char').value, | |
| indent_with_tabs: document.getElementById('indent_with_tabs').checked, | |
| editorconfig: document.getElementById('editorconfig').checked, | |
| eol: document.getElementById('eol').value, | |
| end_with_newline: document.getElementById('end_with_newline').checked, | |
| preserve_newlines: document.getElementById('preserve_newlines').checked, | |
| max_preserve_newlines: parseInt(document.getElementById('max_preserve_newlines').value), | |
| indent_empty_lines: document.getElementById('indent_empty_lines').checked, | |
| space_in_paren: document.getElementById('space_in_paren').checked, | |
| space_in_empty_paren: document.getElementById('space_in_empty_paren').checked, | |
| jslint_happy: document.getElementById('jslint_happy').checked, | |
| space_after_anon_function: document.getElementById('space_after_anon_function').checked, | |
| space_after_named_function: document.getElementById('space_after_named_function').checked, | |
| unescape_strings: document.getElementById('unescape_strings').checked, | |
| wrap_line_length: parseInt(document.getElementById('wrap_line_length').value), | |
| comma_first: document.getElementById('comma_first').checked, | |
| operator_position: document.getElementById('operator_position').value, | |
| js: { | |
| brace_style: document.getElementById('js_brace_style').value, | |
| unindent_chained_methods: document.getElementById('unindent_chained_methods').checked, | |
| break_chained_methods: document.getElementById('break_chained_methods').checked, | |
| keep_array_indentation: document.getElementById('keep_array_indentation').checked | |
| }, | |
| css: { | |
| brace_style: document.getElementById('css_brace_style').value, | |
| selector_separator_newline: document.getElementById('selector_separator_newline').checked, | |
| newline_between_rules: document.getElementById('newline_between_rules').checked | |
| }, | |
| html: { | |
| indent_inner_html: document.getElementById('indent_inner_html').checked, | |
| indent_scripts: document.getElementById('indent_scripts').value, | |
| wrap_attributes: document.getElementById('wrap_attributes').value, | |
| wrap_attributes_min_attrs: parseInt(document.getElementById('wrap_attributes_min_attrs').value), | |
| extra_liners: document.getElementById('extra_liners').value.split(',').map(s => s.trim()) | |
| } | |
| }; | |
| document.getElementById('json-preview').textContent = JSON.stringify(options, null, 2); | |
| }); | |
| // リセット | |
| document.getElementById('reset-settings').addEventListener('click', () => { | |
| // 共通オプション | |
| document.getElementById('indent_size').value = 4; | |
| document.getElementById('indent_char').value = ' '; | |
| document.getElementById('indent_with_tabs').checked = false; | |
| document.getElementById('editorconfig').checked = false; | |
| document.getElementById('eol').value = '\n'; | |
| document.getElementById('end_with_newline').checked = false; | |
| document.getElementById('preserve_newlines').checked = true; | |
| document.getElementById('max_preserve_newlines').value = 10; | |
| document.getElementById('indent_empty_lines').checked = false; | |
| document.getElementById('space_in_paren').checked = false; | |
| document.getElementById('space_in_empty_paren').checked = false; | |
| document.getElementById('jslint_happy').checked = false; | |
| document.getElementById('space_after_anon_function').checked = false; | |
| document.getElementById('space_after_named_function').checked = false; | |
| document.getElementById('unescape_strings').checked = false; | |
| document.getElementById('wrap_line_length').value = 0; | |
| document.getElementById('comma_first').checked = false; | |
| document.getElementById('operator_position').value = 'before-newline'; | |
| // JSオプション | |
| document.getElementById('js_brace_style').value = 'collapse'; | |
| document.getElementById('unindent_chained_methods').checked = false; | |
| document.getElementById('break_chained_methods').checked = false; | |
| document.getElementById('keep_array_indentation').checked = false; | |
| // CSSオプション | |
| document.getElementById('css_brace_style').value = 'collapse'; | |
| document.getElementById('selector_separator_newline').checked = true; | |
| document.getElementById('newline_between_rules').checked = true; | |
| // HTMLオプション | |
| document.getElementById('indent_inner_html').checked = false; | |
| document.getElementById('indent_scripts').value = 'normal'; | |
| document.getElementById('wrap_attributes').value = 'auto'; | |
| document.getElementById('wrap_attributes_min_attrs').value = 2; | |
| document.getElementById('extra_liners').value = 'head,body,/html'; | |
| document.getElementById('json-preview').textContent = '設定をリセットしました。再度生成してください...'; | |
| }); | |
| // 整形テスト | |
| document.getElementById('test-beautify').addEventListener('click', () => { | |
| const code = document.getElementById('test-code').value; | |
| const type = document.getElementById('test-type').value; | |
| if (!code.trim()) { | |
| alert('テストコードを入力してください'); | |
| return; | |
| } | |
| try { | |
| const options = JSON.parse(document.getElementById('json-preview').textContent); | |
| let result; | |
| switch (type) { | |
| case 'js': | |
| result = js_beautify(code, options); | |
| break; | |
| case 'css': | |
| result = css_beautify(code, options); | |
| break; | |
| case 'html': | |
| result = html_beautify(code, options); | |
| break; | |
| default: | |
| result = '無効なコードタイプ'; | |
| } | |
| document.getElementById('test-result').value = result; | |
| } catch (e) { | |
| alert('まず設定を生成してください'); | |
| console.error(e); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |