added files
This commit is contained in:
commit
6bb6594cc4
50
htmledit.html
Normal file
50
htmledit.html
Normal file
@ -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>
|
52
index.html
Normal file
52
index.html
Normal file
@ -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>
|
Loading…
Reference in New Issue
Block a user