damit sie zusammen scrollen und in einer Reihe bleiben können.
Das CSS
Hier ist das gesamte CSS, das ich für den Editor verwendet habe.
html,
body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#editor {
height: 100%;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template: 1fr / 1fr;
place-items: top;
overflow: auto;
padding: 2rem;
background-color: #1a1723;
}
#editor .code,
#editor .preview {
all: unset;
}
#editor .code,
#editor .preview {
height: auto;
grid-column: 1 / 1;
grid-row: 1 / 1;
font-family: Monaco, monospace;
font-size: 16px;
resize: none;
line-height: 24px;
white-space: pre-wrap;
overflow: hidden;
}
#editor .preview {
pointer-events: none;
color: #ccc;
}
#editor .code {
color: rgba(255, 255, 255, 0);
caret-color: magenta;
}
Nach dem Login kopieren
Nach dem Login kopieren
Überlappung der Elemente
Einer der Schlüsselelemente hier ist die Verwendung des Anzeigerasters zum Überlagern des Textbereichs und der Vorschau
#editor {
...
display: grid;
grid-template: 1fr / 1fr;
place-items: top;
overflow: auto;
...
}
Nach dem Login kopieren
Nach dem Login kopieren
Ich verwende die FR-Einheit, um die beiden Elemente im Container zu überlappen. Mehr über fr können Sie hier bei CSSTricks lesen.
Textbereich und Vorschau identisch gestalten
Vielleicht fällt Ihnen auf, dass ich für die Vorschau und den Textbereich dieselben Regeln anwende. Dadurch ist eine exakte Überlappung gewährleistet.
#editor .code,
#editor .preview {
height: auto;
grid-column: 1 / 1;
grid-row: 1 / 1;
font-family: Monaco, monospace;
font-size: 16px;
resize: none;
line-height: 24px;
white-space: pre-wrap;
overflow: hidden;
}
Nach dem Login kopieren
Machen Sie den Textbereich transparent
Durch die Verwendung von RGBA für die Textfarbe kann ich den Text völlig transparent machen, sodass es aussieht, als würden Sie die Vorschau auswählen und bearbeiten.
#editor .code {
color: rgba(255, 255, 255, 0);
caret-color: magenta;
}
Nach dem Login kopieren
Ein kleines bisschen Javascript
Wir benötigen eine kleine Menge Javascript, um alles zusammenzufassen. Schauen wir uns an, was wir brauchen.
const $preview = document.querySelector("#editor .preview");
const $code = document.querySelector("#editor .code");
function mirror() {
// make textarea grow to height of content so we can scroll together
$code.style.height = $code.scrollHeight;
// update the preview underlay with the syntax highlight
$preview.innerHTML = Prism.highlight(
$code.value,
Prism.languages.javascript,
"javascript",
);
}
// insert two spaces on tab
$code.addEventListener("keydown", (ev) => {
if (ev.code === "Tab") {
ev.preventDefault();
$code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end");
mirror();
}
});
$code.addEventListener("input", mirror);
mirror();
Nach dem Login kopieren
Wir werden hierfür Prism verwenden, Sie können aber auch alles verwenden, was Ihnen gefällt.
Die Funktion „mirror()“ führt hier mehrere Dinge aus.
<div id="editor">
<div class="preview"></div>
<textarea class="code" spellcheck="false"></textarea>
</div>
Nach dem Login kopieren
Nach dem Login kopieren
Dadurch wird sichergestellt, dass während der Eingabe die Höhe des
html,
body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
#editor {
height: 100%;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template: 1fr / 1fr;
place-items: top;
overflow: auto;
padding: 2rem;
background-color: #1a1723;
}
#editor .code,
#editor .preview {
all: unset;
}
#editor .code,
#editor .preview {
height: auto;
grid-column: 1 / 1;
grid-row: 1 / 1;
font-family: Monaco, monospace;
font-size: 16px;
resize: none;
line-height: 24px;
white-space: pre-wrap;
overflow: hidden;
}
#editor .preview {
pointer-events: none;
color: #ccc;
}
#editor .code {
color: rgba(255, 255, 255, 0);
caret-color: magenta;
}
Nach dem Login kopieren
Nach dem Login kopieren
Dann verwenden wir Prism, um den Code aus der