50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>HTML Editor</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.2/css/halfmoon.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/ace.min.js"></script>
|
||
|
|
<script>
|
||
|
|
// Set theme to the user's preferred color scheme
|
||
|
|
function updateTheme() {
|
||
|
|
const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
|
||
|
|
"dark" :
|
||
|
|
"light";
|
||
|
|
document.querySelector("html").setAttribute("data-bs-theme", colorMode);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set theme on load
|
||
|
|
updateTheme()
|
||
|
|
|
||
|
|
// Update theme when the preferred scheme changes
|
||
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body style="height: 100vh;">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<h1>HTML</h1>
|
||
|
|
<div class="row" id="therow" style="height: 100vh;">
|
||
|
|
<div class="col-sm-12">
|
||
|
|
<div id="editor" style="height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div id="output" style="height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
||
|
|
var editor = ace.edit("editor", {mode: "ace/mode/html"});
|
||
|
|
editor.setTheme("ace/theme/github_dark");
|
||
|
|
document.getElementById('editor').style.fontSize='15px';
|
||
|
|
const outputto = document.getElementById("output");
|
||
|
|
window.addEventListener("keyup", function () {
|
||
|
|
outputto.innerHTML = editor.getValue();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|