08Squiggly error underline
An unclosed bracket or a malformed hex color gets a red squiggly underline, hovering it explains why, and the count stays on the status line.
Best forBox that checks pasted code on the spot
text-decoration-styletext-decoration-skip-inkaria-describedby
<main class="stage">
<div class="lint is-demo" id="lint">
<div class="lint__bar">
<span class="lint__ico" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M215.46 216H40.54c-12.62 0-20.54-13.21-14.41-23.91l87.46-151.87c6.3-11 22.52-11 28.82 0l87.46 151.87c6.13 10.7-1.79 23.91-14.41 23.91" opacity=".2"/><path d="M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/></g></svg></span>
<span class="lint__name">style.scss</span>
</div>
<div class="lint__wrap" id="wrap">
<span class="lint__scan" aria-hidden="true"></span>
<pre class="lint__hl" id="hl" aria-hidden="true"></pre>
<div class="lint__tip" id="tip0" aria-hidden="true"></div>
<div class="lint__tip" id="tip1" aria-hidden="true"></div>
<textarea class="lint__ta" id="ta" wrap="off" spellcheck="false" autocomplete="off" aria-label="Code input" aria-describedby="lintStatus">/* badge colors */
.badge {
color: #ff41;
}
.card {
color: #ff412;
</textarea>
</div>
<p class="lint__status" id="lintStatus" role="status">
<span class="lint__chip" id="chip" data-n="2"><span class="lint__count" id="count">2 errors</span><span class="lint__countd" aria-hidden="true"><b>0 errors</b><b>1 error</b><b>2 errors</b></span></span>
<span class="lint__hint">Hover a squiggle to see why</span>
</p>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
// 오류 물결 밑줄과 툴팁 — 글자를 투명하게 만든 textarea 를 같은 자리·같은 서체의 pre 위에 얹는
// 기법(01 실시간 구문 강조와 같은 뼈대)에 간이 린트를 얹는다. 린트 규칙은 둘: 괄호 짝(스택)과
// 색 코드 자릿수(3·4·6·8 자리의 16진수만 유효 — 4자리 #ff41 은 알파 1바이트를 포함하는 유효한
// 표기고 5자리 #ff412 가 오류다).
// 오류 조각에는 text-decoration-style: wavy 물결을 깔고 text-decoration-skip-ink: none 으로
// 내려꽂이는 글자에서도 물결이 끊기지 않게 한다. wavy 밑줄 계열 지원률 — caniuse text-decoration
// 페이지 실측 2026-09-13: 전역 96.65%(부분지원 표기, wavy·style 값은 주요 브라우저 전부 사용 가능).
// 툴팁은 절대배치다 — 절대배치는 부모 높이에서 빠지지만 scrollHeight 에는 잡혀 320px 에서 BD9 가
// 깨지므로 오류 줄 "위"쪽에 띄워 래핑 상자 안에 두고, 가로는 JS 가 오른쪽 끝으로 묶는다.
// 접근성 경로는 툴팁(마우스·키보드 커서용)이 아니라 상태 줄이다 — textarea 의 aria-describedby 가
// 상태 줄을 가리켜 포커스할 때 오류 수를 읽어 준다.
// 격자 미리보기(.is-demo)는 스캔 줄이 내려가며 지나친 줄의 물결을 steps(1, end) 컷으로 켜고
// 툴팁 두 개가 차례로 뜬다. 정적 규칙을 먼저 쓰고 그 위에 루프를 덧씌웠다(254-06 함정 대비).
$duration: $dur-loop;
$easing: $ease-spring;
$color: $stage-yellow; // 스캔 줄·아이콘·캐럿 — 어두운 패널 위
$err: $error; // 물결 색 — 코드 면 위 굵은 장식선 기준으로 쓴다
$mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
$dim: #beb7ad;
$fs: clamp(11px, 3vw, 13px);
$lh: 20px;
@include stage($stage-orange);
// 에디터 패널은 어두운 면으로 깐다 — 오렌지 무대 위에 크림 작은 글자를 직접 얹으면 3.11:1 로
// AA 에 미달한다(blog-design 글자 대비 표). 글자는 전부 이 패널 위에 있다.
.lint {
--scan-y: #{6 * $lh};
display: flex; flex-direction: column; gap: $sp-2;
box-sizing: border-box; width: min(100%, 400px);
padding: $sp-3; border: 1px solid rgba(255, 255, 255, .16); border-radius: $r-card;
background: $stage-ink; box-shadow: $shadow-raised;
}
// ── 파일 이름 줄
.lint__bar { display: flex; align-items: center; gap: $sp-2; }
.lint__ico { display: grid; place-items: center; color: $color; font-size: 15px; }
.lint__name {
flex: 1 1 auto; color: $subject-cream;
font-family: $mono; font-weight: 700; font-size: 12px; line-height: 1.4;
}
// ── 두 겹이 겹치는 자리. 한 격자 칸에 pre 와 textarea 를 포갠다
.lint__wrap { position: relative; display: grid; height: $lh * 7 + $sp-4; }
.lint__wrap > pre, .lint__wrap > textarea { grid-area: 1 / 1; }
%layer {
box-sizing: border-box; margin: 0; padding: $sp-2;
border: 0; border-radius: $r-sm;
font-family: $mono; font-weight: 500; font-size: $fs; line-height: $lh;
letter-spacing: 0; tab-size: 2;
white-space: pre; overflow: auto; overscroll-behavior: contain;
}
.lint__hl {
@extend %layer;
position: relative; z-index: 1;
background: rgba(0, 0, 0, .28); color: $subject-cream;
pointer-events: none;
}
.lint__ln { display: block; }
.lint__ln--com { color: $dim; }
.lint__err {
// 물결 밑줄 — 글자색은 그대로 두고 장식만 덧입힌다
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: $err;
text-decoration-thickness: 2px;
text-decoration-skip-ink: none;
}
// 글자는 투명하고 커서만 남긴다 — 색과 물결은 아래 pre 가 그린다
.lint__ta {
@extend %layer;
position: relative; z-index: 2;
background: transparent; color: transparent; caret-color: $color;
resize: none;
-webkit-text-fill-color: transparent;
}
.lint__ta::selection { background: rgba(255, 210, 63, .32); }
.lint__ta:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
// 한 글자 폭 재는 실험칸 — 렌더 트리에 있어야 폭이 나오므로 visibility 로 감춘다
.lint__probe { position: absolute; visibility: hidden; white-space: pre; }
// 스캔 줄 — 미리보기에서만 쓴다(정적 경로 opacity 0). 코드 줄 뒤에 깔리게 z-index 를 낮춘다
.lint__scan {
position: absolute; z-index: 0; left: $sp-2; right: $sp-2; top: $sp-2; height: $lh;
border-radius: $r-xs; background: rgba(255, 210, 63, .14);
opacity: 0; pointer-events: none;
}
// 툴팁 — 절대배치. 오류 줄 위쪽에 띄워 래핑 상자 안에 머문다(스크롤 넘침 방지)
.lint__tip {
position: absolute; z-index: 3; max-width: 240px;
box-sizing: border-box; padding: $sp-1 $sp-2;
border: 1px solid $err; border-radius: $r-control;
background: $error-soft; color: $subject-ink;
font-weight: 500; font-size: 11px; line-height: 1.4;
opacity: 0; pointer-events: none;
}
.lint__tip b { display: block; font-weight: 700; }
.lint__tip.is-open { opacity: 1; }
// ── 상태 줄. aria-describedby 가 여기를 가리킨다
.lint__status { display: flex; align-items: center; gap: $sp-2; margin: 0; }
.lint__chip {
position: relative; box-sizing: border-box; padding: $sp-1 $sp-2; border-radius: $r-pill;
background: $err; color: $subject-cream;
font-family: $mono; font-weight: 700; font-size: 11px; line-height: 1.4;
}
.lint__chip[data-n="0"] { background: rgba(255, 247, 230, .12); }
.lint__hint { flex: 1 1 auto; color: $dim; font-weight: 500; font-size: 11px; line-height: 1.4; }
// 미리보기 전용 칩 세 개 — 실제 칩 글자와 같은 자리에 포개고 opacity 컷으로 갈아 낸다.
// 정적 경로에서는 display:none 이라 실제 편집을 가리지 않는다
.lint__countd { position: absolute; inset: 0; display: none; }
.lint__countd b {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
// ── 격자 미리보기 루프(2초). 스캔 줄이 3~62% 에 내려가고, 지나친 오류의 물결이
// 48%·62% 에 컷으로 켜지며, 툴팁이 69%·90% 부터 차례로 뜬다.
// steps(1, end) 는 구간 끝에서만 값을 바꾼다 — 컷 지점을 별도 키프레임으로 둔다.
.lint.is-demo .lint__scan {
animation-name: lintScanFade, lintScanMove;
animation-duration: $duration, $duration;
animation-timing-function: steps(1, end), $ease-out;
animation-iteration-count: infinite, infinite;
}
.lint.is-demo .lint__err {
animation-name: lintErrOn;
animation-duration: $duration;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
.lint.is-demo .lint__err[data-e="0"] { animation-delay: .88s; }
.lint.is-demo .lint__err[data-e="1"] { animation-delay: 1.16s; }
.lint.is-demo .lint__count { visibility: hidden; }
.lint.is-demo .lint__countd { display: block; }
.lint.is-demo .lint__countd b {
animation-duration: $duration;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
.lint.is-demo .lint__countd b:nth-child(1) { animation-name: lintChip0; }
.lint.is-demo .lint__countd b:nth-child(2) { animation-name: lintChip1; }
.lint.is-demo .lint__countd b:nth-child(3) { animation-name: lintChip2; }
.lint.is-demo .lint__tip {
animation-name: lintTipFadeA, lintTipRise;
animation-duration: $duration, $duration;
animation-timing-function: steps(1, end), $easing;
animation-iteration-count: infinite, infinite;
animation-fill-mode: backwards, backwards;
}
.lint.is-demo #tip0 { animation-delay: 1.12s, 1.12s; }
.lint.is-demo #tip1 { animation-name: lintTipFadeB, lintTipRise; animation-delay: 1.5s, 1.5s; }
@keyframes lintScanFade {
0%, 2% { opacity: 0; }
3%, 64% { opacity: 1; }
65%, 100% { opacity: 0; }
}
// 이동 거리는 변수로 둔다 — 좁은 화면에서 줄 높이가 줄면 같이 줄인다
@keyframes lintScanMove {
0%, 3% { transform: translateY(0); }
62%, 100% { transform: translateY(var(--scan-y)); }
}
@keyframes lintErrOn {
0% { text-decoration-color: transparent; }
4%, 100% { text-decoration-color: $err; }
}
@keyframes lintChip0 {
0%, 47% { opacity: 1; }
48%, 100% { opacity: 0; }
}
@keyframes lintChip1 {
0%, 47% { opacity: 0; }
48%, 61% { opacity: 1; }
62%, 100% { opacity: 0; }
}
@keyframes lintChip2 {
0%, 61% { opacity: 0; }
62%, 100% { opacity: 1; }
}
// 툴팁 A(괄호)는 33% 키프레임에서 다시 꺼진다 — 지연 1.12s 를 더하면 벽시계 1.78s,
// 툴팁 B(색 코드)가 1.80s 부터 떠 두 개가 겹치지 않는다
@keyframes lintTipFadeA {
0%, 14% { opacity: 0; }
15%, 32% { opacity: 1; }
33%, 100% { opacity: 0; }
}
@keyframes lintTipFadeB {
0%, 14% { opacity: 0; }
15%, 100% { opacity: 1; }
}
@keyframes lintTipRise {
0%, 15% { transform: translateY(8px); }
28%, 100% { transform: translateY(0); }
}
// ── 좁은 화면: 행간과 여백을 줄여 무대 안에 들어온다 (2·3px 을 4px 로 올리지 않는다).
// 코드의 일곱째 줄은 빈 줄이라 여섯 줄만 보여도 내용이 사라지지 않는다 — 상자를 한 줄 줄여
// 세로 넘침(174px 한도)을 막는다. 스캔 이동거리도 여섯 줄에 맞춘다
@media (max-width: 340px) {
.lint { --scan-y: 80px; gap: $sp-1; padding: $sp-2; }
.lint__wrap { height: 16px * 6 + $sp-2; }
.lint__hl, .lint__ta { font-size: 11px; line-height: 16px; padding: $sp-1; }
.lint__scan { left: $sp-1; right: $sp-1; top: $sp-1; height: 16px; }
.lint__name { font-size: 11px; }
.lint__chip, .lint__hint { font-size: 10px; }
.lint__tip { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
// 애니메이션을 끊면 정적 규칙이 그대로 드러난다 — 물결은 켜져 있고 스캔·툴팁은 꺼져 있다
.lint.is-demo .lint__scan,
.lint.is-demo .lint__err,
.lint.is-demo .lint__tip,
.lint.is-demo .lint__countd b {
animation: none !important;
}
.lint.is-demo .lint__scan,
.lint.is-demo .lint__tip { opacity: 0 !important; }
.lint.is-demo .lint__err { text-decoration-color: $err !important; }
.lint.is-demo .lint__count { visibility: visible !important; }
.lint.is-demo .lint__countd { display: none !important; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ff4d1f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.lint {
--scan-y: 120px;
display: flex;
flex-direction: column;
gap: 8px;
box-sizing: border-box;
width: min(100%, 400px);
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
background: #17141a;
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
.lint__bar {
display: flex;
align-items: center;
gap: 8px;
}
.lint__ico {
display: grid;
place-items: center;
color: #ffd23f;
font-size: 15px;
}
.lint__name {
flex: 1 1 auto;
color: #fff7e6;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
font-weight: 700;
font-size: 12px;
line-height: 1.4;
}
.lint__wrap {
position: relative;
display: grid;
height: 156px;
}
.lint__wrap > pre, .lint__wrap > textarea {
grid-area: 1/1;
}
.lint__ta, .lint__hl {
box-sizing: border-box;
margin: 0;
padding: 8px;
border: 0;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
font-weight: 500;
font-size: clamp(11px, 3vw, 13px);
line-height: 20px;
letter-spacing: 0;
tab-size: 2;
white-space: pre;
overflow: auto;
overscroll-behavior: contain;
}
.lint__hl {
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.28);
color: #fff7e6;
pointer-events: none;
}
.lint__ln {
display: block;
}
.lint__ln--com {
color: #beb7ad;
}
.lint__err {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #c2361a;
text-decoration-thickness: 2px;
text-decoration-skip-ink: none;
}
.lint__ta {
position: relative;
z-index: 2;
background: transparent;
color: transparent;
caret-color: #ffd23f;
resize: none;
-webkit-text-fill-color: transparent;
}
.lint__ta::selection {
background: rgba(255, 210, 63, 0.32);
}
.lint__ta:focus-visible {
outline: 2px solid #ffd23f;
outline-offset: 2px;
}
.lint__probe {
position: absolute;
visibility: hidden;
white-space: pre;
}
.lint__scan {
position: absolute;
z-index: 0;
left: 8px;
right: 8px;
top: 8px;
height: 20px;
border-radius: 4px;
background: rgba(255, 210, 63, 0.14);
opacity: 0;
pointer-events: none;
}
.lint__tip {
position: absolute;
z-index: 3;
max-width: 240px;
box-sizing: border-box;
padding: 4px 8px;
border: 1px solid #c2361a;
border-radius: 12px;
background: #ffe0d8;
color: #17141a;
font-weight: 500;
font-size: 11px;
line-height: 1.4;
opacity: 0;
pointer-events: none;
}
.lint__tip b {
display: block;
font-weight: 700;
}
.lint__tip.is-open {
opacity: 1;
}
.lint__status {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.lint__chip {
position: relative;
box-sizing: border-box;
padding: 4px 8px;
border-radius: 999px;
background: #c2361a;
color: #fff7e6;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
font-weight: 700;
font-size: 11px;
line-height: 1.4;
}
.lint__chip[data-n="0"] {
background: rgba(255, 247, 230, 0.12);
}
.lint__hint {
flex: 1 1 auto;
color: #beb7ad;
font-weight: 500;
font-size: 11px;
line-height: 1.4;
}
.lint__countd {
position: absolute;
inset: 0;
display: none;
}
.lint__countd b {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.lint.is-demo .lint__scan {
animation-name: lintScanFade, lintScanMove;
animation-duration: 2s, 2s;
animation-timing-function: steps(1, end), ease-out;
animation-iteration-count: infinite, infinite;
}
.lint.is-demo .lint__err {
animation-name: lintErrOn;
animation-duration: 2s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
.lint.is-demo .lint__err[data-e="0"] {
animation-delay: 0.88s;
}
.lint.is-demo .lint__err[data-e="1"] {
animation-delay: 1.16s;
}
.lint.is-demo .lint__count {
visibility: hidden;
}
.lint.is-demo .lint__countd {
display: block;
}
.lint.is-demo .lint__countd b {
animation-duration: 2s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
.lint.is-demo .lint__countd b:nth-child(1) {
animation-name: lintChip0;
}
.lint.is-demo .lint__countd b:nth-child(2) {
animation-name: lintChip1;
}
.lint.is-demo .lint__countd b:nth-child(3) {
animation-name: lintChip2;
}
.lint.is-demo .lint__tip {
animation-name: lintTipFadeA, lintTipRise;
animation-duration: 2s, 2s;
animation-timing-function: steps(1, end), cubic-bezier(0.2, 0.8, 0.2, 1);
animation-iteration-count: infinite, infinite;
animation-fill-mode: backwards, backwards;
}
.lint.is-demo #tip0 {
animation-delay: 1.12s, 1.12s;
}
.lint.is-demo #tip1 {
animation-name: lintTipFadeB, lintTipRise;
animation-delay: 1.5s, 1.5s;
}
@keyframes lintScanFade {
0%, 2% {
opacity: 0;
}
3%, 64% {
opacity: 1;
}
65%, 100% {
opacity: 0;
}
}
@keyframes lintScanMove {
0%, 3% {
transform: translateY(0);
}
62%, 100% {
transform: translateY(var(--scan-y));
}
}
@keyframes lintErrOn {
0% {
text-decoration-color: transparent;
}
4%, 100% {
text-decoration-color: #c2361a;
}
}
@keyframes lintChip0 {
0%, 47% {
opacity: 1;
}
48%, 100% {
opacity: 0;
}
}
@keyframes lintChip1 {
0%, 47% {
opacity: 0;
}
48%, 61% {
opacity: 1;
}
62%, 100% {
opacity: 0;
}
}
@keyframes lintChip2 {
0%, 61% {
opacity: 0;
}
62%, 100% {
opacity: 1;
}
}
@keyframes lintTipFadeA {
0%, 14% {
opacity: 0;
}
15%, 32% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}
@keyframes lintTipFadeB {
0%, 14% {
opacity: 0;
}
15%, 100% {
opacity: 1;
}
}
@keyframes lintTipRise {
0%, 15% {
transform: translateY(8px);
}
28%, 100% {
transform: translateY(0);
}
}
@media (max-width: 340px) {
.lint {
--scan-y: 80px;
gap: 4px;
padding: 8px;
}
.lint__wrap {
height: 104px;
}
.lint__hl, .lint__ta {
font-size: 11px;
line-height: 16px;
padding: 4px;
}
.lint__scan {
left: 4px;
right: 4px;
top: 4px;
height: 16px;
}
.lint__name {
font-size: 11px;
}
.lint__chip, .lint__hint {
font-size: 10px;
}
.lint__tip {
font-size: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.lint.is-demo .lint__scan,
.lint.is-demo .lint__err,
.lint.is-demo .lint__tip,
.lint.is-demo .lint__countd b {
animation: none !important;
}
.lint.is-demo .lint__scan,
.lint.is-demo .lint__tip {
opacity: 0 !important;
}
.lint.is-demo .lint__err {
text-decoration-color: #c2361a !important;
}
.lint.is-demo .lint__count {
visibility: visible !important;
}
.lint.is-demo .lint__countd {
display: none !important;
}
}var lintEl = document.getElementById('lint');
var ta = document.getElementById('ta');
var hl = document.getElementById('hl');
var wrap = document.getElementById('wrap');
var chip = document.getElementById('chip');
var count = document.getElementById('count');
var TIP = [document.getElementById('tip0'), document.getElementById('tip1')];
var MSG_BRACKET = ['Unclosed bracket', 'This opening bracket has no closing pair'];
var MSG_HEX = ['Wrong digit count in a color code', 'Only hex digits in 3, 4, 6 or 8 places are valid'];
var COUNT_TPL = '{n} errors';
var HEX_DIGITS = [3, 4, 6, 8]; // 유효한 색 코드 자릿수. 4자리(#ff41 처럼 알파 1바이트)도 유효하고 5·7자리가 아니다
var lineStarts = [], errsCache = [];
// 간이 린트 — 두 규칙만. ① 색 코드: # 뒤가 16진수이고 자릿수가 3·4·6·8 중 하나여야 한다
// (# 뒤에 16진수가 아닌 글자가 붙어도 묶어서 오류로 잡는다). ② 괄호 짝: 스택으로 짝을 짓고
// 끝까지 안 닫힌 여는 괄호를 오류로 남긴다. 결과는 글자 인덱스 오름차순.
function lint(text) {
var errs = [], m;
var hexRe = /#[0-9a-zA-Z]+/g;
while ((m = hexRe.exec(text)) !== null) {
var body = m[0].slice(1);
var ok = /^[0-9a-fA-F]+$/.test(body) && HEX_DIGITS.indexOf(body.length) >= 0;
if (!ok) errs.push({ start: m.index, end: m.index + m[0].length, msg: MSG_HEX });
}
var stack = [];
for (var i = 0; i < text.length; i++) {
var ch = text.charAt(i);
if (ch === '{' || ch === '(' || ch === '[') stack.push(i);
else if (ch === '}' || ch === ')' || ch === ']') {
if (stack.length) stack.pop();
else errs.push({ start: i, end: i + 1, msg: MSG_BRACKET });
}
}
stack.forEach(function (p) { errs.push({ start: p, end: p + 1, msg: MSG_BRACKET }); });
errs.sort(function (a, b) { return a.start - b.start; });
return errs;
}
function esc(t) { return t.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); }
// 투명 textarea 아래 pre 를 다시 그린다. 주석 줄은 흐리게, 오류 범위는 물결 span 으로 감싼다
function render() {
var text = ta.value;
errsCache = lint(text);
var lines = text.split('\n');
lineStarts = [0];
lines.forEach(function (l, i) { if (i) lineStarts.push(lineStarts[i - 1] + lines[i - 1].length + 1); });
hl.innerHTML = lines.map(function (line, ln) {
var lead = lineStarts[ln];
// 주석 줄 판정은 정규식으로 한다 — 소스에 여는 주석 문자열을 리터럴로 남기면 이 파일을 읽는
// 도구(게이트의 주석 제거기)가 거기서 주석이 열린 줄 알고 뒤를 통째로 삼킨다 (실측 2026-09-13)
var com = /^\s*\/\*/.test(line);
var local = [];
errsCache.forEach(function (e, ei) {
if (e.start >= lead && e.end <= lead + line.length) local.push({ s: e.start - lead, t: e.end - lead, ei: ei });
});
var out = '', pos = 0;
local.forEach(function (x) {
out += esc(line.slice(pos, x.s)) + '<span class="lint__err" data-e="' + x.ei + '">' + esc(line.slice(x.s, x.t)) + '</span>';
pos = x.t;
});
out += esc(line.slice(pos));
return '<span class="lint__ln' + (com ? ' lint__ln--com' : '') + '">' + (out || '') + '</span>';
}).join('');
placeTips();
chip.dataset.n = String(errsCache.length);
count.textContent = COUNT_TPL.replace('{n}', String(errsCache.length));
}
// 한 글자 폭과 줄 높이를 pre 안에서 실측한다 — 폰 폭에서 서체 크기가 줄어도 따라간다
function metric() {
var probe = document.createElement('span');
probe.className = 'lint__probe';
probe.textContent = '0000000000';
hl.appendChild(probe);
var cs = getComputedStyle(hl);
var M = { w: probe.getBoundingClientRect().width / 10, lh: parseFloat(cs.lineHeight), x: parseFloat(cs.paddingLeft), y: parseFloat(cs.paddingTop) };
probe.remove();
return M;
}
// 툴팁 두 개를 각 오류 줄 위(래핑 상자 안)에 둔다 — 아래로 삐져나오면 scrollHeight 가 커진다.
// 가로는 오른쪽 끝을 넘지 않게 묶는다.
function placeTips() {
var M = metric();
errsCache.slice(0, TIP.length).forEach(function (e, i) {
var ln = 0;
while (ln + 1 < lineStarts.length && lineStarts[ln + 1] <= e.start) ln++;
var tip = TIP[i];
tip.innerHTML = '<b>' + e.msg[0] + '</b>' + e.msg[1];
tip.style.left = '0px';
var left = M.x + (e.start - lineStarts[ln]) * M.w;
var top = M.y + ln * M.lh - tip.offsetHeight - 4;
var maxL = wrap.clientWidth - tip.offsetWidth - 4;
tip.style.left = Math.max(4, Math.min(left, maxL)) + 'px';
tip.style.top = Math.max(0, top) + 'px';
tip.classList.remove('is-open');
});
}
// 포인터 위치를 글자 인덱스로 바꾼다 — 고정폭 서체라 한 글자 폭으로 열을 잃는다
function charIndex(px, py) {
var M = metric();
var ln = Math.floor((py - M.y) / M.lh);
if (ln < 0 || ln >= lineStarts.length) return -1;
var col = Math.round((px - M.x) / M.w);
var lineLen = ta.value.split('\n')[ln].length;
return lineStarts[ln] + Math.max(0, Math.min(col, lineLen));
}
function openAt(idx) {
var hit = -1;
errsCache.forEach(function (e, i) { if (idx >= e.start && idx <= e.end) hit = i; });
TIP.forEach(function (t, i) { t.classList.toggle('is-open', i === hit); });
}
ta.addEventListener('input', function () { lintEl.classList.remove('is-demo'); render(); });
ta.addEventListener('scroll', function () { hl.scrollTop = ta.scrollTop; hl.scrollLeft = ta.scrollLeft; });
ta.addEventListener('focus', function () { lintEl.classList.remove('is-demo'); });
ta.addEventListener('pointermove', function (ev) {
var r = ta.getBoundingClientRect();
openAt(charIndex(ev.clientX - r.left, ev.clientY - r.top));
});
ta.addEventListener('pointerleave', function () { TIP.forEach(function (t) { t.classList.remove('is-open'); }); });
// 키보드로도 이유를 본다 — 커서가 오류 범위에 있으면 그 툴팁이 열린다
ta.addEventListener('keyup', function () { openAt(ta.selectionStart); });
wrap.addEventListener('pointerdown', function () { lintEl.classList.remove('is-demo'); });
// 창 폭이 바뀌면 줄 높이가 달라진다 — 툴팁 자리를 다시 잡는다
window.addEventListener('resize', placeTips);
render();// LintUnderlineEditor — vanilla 판(run/299/demo/08-editor-lint-error-underline/index.html) 의 React 포트.
// 글자를 투명하게 만든 textarea 를 같은 자리·같은 서체의 pre 위에 얹고, 간이 린트가 잡은 범위만
// 물결 밑줄 span 으로 감싼다. 린트 규칙 둘(괄호 짝·색 코드 자릿수)과 그 순서는 vanilla 와 같은 글자다.
// 접근성 경로는 툴팁이 아니라 상태 줄이다 — textarea 의 aria-describedby 가 상태 줄을 가리킨다.
import { useEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./LintUnderlineEditor.module.scss";
export type LintUnderlineEditorProps = {
duration?: number;
easing?: string;
color?: string;
initialCode?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// useRef<T> 는 T | null 을 돌려준다 — ambient 타입에 맞춰 상자 타입을 따로 둔다
type Box<T> = { current: T | null };
// 이벤트 파라미터는 로컬 타입으로 받는다 — DOM 전역 타입을 "react" 에서 가져오면 tsc 가 죽는다
type PointerEvt = { clientX: number; clientY: number };
const LABEL = "코드 입력칸";
const HINT = "물결 위에 올려 보세요";
const FILE_NAME = "style.scss";
const COUNT_TPL = "{n} 오류";
const MSG_BRACKET = ["닫히지 않은 괄호", "열린 괄호에 닫는 짝이 없습니다"];
const MSG_HEX = ["자릿수가 틀린 색 코드", "16진수와 3·4·6·8 자리만 유효합니다"];
const HEX_DIGITS = [3, 4, 6, 8]; // 유효한 색 코드 자릿수. 4자리(#ff41 처럼 알파 1바이트)도 유효하고 5·7자리가 아니다
const STATUS_ID = "lintStatus";
const TIP_SLOTS = 2;
const CODE = [
"/* badge colors */",
".badge {",
" color: #ff41;",
"}",
".card {",
" color: #ff412;",
"",
].join("\n");
type LintErr = { start: number; end: number; msg: string[] };
type Metric = { w: number; lh: number; x: number; y: number };
// 간이 린트 — 두 규칙만. ① 색 코드: # 뒤가 16진수이고 자릿수가 3·4·6·8 중 하나여야 한다
// (# 뒤에 16진수가 아닌 글자가 붙어도 묶어서 오류로 잡는다). ② 괄호 짝: 스택으로 짝을 짓고
// 끝까지 안 닫힌 여는 괄호를 오류로 남긴다. 결과는 글자 인덱스 오름차순.
function lint(text: string): LintErr[] {
const errs: LintErr[] = [];
const hexRe = /#[0-9a-zA-Z]+/g;
let m = hexRe.exec(text);
while (m !== null) {
const body = m[0].slice(1);
const ok = /^[0-9a-fA-F]+$/.test(body) && HEX_DIGITS.indexOf(body.length) >= 0;
if (!ok) errs.push({ start: m.index, end: m.index + m[0].length, msg: MSG_HEX });
m = hexRe.exec(text);
}
const stack: number[] = [];
for (let i = 0; i < text.length; i++) {
const ch = text.charAt(i);
if (ch === "{" || ch === "(" || ch === "[") stack.push(i);
else if (ch === "}" || ch === ")" || ch === "]") {
if (stack.length) stack.pop();
else errs.push({ start: i, end: i + 1, msg: MSG_BRACKET });
}
}
stack.forEach((p) => errs.push({ start: p, end: p + 1, msg: MSG_BRACKET }));
errs.sort((a, b) => a.start - b.start);
return errs;
}
function lineStartsOf(text: string): number[] {
const lines = text.split("\n");
const starts = [0];
lines.forEach((l, i) => {
if (i) starts.push(starts[i - 1] + lines[i - 1].length + 1);
});
return starts;
}
function escapeHtml(text: string): string {
return text.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
}
// 투명 textarea 아래 pre 를 다시 그린다. 주석 줄은 흐리게, 오류 범위는 물결 span 으로 감싼다
function paint(text: string, errs: LintErr[], starts: number[]): string {
return text
.split("\n")
.map((line, ln) => {
const lead = starts[ln];
const com = line.replace(/^\s+/, "").indexOf("/*") === 0;
const local: { s: number; t: number; ei: number }[] = [];
errs.forEach((e, ei) => {
if (e.start >= lead && e.end <= lead + line.length) local.push({ s: e.start - lead, t: e.end - lead, ei: ei });
});
let out = "";
let pos = 0;
local.forEach((x) => {
out += escapeHtml(line.slice(pos, x.s)) + '<span class="' + styles.err + '" data-e="' + x.ei + '">' +
escapeHtml(line.slice(x.s, x.t)) + "</span>";
pos = x.t;
});
out += escapeHtml(line.slice(pos));
const cls = styles.ln + (com ? " " + styles["ln--com"] : "");
return '<span class="' + cls + '">' + (out || "") + "</span>";
})
.join("");
}
// 한 글자 폭과 줄 높이를 pre 안에서 실측한다 — 폰 폭에서 서체 크기가 줄어도 따라간다
function metric(hl: HTMLPreElement): Metric {
const probe = document.createElement("span");
probe.className = styles.probe;
probe.textContent = "0000000000";
hl.appendChild(probe);
const cs = getComputedStyle(hl);
const m: Metric = {
w: probe.getBoundingClientRect().width / 10,
lh: parseFloat(cs.lineHeight),
x: parseFloat(cs.paddingLeft),
y: parseFloat(cs.paddingTop),
};
probe.remove();
return m;
}
export default function LintUnderlineEditor(props: LintUnderlineEditorProps) {
const duration = props.duration ?? 2000;
const easing = props.easing ?? "cubic-bezier(.2, .8, .2, 1)";
const color = props.color ?? "#ffd23f";
const [code, setCode] = useState<string>(props.initialCode ?? CODE);
const [preview, setPreview] = useState<boolean>(true);
const [openIdx, setOpenIdx] = useState<number>(-1);
const wrapRef = useRef<HTMLDivElement>(null) as Box<HTMLDivElement>;
const hlRef = useRef<HTMLPreElement>(null) as Box<HTMLPreElement>;
const taRef = useRef<HTMLTextAreaElement>(null) as Box<HTMLTextAreaElement>;
const tipARef = useRef<HTMLDivElement>(null) as Box<HTMLDivElement>;
const tipBRef = useRef<HTMLDivElement>(null) as Box<HTMLDivElement>;
const errs = useMemo(() => lint(code), [code]);
const starts = useMemo(() => lineStartsOf(code), [code]);
const html = useMemo(() => paint(code, errs, starts), [code, errs, starts]);
// 툴팁 두 개를 각 오류 줄 위(래핑 상자 안)에 둔다 — 아래로 삐져나오면 scrollHeight 가 커진다.
// 가로는 오른쪽 끝을 넘지 않게 묶는다.
useEffect(() => {
const place = () => {
const hl = hlRef.current;
const wrap = wrapRef.current;
if (!hl || !wrap) return;
const m = metric(hl);
const tips = [tipARef.current, tipBRef.current];
errs.slice(0, TIP_SLOTS).forEach((e, i) => {
const tip = tips[i];
if (!tip) return;
let ln = 0;
while (ln + 1 < starts.length && starts[ln + 1] <= e.start) ln++;
tip.style.left = "0px";
const left = m.x + (e.start - starts[ln]) * m.w;
const top = m.y + ln * m.lh - tip.offsetHeight - 4;
const maxL = wrap.clientWidth - tip.offsetWidth - 4;
tip.style.left = Math.max(4, Math.min(left, maxL)) + "px";
tip.style.top = Math.max(0, top) + "px";
});
};
place();
setOpenIdx(-1);
// 창 폭이 바뀌면 줄 높이가 달라진다 — 툴팁 자리를 다시 잡는다
window.addEventListener("resize", place);
return () => window.removeEventListener("resize", place);
}, [errs, starts]);
// 포인터 위치를 글자 인덱스로 바꾼다 — 고정폭 서체라 한 글자 폭으로 열을 잰다
const charIndex = (px: number, py: number): number => {
const hl = hlRef.current;
if (!hl) return -1;
const m = metric(hl);
const ln = Math.floor((py - m.y) / m.lh);
if (ln < 0 || ln >= starts.length) return -1;
const col = Math.round((px - m.x) / m.w);
const lineLen = code.split("\n")[ln].length;
return starts[ln] + Math.max(0, Math.min(col, lineLen));
};
const openAt = (idx: number) => {
let hit = -1;
errs.forEach((e, i) => {
if (i < TIP_SLOTS && idx >= e.start && idx <= e.end) hit = i;
});
setOpenIdx(hit);
};
const sync = () => {
const ta = taRef.current;
const hl = hlRef.current;
if (ta && hl) {
hl.scrollTop = ta.scrollTop;
hl.scrollLeft = ta.scrollLeft;
}
};
const tipClass = (i: number, extra: string) =>
styles.tip + " " + extra + (openIdx === i ? " " + styles.isOpen : "");
const vars: Vars = { "--duration": duration + "ms", "--easing": easing, "--color": color };
const count = COUNT_TPL.replace("{n}", String(errs.length));
return (
<main className={styles.stage}>
<div className={styles.root + (preview ? " " + styles.isDemo : "")} style={vars}>
<div className={styles.bar}>
<span className={styles.ico} aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
<g fill="currentColor">
<path d="M215.46 216H40.54c-12.62 0-20.54-13.21-14.41-23.91l87.46-151.87c6.3-11 22.52-11 28.82 0l87.46 151.87c6.13 10.7-1.79 23.91-14.41 23.91" opacity=".2" />
<path d="M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12" />
</g>
</svg>
</span>
<span className={styles.name}>{FILE_NAME}</span>
</div>
<div className={styles.wrap} ref={wrapRef} onPointerDown={() => setPreview(false)}>
<span className={styles.scan} aria-hidden="true" />
<pre className={styles.hl} ref={hlRef} aria-hidden="true" dangerouslySetInnerHTML={{ __html: html }} />
<div className={tipClass(0, styles.tipA)} ref={tipARef} aria-hidden="true">
{errs.length > 0 ? <b>{errs[0].msg[0]}</b> : null}
{errs.length > 0 ? errs[0].msg[1] : null}
</div>
<div className={tipClass(1, styles.tipB)} ref={tipBRef} aria-hidden="true">
{errs.length > 1 ? <b>{errs[1].msg[0]}</b> : null}
{errs.length > 1 ? errs[1].msg[1] : null}
</div>
<textarea
className={styles.ta}
ref={taRef}
value={code}
wrap="off"
spellCheck={false}
autoComplete="off"
aria-label={LABEL}
aria-describedby={STATUS_ID}
onChange={(e: { target: { value: string } }) => {
setPreview(false);
setCode(e.target.value);
}}
onScroll={sync}
onFocus={() => setPreview(false)}
onPointerMove={(ev: PointerEvt) => {
const ta = taRef.current;
if (!ta) return;
const r = ta.getBoundingClientRect();
openAt(charIndex(ev.clientX - r.left, ev.clientY - r.top));
}}
onPointerLeave={() => setOpenIdx(-1)}
// 키보드로도 이유를 본다 — 커서가 오류 범위에 있으면 그 툴팁이 열린다
onKeyUp={() => {
const ta = taRef.current;
if (ta) openAt(ta.selectionStart);
}}
/>
</div>
<p className={styles.status} id={STATUS_ID} role="status">
<span className={styles.chip} data-n={String(errs.length)}>
{/* 미리보기 중에는 이 글자를 CSS 가 감추고 아래 세 장을 컷으로 갈아 낸다 — 상태 글자는 건드리지 않는다 */}
<span className={styles.count}>{count}</span>
<span className={styles.countd} aria-hidden="true">
<b>0 오류</b>
<b>1 오류</b>
<b>2 오류</b>
</span>
</span>
<span className={styles.hint}>{HINT}</span>
</p>
</div>
</main>
);
}08 Squiggly error underline — Measured area 32.71% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · Code Editor JavaScript: 9 UI Parts, No Library
The post this demo lives in
Code Editor JavaScript: 9 UI Parts, No LibraryCode editor javascript is the plain way to get coloring, line numbers, and closing brackets into a page: nine parts, no See all demos in this post
