라이브 데모

인터랙티브 데모는 실제 @lmd/viewer와 @lmd/editor를 브라우저에서 그대로 돌립니다(파서는 Rust 코어를 WebAssembly로 컴파일한 것 — CLI와 같은 코드입니다). 아무것도 업로드되지 않고 전부 로컬에서 동작합니다.

촘촘히 교차 링크된 샘플 문서가 로드되어, 링크 그래프가 어떻게 동작하는지 체감할 수 있습니다.

리더

가운데 컬럼은 .lmd를 깨끗한 프로즈로 렌더합니다 — <!--lmd:… --> 주석은 보이지 않습니다. 더해지는 것은 탐색입니다:

• 포커스 근처 링크 — 스크롤하면 포커스 라인(세로 중앙)이 지금 읽는 섹션을 따라가고, 오른쪽 컬럼에 보이는 링크가 가리키는 앵커 카드가 리더 라인으로 이어집니다. 카드는 포커스 라인 기준으로 가운데 정렬됩니다.
• 링크 따라가기 — 링크(또는 그 카드)를 클릭하면 대상으로 이동합니다. 대상이 다른 문서면 그 문서가 가운데 컬럼에 열리고, 떠난 문서는 이전 컬럼으로 밀려나며 ← back으로 돌아옵니다.
• hover 연동 — 링크에 hover하면 그 카드와 둘을 잇는 선이 강조되고, 반대도 마찬가지입니다.

Full vs Compact

헤더에 Full / Compact 토글이 있습니다:

• Full — 위의 3컬럼 읽기 경험.
• Compact — 가운데 한 컬럼(최대 1024px). 사이드 컬럼 없이, 링크에 hover하면 대상 카드가 툴팁으로 뜹니다(화면 하단 근처에서는 위로 뒤집히고, 대상이 많으면 스크롤). 집중해서 읽기에 좋습니다.

에디터

✎ Edit을 누르면 에디터가 열립니다. 의도적으로 평범한 원본 마크다운 텍스트 영역입니다 — 그냥 마크다운을 쓰고, 링크만 더합니다.

• 링크 추가 — @를 입력하면 검색·선택 컴포저가 열립니다(대상 앵커 여러 개, 각각 관계 타입 지정). 또는 원본 <!--lmd:ref 를 입력하고 ref 뒤 공백에서 로컬 앵커와 import된 alias:slug 자동완성이 뜹니다.
• 연결 문서 사이드바 — 이 파일이 import하는 문서를 관리합니다. found / moved(한 번에 relink) / missing(keep 또는 delete) 상태로 표시됩니다.

직접 실행

git clone https://github.com/makeisle/linked-markdown
cd linked-markdown
pnpm install && pnpm run wasm && pnpm -r build
pnpm --filter @lmd/playground dev   # http://localhost:5173