Ne0tux
/
EZBC_Basic_Casio_Facile
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

simple real-time HTML previewer

This commit is contained in:
Lephenixnoir 2020-03-22 20:32:03 +01:00
parent 037d8eda85
commit 182921d9e4
Signed by untrusted user: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
3 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
html-preview.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel=stylesheet href=tutorial.css>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
}
#html-preview-left {
width: 50%;
margin: 8px;
}
#html-preview-right {
width: 50%;
margin: 8px 8px 8px 0;
padding: 8px;
background: white;
background: #f4f6f2;
overflow: auto;
}
</style>
</head>
<body>
<textarea id=html-preview-left><h1>HTML Preview</h1>
<p>&amp;#x2190; Any HTML from this box on the left is previewed here.</p>
<p>This includes all the <b>bold statements</b> that you might want to make, as
well as some <i>nuance</i> and also images.</p>
<figure>
<center>
<img src="images/CPC26-banner.png">
<figcaption>Just a random image, really.</figcaption>
</center>
</figure>
<p>If this file is at the root of the tutorial repository, then the
<code>tutorial.css</code> file is automatically included, for fancy boxes and
custom styling; and you can use images like</p>
<center>
<code>&amp;lt;img src="images/chapter1/stuff.png"&amp;gt;</code>.
</center>
<div class=correct>Bonne réponse !</div>
<p>Have fun with this tool! &amp;#x1f604;</p></textarea>
<div id=html-preview-right>
<i>Write some HTML in the text area to preview it here!</i>
</div>
</body>
<script>
const textarea = document.getElementById("html-preview-left");
const preview = document.getElementById("html-preview-right");
textarea.addEventListener("input", update_preview);
function update_preview(e) {
preview.innerHTML = e.target.value;
/* Scroll to bottom of preview div */
preview.scrollTop = preview.scrollHeight;
}
/* Initialization */
preview.innerHTML = textarea.value;
</script>
</html>

BIN
images/CPC26-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

5
tutorial.css Normal file
View File

@ -0,0 +1,5 @@
div.correct {
background: #a9dfa2;
padding: 8px;
margin-top: 8px;
}