From 6bb6594cc488e13f5cfbcb0e7d7983312fc38ba1 Mon Sep 17 00:00:00 2001
From: SSP6904 <shoffer@ttnrtsite.me>
Date: Tue, 24 Sep 2024 21:58:44 -0400
Subject: [PATCH] added files

---
 htmledit.html | 50 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 htmledit.html
 create mode 100644 index.html
diff --git a/htmledit.html b/htmledit.html
new file mode 100644
index 0000000..50b6b77
--- /dev/null
+++ b/htmledit.html
@@ -0,0 +1,50 @@
+<!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>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c65f524
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Markdown 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>Markdown</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/markdown"});
+    editor.setTheme("ace/theme/github_dark");
+    document.getElementById('editor').style.fontSize='15px';
+    const outputto = document.getElementById("output");
+    window.addEventListener("keyup", function () {
+        var markeddd = marked.parse(editor.getValue());
+        outputto.innerHTML = markeddd;
+    });
+});
+</script>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
