함께 스크롤하고 줄을 유지할 수 있도록 합니다.
CSS
편집기에 사용한 CSS 전체입니다.
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;
}
요소 겹치기
여기서 핵심 부분 중 하나는 디스플레이 그리드를 사용하여 텍스트 영역과 미리보기를 오버레이하는 것입니다
#editor {
...
display: grid;
grid-template: 1fr / 1fr;
place-items: top;
overflow: auto;
...
}
컨테이너 내부의 두 요소를 겹치기 위해 fr 단위를 사용하고 있습니다. 여기 CSSTricks에서 fr에 대한 자세한 내용을 읽을 수 있습니다.
텍스트 영역과 미리보기를 동일하게 지정
미리보기와 텍스트 영역에 동일한 규칙을 적용한다는 것을 알 수 있습니다. 이렇게 하면 정확하게 겹쳐집니다.
#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;
}
텍스트 영역을 투명하게 만들기
텍스트 색상에 rgba를 사용하면 텍스트가 완전히 투명해지기 때문에 미리보기를 선택하고 편집하는 것처럼 보입니다.
#editor .code {
color: rgba(255, 255, 255, 0);
caret-color: magenta;
}
약간의 자바스크립트
이 모든 것을 하나로 묶으려면 소량의 Javascript가 필요합니다. 무엇이 필요한지 살펴보겠습니다.
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();
이를 위해 Prism을 사용할 예정이지만 원하는 것을 사용해도 됩니다.
Mirror() 함수는 여기서 몇 가지 작업을 수행합니다.
<div id="editor">
<div class="preview"></div>
<textarea class="code" spellcheck="false"></textarea>
</div>
이렇게 하면 입력할 때
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;
}
그런 다음 Prism을 사용하여