create_souceCode_chart/script.js at main · suamm12/create_souceCode_chart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85


    function escapeHtml(text) {
        let element = document.createElement('div');
        element.innerText = text;
        return element.innerHTML;
    }


    function formatLists() {
        // 入力されたテキストを取得
        let inputText = document.getElementById('inputTextarea').value;
        // 改行で分割して配列にする
        let lines = inputText.split('\n');
        // 出力用のテキストを初期化
        let outputText = '<code>\n<ol style=" padding-left: 5px; list-style:decimal-leading-zero outside;in-left:0;padding-left:36px;margin:0;background-color:#1E1E1E;color:#ffffff; font-size:16px; width: 605px; height: 450px; white-space: nowrap;  overflow: auto;">\n';

        // 各行ごとに処理して <li> で囲んで出力用テキストに追加する
        lines.forEach(function (line) {
            // 空白も含めて処理するため、trim() を使用しない
            if (line !== '') { // 空行を無視する


                let escapedLine = escapeHtml(line);

                escapedLine = escapedLine.replace(/ /g, '&nbsp;');

                outputText += '<li style="margin-left:7px">' + escapedLine + '</li>\n';
            }
            else if (line.trim() === '') {
                outputText += '<li style="margin-left:7px;"></li>\n';
            }
        });

        outputText += '</ol>\n</code>';

        // 入力に応じて ul または ol タグで囲んで出力用テキストに追加する
        if (document.getElementById('inputTextarea').value.trim() !== '') {
            if (document.getElementById('useOl').checked) {
                outputText = '<ol>\n' + outputText + '</ol>';
            } else {
                // outputText = '<ul>\n' + outputText + '</ul>';
            }
        }

        const preview = document.getElementById("preview")

        // 出力用のテキストエリアに結果を表示する
        document.getElementById('outputTextarea').value = outputText;
        preview.innerHTML = outputText
    }


    // Accordion

    // DOMの読み込みが完了したら実行する
    document.addEventListener("DOMContentLoaded", function () {
        // 全てのアコーディオン要素を取得する
        const accordions = document.querySelectorAll(".accordion");

        // 各アコーディオン要素に対してクリックイベントを設定する
        accordions.forEach(function (accordion) {
            // アコーディオンのヘッダー要素を取得する
            const header = accordion.querySelector(".accordion-header");

            // クリックイベントを設定する
            header.addEventListener("click", function () {
                // クリックされたアコーディオンのコンテンツ要素を取得する
                const content = accordion.querySelector(".accordion-content");

                // コンテンツの表示・非表示を切り替える
                if (content.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        });
    });