From 09851708152afe308fc5df1fe5142fde18370a85 Mon Sep 17 00:00:00 2001
From: tianfenghan <rango@swoole.com>
Date: Thu, 28 Dec 2023 18:37:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E5=AF=B9=E7=85=A7=E7=9A=84=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/index-bootstrap.php | 114 ----------------------
 web/public/index.php    | 211 ++++------------------------------------
 web/public/input.php    | 189 +++++++++++++++++++++++++++++++++++
 web/public/output.php   | 150 ++++++++++++++++++++++++++++
 4 files changed, 359 insertions(+), 305 deletions(-)
 delete mode 100644 web/index-bootstrap.php
 create mode 100644 web/public/input.php
 create mode 100644 web/public/output.php
diff --git a/web/index-bootstrap.php b/web/index-bootstrap.php
deleted file mode 100644
index 96cb580a..00000000
--- a/web/index-bootstrap.php
+++ /dev/null
@@ -1,114 +0,0 @@
-<head>
-    <meta charSet="UTF-8"/>
-    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
-    <link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
-    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
-    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.css" rel="stylesheet">
-    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.js"></script>
-
-    <style type="text/css">
-        #divCodeWrapper {
-            height: calc(100vh - 200px);
-            max-height: 600px;
-            width: 1200px;
-            overflow: hidden;
-            border: 1px solid #a5a5a5;
-            position: relative;
-        }
-
-        #preCode {
-            height: 100%;
-            width: calc(100% - 50px);
-            position: absolute;
-            top: 0;
-            left: 50px;
-            overflow: hidden;
-            padding: 0;
-            margin: 0;
-            background: #1b1b1b;
-            border: none;
-        }
-
-        #preCode code {
-            padding: 15px;
-            height: calc(100% - 30px);
-            width: calc(100% - 30px);
-            overflow-y: scroll;
-            overflow-x: auto;
-        }
-
-        textarea {
-            position: absolute;
-            top: 0;
-            padding: 15px;
-            z-index: 2;
-            overflow-x: auto;
-            overflow-y: scroll;
-            white-space: nowrap;
-            background-color: rgba(0, 0, 0, 0);
-            color: rgba(0, 0, 0, 0);
-            caret-color: white;
-            border: none;
-            outline: none;
-            border-left: 1px solid #383838;
-        }
-
-        #lineNumbers {
-            position: absolute;
-            top: 0;
-            left: 0;
-            text-align: right;
-            height: calc(100% - 50px);
-            width: 100px;
-            overflow: hidden;
-        }
-    </style>
-
-    <link id="theme1" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/vs2015.min.css"
-          rel="stylesheet"/>
-
-    <script src="codeEditorShortcutKeys.js" type="text/javascript"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"
-            type="text/javascript"></script>
-</head>
-
-
-<body>
-<div style="width: 600px; margin: 0 auto; padding-top: 50px">
-    <script>
-        function postForm(form) {
-            axios.post('/py2php.php', {
-                code: form.code.value,
-            }, {
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            }).then(response => {
-                if (response.data.data.result == undefined) {
-                    form.result.value = 'ERROR'
-                } else {
-                    form.result.value = response.data.data.result
-                }
-            }).catch(error => {
-                console.log(error);
-            });
-
-            return false;
-        }
-    </script>
-    <h1>phpy 工具集</h1>
-    <ul class="nav nav-tabs">
-        <li role="presentation" class="active"><a href="#">Python 转 PHP</a></li>
-    </ul>
-    <form style="margin-top: 30px" onsubmit="return postForm(this)">
-        <div class="form-group">
-            <label>Python 代码</label>
-            <textarea class="form-control" rows="32" name="code"></textarea>
-        </div>
-        <button type="submit" class="btn btn-primary">提交</button>
-    </form>
-</div>
-
-</body>
diff --git a/web/public/index.php b/web/public/index.php
index 0da1e90b..82063abc 100644
--- a/web/public/index.php
+++ b/web/public/index.php
@@ -1,201 +1,30 @@
-﻿<!DOCTYPE html>
-
-<html>
-
+<!DOCTYPE html>
+<html lang="en" xmlns="">
 <head>
+    <meta charset="UTF-8">
     <title>Convert Python code to PHP</title>
-    <style id="styleFont">
-        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
-
-        #preCode code,
-        textarea,
-        #lineNumbers,
-        .lineNumbers {
-            font-family: "Roboto Mono", monospace;
-            font-weight: 400;
-            font-size: 12pt;
-            line-height: 150%;
-        }
-
-    </style>
-    <link href="./static/css/style.css" rel="stylesheet"/>
-    <link id='theme1' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css"
-          rel="stylesheet"/>
-    <script src="./static/js/codeEditorShortcutKeys.js" type="text/javascript"></script>
-    <script src="./static/js/jquery-1.10.2.js" type="text/javascript"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"
-            type="text/javascript"></script>
 </head>
-
 <body>
-
-<h1>Python 代码转 PHP</h1>
-<?php
-define('ROOT_PATH', dirname(__DIR__));
-?>
-<p style="height: 36px">
-    编程语言:
-    <?php include ROOT_PATH . '/include/lang.php'; ?>
-    风格:
-    <?php include ROOT_PATH . '/include/style.php'; ?>
-    字体:
-    <?php include ROOT_PATH . '/include/font.php'; ?>
-    字体尺寸:
-    <input id="inputFontSize" type="number" step="1" value="12" style="width: 40px;"/>
-    行高 (%):
-    <input id="lineHeight" type="number" step="10" value="200" style="width: 50px;"/>
-</p>
-
-<div id="divCodeWrapper">
-    <pre><code style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" class="lineNumbers"></code></pre>
-    <pre><code id="lineNumbers" style="opacity: 0.5;"></code></pre>
-    <pre id="preCode"><code id="codeBlock" class="language-python"></code></pre>
-    <textarea id="textarea1" wrap="soft" spellcheck="false"></textarea>
-</div>
-
-<div style="margin-top: 8px">
-    <button id="btn-convert" style="height: 32px; width: 60px">转换</button>
-    <button id="btn-reset" style="height: 32px; width: 60px">重置</button>
-</div>
-
-<h2>快捷键</h2>
-<ol>
-    <li>
-        <p><strong>Enter</strong>：换行，并保持与上一行相同的缩进</p>
-    </li>
-    <li>
-        <p><strong>Tab</strong>/<strong>Shift</strong> + <strong>Tab</strong>：增加/减少缩进（支持多行）</p>
-    </li>
-    <li>
-        <p><strong>Shift</strong> + <strong>Del</strong> 或 <strong>Shift</strong> + <strong>Backspace</strong>：删除整行
-        </p>
-    </li>
-    <li>
-        <p><strong>Home</strong>：将光标移到文本中的第一个非空格字符之前</p>
-    </li>
-</ol>
-
-<script type="text/javascript">
-    const textarea1 = document.getElementById("textarea1");
-    const codeBlock = document.getElementById("codeBlock");
-    const lineNumbers = document.getElementById('lineNumbers');
-
-    $('#btn-convert').click(function () {
-        const code = textarea1.value
-        $.post("./convert.php", {code: code}, function (result) {
-            const json = JSON.parse(result)
-            textarea1.value = json.data.code
-            $('#btn-convert').hide()
-            $('#selectLanguage').val('language-php')
-            updateLang()
-            updateCode()
-        });
-    })
-
-    $('#btn-reset').click(function () {
-        textarea1.value = ''
-        $('#btn-convert').show()
-        $('#selectLanguage').val('language-python')
-        updateLang()
-        updateCode()
-    })
-
-    function updateLineNumbers() {
-        let lineCount = textarea1.value.split('\n').length;
-        let lines = '';
-        for (let i = 1; i <= lineCount; i++) {
-            lines += i + '\n';
-        }
-        lineNumbers.innerHTML = lines;
+<style>
+    iframe {
+        border: none;
     }
 
-    // copy code from textarea to code block
-    function updateCode() {
-        let content = textarea1.value;
-
-        // encode the special characters
-        content = content.replace(/&/g, '&amp;');
-        content = content.replace(/</g, '&lt;');
-        content = content.replace(/>/g, '&gt;');
-
-        // fill the encoded text to the code
-        codeBlock.innerHTML = content;
-        updateLineNumbers();
-
-        // call highlight.js to render the syntax highligtning
-        highlightJS();
+    .code-iframe {
+        overflow-x: hidden;
+        overflow-y: hidden;
+        margin: 0;
+        padding: 0;
     }
-
-    function updateLang() {
-        document.getElementById("codeBlock").className = $("#selectLanguage").val()
-        highlightJS()
-    }
-
-    // syntax highlight
-    function highlightJS() {
-        document.querySelectorAll('pre code').forEach((el) => {
-            hljs.highlightElement(el);
-        });
-    }
-
-    // detect content changes in the textarea
-    textarea1.addEventListener("input", () => {
-        updateCode();
-    });
-
-    // sync the scroll bar position between textarea and code block
-    textarea1.addEventListener("scroll", () => {
-        codeBlock.scrollTop = textarea1.scrollTop;
-        codeBlock.scrollLeft = textarea1.scrollLeft;
-        lineNumbers.scrollTop = textarea1.scrollTop;
-    });
-
-    // change theme
-    document.getElementById("selectStyle").addEventListener("change", (e) => {
-        document.getElementById("theme1").href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/${e.target.value}`;
-    });
-
-    // change font
-    function updateFont() {
-        let selectFont = document.getElementById("selectFont");
-        let fontName = selectFont.options[selectFont.selectedIndex].text;
-        let fontNameUrl = fontName.replace(" ", "+");
-        let inputFontSize = document.getElementById("inputFontSize");
-        let lineHeight = document.getElementById("lineHeight");
-
-        document.getElementById("styleFont").textContent = `
-            @import url('https://fonts.googleapis.com/css2?&display=swap&family=${fontNameUrl}');
-            pre, code, textarea, #lineNumbers, .lineNumbers {
-                font-family: "${fontName}", monospace;
-                font-size: ${inputFontSize.value}pt;
-                line-height: ${lineHeight.value}%;
-            }`;
-    }
-
-    // change programming language
-    document.getElementById("selectLanguage").addEventListener("change", function () {
-        document.getElementById("codeBlock").className = this.value;
-        highlightJS();
-    });
-
-    // change font size
-    document.getElementById("inputFontSize").addEventListener("input", () => {
-        updateFont();
-    });
-
-    // change font
-    document.getElementById("selectFont").addEventListener("change", () => {
-        updateFont();
-    });
-
-    // change line height
-    document.getElementById("lineHeight").addEventListener("input", () => {
-        updateFont();
-    });
-
-    bindCodeEditorShortcutKeys(textarea1);
-
+</style>
+<iframe src="./input.php" id="iframe-input" class="code-iframe"></iframe>
+<iframe src="./output.php" width="50%" id="iframe-output"></iframe>
+<script>
+    document.getElementById('iframe-input').height = window.screen.height
+    document.getElementById('iframe-output').height = window.screen.height
+    const sub = 60
+    document.getElementById('iframe-input').width = window.screen.width / 2 - sub
+    document.getElementById('iframe-output').width = window.screen.width / 2 - sub
 </script>
 </body>
-
 </html>
diff --git a/web/public/input.php b/web/public/input.php
new file mode 100644
index 00000000..b4486f81
--- /dev/null
+++ b/web/public/input.php
@@ -0,0 +1,189 @@
+﻿<!DOCTYPE html>
+
+<html>
+
+<head>
+    <title>Convert Python code to PHP</title>
+    <style id="styleFont">
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+        #preCode code,
+        textarea,
+        #lineNumbers,
+        .lineNumbers {
+            font-family: "Roboto Mono", monospace;
+            font-weight: 400;
+            font-size: 12pt;
+            line-height: 150%;
+        }
+
+    </style>
+    <link href="./static/css/style.css" rel="stylesheet"/>
+    <link id='theme1' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css"
+          rel="stylesheet"/>
+    <script src="./static/js/codeEditorShortcutKeys.js" type="text/javascript"></script>
+    <script src="./static/js/jquery-1.10.2.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"
+            type="text/javascript"></script>
+</head>
+
+<body>
+
+<h1>Python</h1>
+<?php
+define('ROOT_PATH', dirname(__DIR__));
+?>
+<p style="height: 36px">
+    风格:
+    <?php include ROOT_PATH . '/include/style.php'; ?>
+    字体:
+    <?php include ROOT_PATH . '/include/font.php'; ?>
+    字体尺寸:
+    <input id="inputFontSize" type="number" step="1" value="12" style="width: 40px;"/>
+    行高 (%):
+    <input id="lineHeight" type="number" step="10" value="200" style="width: 50px;"/>
+</p>
+
+<div id="divCodeWrapper">
+    <pre><code style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" class="lineNumbers"></code></pre>
+    <pre><code id="lineNumbers" style="opacity: 0.5;"></code></pre>
+    <pre id="preCode"><code id="codeBlock" class="language-python"></code></pre>
+    <textarea id="textarea1" wrap="soft" spellcheck="false"></textarea>
+</div>
+
+<div style="margin-top: 8px">
+    <button id="btn-convert" style="height: 32px; width: 60px">转换</button>
+    <button id="btn-reset" style="height: 32px; width: 60px">重置</button>
+</div>
+
+<h2>快捷键</h2>
+<ol>
+    <li>
+        <p><strong>Enter</strong>：换行，并保持与上一行相同的缩进</p>
+    </li>
+    <li>
+        <p><strong>Tab</strong>/<strong>Shift</strong> + <strong>Tab</strong>：增加/减少缩进（支持多行）</p>
+    </li>
+    <li>
+        <p><strong>Shift</strong> + <strong>Del</strong> 或 <strong>Shift</strong> + <strong>Backspace</strong>：删除整行
+        </p>
+    </li>
+    <li>
+        <p><strong>Home</strong>：将光标移到文本中的第一个非空格字符之前</p>
+    </li>
+</ol>
+
+<script type="text/javascript">
+    const textarea1 = document.getElementById("textarea1");
+    const codeBlock = document.getElementById("codeBlock");
+    const lineNumbers = document.getElementById('lineNumbers');
+
+    function updateOutputCode(code) {
+        window.parent.frames[1].document.getElementById('textarea1').value = code
+        window.parent.frames[1].updateCode()
+    }
+
+    $('#btn-convert').click(function () {
+
+        const code = textarea1.value
+        $.post("./convert.php", {code: code}, function (result) {
+            const json = JSON.parse(result)
+            updateOutputCode(json.data.code)
+        });
+    })
+
+    $('#btn-reset').click(function () {
+        textarea1.value = ''
+        updateCode()
+        updateOutputCode('')
+    })
+
+    function updateLineNumbers() {
+        let lineCount = textarea1.value.split('\n').length;
+        let lines = '';
+        for (let i = 1; i <= lineCount; i++) {
+            lines += i + '\n';
+        }
+        lineNumbers.innerHTML = lines;
+    }
+
+    // copy code from textarea to code block
+    function updateCode() {
+        let content = textarea1.value;
+
+        // encode the special characters
+        content = content.replace(/&/g, '&amp;');
+        content = content.replace(/</g, '&lt;');
+        content = content.replace(/>/g, '&gt;');
+
+        // fill the encoded text to the code
+        codeBlock.innerHTML = content;
+        updateLineNumbers();
+
+        // call highlight.js to render the syntax highligtning
+        highlightJS();
+    }
+
+    // syntax highlight
+    function highlightJS() {
+        document.querySelectorAll('pre code').forEach((el) => {
+            hljs.highlightElement(el);
+        });
+    }
+
+    // detect content changes in the textarea
+    textarea1.addEventListener("input", () => {
+        updateCode();
+    });
+
+    // sync the scroll bar position between textarea and code block
+    textarea1.addEventListener("scroll", () => {
+        codeBlock.scrollTop = textarea1.scrollTop;
+        codeBlock.scrollLeft = textarea1.scrollLeft;
+        lineNumbers.scrollTop = textarea1.scrollTop;
+    });
+
+    // change theme
+    document.getElementById("selectStyle").addEventListener("change", (e) => {
+        document.getElementById("theme1").href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/${e.target.value}`;
+    });
+
+    // change font
+    function updateFont() {
+        let selectFont = document.getElementById("selectFont");
+        let fontName = selectFont.options[selectFont.selectedIndex].text;
+        let fontNameUrl = fontName.replace(" ", "+");
+        let inputFontSize = document.getElementById("inputFontSize");
+        let lineHeight = document.getElementById("lineHeight");
+
+        document.getElementById("styleFont").textContent = `
+            @import url('https://fonts.googleapis.com/css2?&display=swap&family=${fontNameUrl}');
+            pre, code, textarea, #lineNumbers, .lineNumbers {
+                font-family: "${fontName}", monospace;
+                font-size: ${inputFontSize.value}pt;
+                line-height: ${lineHeight.value}%;
+            }`;
+    }
+
+
+    // change font size
+    document.getElementById("inputFontSize").addEventListener("input", () => {
+        updateFont();
+    });
+
+    // change font
+    document.getElementById("selectFont").addEventListener("change", () => {
+        updateFont();
+    });
+
+    // change line height
+    document.getElementById("lineHeight").addEventListener("input", () => {
+        updateFont();
+    });
+
+    bindCodeEditorShortcutKeys(textarea1);
+
+</script>
+</body>
+
+</html>
diff --git a/web/public/output.php b/web/public/output.php
new file mode 100644
index 00000000..68ee61ed
--- /dev/null
+++ b/web/public/output.php
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <title>Convert Python code to PHP</title>
+    <style id="styleFont">
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+        #preCode code,
+        textarea,
+        #lineNumbers,
+        .lineNumbers {
+            font-family: "Roboto Mono", monospace;
+            font-weight: 400;
+            font-size: 12pt;
+            line-height: 150%;
+        }
+
+    </style>
+    <link href="./static/css/style.css" rel="stylesheet"/>
+    <link id='theme1' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-dark.min.css"
+          rel="stylesheet"/>
+    <script src="./static/js/codeEditorShortcutKeys.js" type="text/javascript"></script>
+    <script src="./static/js/jquery-1.10.2.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"
+            type="text/javascript"></script>
+</head>
+
+<body>
+
+<h1>PHP</h1>
+<?php
+define('ROOT_PATH', dirname(__DIR__));
+?>
+<p style="height: 36px">
+    风格:
+    <?php include ROOT_PATH . '/include/style.php'; ?>
+    字体:
+    <?php include ROOT_PATH . '/include/font.php'; ?>
+    字体尺寸:
+    <input id="inputFontSize" type="number" step="1" value="12" style="width: 40px;"/>
+    行高 (%):
+    <input id="lineHeight" type="number" step="10" value="200" style="width: 50px;"/>
+</p>
+
+<div id="divCodeWrapper">
+    <pre><code style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" class="lineNumbers"></code></pre>
+    <pre><code id="lineNumbers" style="opacity: 0.5;"></code></pre>
+    <pre id="preCode"><code id="codeBlock" class="language-php"></code></pre>
+    <textarea id="textarea1" wrap="soft" disabled="disabled" spellcheck="false"></textarea>
+</div>
+
+<div style="margin-top: 8px">
+    <button id="btn-copy" style="height: 32px; width: 90px">复制此代码</button>
+</div>
+
+<script type="text/javascript">
+    const textarea1 = document.getElementById("textarea1");
+    const codeBlock = document.getElementById("codeBlock");
+    const lineNumbers = document.getElementById('lineNumbers');
+
+    $('#btn-copy').click(function () {
+        navigator.clipboard.writeText(textarea1.value)
+        $('#btn-copy').attr('disabled', 'disabled').text('已复制代码')
+    })
+
+    function updateLineNumbers() {
+        let lineCount = textarea1.value.split('\n').length;
+        let lines = '';
+        for (let i = 1; i <= lineCount; i++) {
+            lines += i + '\n';
+        }
+        lineNumbers.innerHTML = lines;
+    }
+
+    // copy code from textarea to code block
+    function updateCode() {
+        let content = textarea1.value;
+        $('#btn-copy').removeAttr('disabled').text('复制此代码')
+        // encode the special characters
+        content = content.replace(/&/g, '&amp;');
+        content = content.replace(/</g, '&lt;');
+        content = content.replace(/>/g, '&gt;');
+
+        // fill the encoded text to the code
+        codeBlock.innerHTML = content;
+        updateLineNumbers();
+
+        // call highlight.js to render the syntax highligtning
+        highlightJS();
+    }
+
+    // syntax highlight
+    function highlightJS() {
+        document.querySelectorAll('pre code').forEach((el) => {
+            hljs.highlightElement(el);
+        });
+    }
+
+    // sync the scroll bar position between textarea and code block
+    textarea1.addEventListener("scroll", () => {
+        codeBlock.scrollTop = textarea1.scrollTop;
+        codeBlock.scrollLeft = textarea1.scrollLeft;
+        lineNumbers.scrollTop = textarea1.scrollTop;
+    });
+
+    // change theme
+    document.getElementById("selectStyle").addEventListener("change", (e) => {
+        document.getElementById("theme1").href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/${e.target.value}`;
+    });
+
+    // change font
+    function updateFont() {
+        let selectFont = document.getElementById("selectFont");
+        let fontName = selectFont.options[selectFont.selectedIndex].text;
+        let fontNameUrl = fontName.replace(" ", "+");
+        let inputFontSize = document.getElementById("inputFontSize");
+        let lineHeight = document.getElementById("lineHeight");
+
+        document.getElementById("styleFont").textContent = `
+            @import url('https://fonts.googleapis.com/css2?&display=swap&family=${fontNameUrl}');
+            pre, code, textarea, #lineNumbers, .lineNumbers {
+                font-family: "${fontName}", monospace;
+                font-size: ${inputFontSize.value}pt;
+                line-height: ${lineHeight.value}%;
+            }`;
+    }
+
+    // change font size
+    document.getElementById("inputFontSize").addEventListener("input", () => {
+        updateFont();
+    });
+
+    // change font
+    document.getElementById("selectFont").addEventListener("change", () => {
+        updateFont();
+    });
+
+    // change line height
+    document.getElementById("lineHeight").addEventListener("input", () => {
+        updateFont();
+    });
+
+    bindCodeEditorShortcutKeys(textarea1);
+
+</script>
+</body>
+
+</html>
