100초 안에 Code Hike

Source: Dev.to

개요

Code Hike는 문서를 인터랙티브하고 영화 같은 경험으로 변환하는 툴킷입니다. 평범한 README 파일에 움직임, 포커스, 인터랙티비티를 추가합니다.

기원

2021년 Rodrigo Pombo가 만든 Code Hike는 정적인 Markdown과 동적인 스토리텔링 사이의 격차를 메우기 위해 설계되었습니다.

해결하는 문제

복잡한 코드 설명이 큰 텍스트 블록으로 제시될 때 발생하는 “벽‑같은 텍스트” 피로도를 해소합니다. 코드를 일급 객체로 다루어 Code Hike는 추상 구문 트리(AST)를 파싱해 포커스, 움직임, 인터랙티비티를 추가함으로써 스크롤텔링 경험을 가능하게 합니다.

시작하기

1. Next.js나 Remix와 같은 React 기반 프레임워크에 패키지를 설치합니다.

   npm install @code-hike/react

2. 플러그인으로 설정합니다.

3. MDX 파일 안에서 사용합니다. 일반 마크다운 코드 펜스를 작성하고 매직 주석으로 확장합니다.

예시

// Example JavaScript function
function greet(name) {
  // ! focus 2-3
  console.log(`Hello, ${name}!`);
  // ! callout console.log
}

렌더링될 때 Code Hike는 지정된 라인을 강조하고 나머지는 흐리게 처리합니다. // ! callout 주석은 변수에 툴팁을 붙입니다.

기능

• 마크다운을 커스터마이징 가능한 React 컴포넌트로 컴파일합니다.
• 디자인 시스템에 맞는 커스텀 스타일링을 지원합니다.
• 라인 번호, 복사 버튼, 탭 전환, 터미널 시뮬레이션을 제공합니다.
• 파일 버전 간 변화를 애니메이션으로 보여주는 diff 기능을 포함합니다.

빌드 및 배포

프로젝트에 Code Hike를 추가한 후 사이트를 컴파일합니다:

npm run build

그 결과물은 인터랙티브한 문서를 포함하며, 참여 지표를 향상시킬 수 있습니다.