Expressive Code 테스트

7/8/2026

다양한 코드블럭 활용

기본 복사 기능 추가

여러 하이라이트

  • title속성으로 코드블럭에 파일명 등 추가
  • {2}로 구간 하이라이트
  • ins와 del로 diff처럼 하이라이트
  • "return null"로 문구 하이라이트
utils.js
function getUser(id) {
  const cache = new Map()  // {2} 로 하이라이트


  if (cache.has(id)) {
    const cached = cache.get(id)  // ins={5-6} 삽입 표시
    return cached
  }


  return null  // del={8} 삭제 표시 + "return null" 인라인 마킹
}

터미널 모양

bash등 터미널 명령어들은 터미널 모양으로 변경됨

터미널
npm install astro-expressive-code
npm run dev

간단한 + -

- const name = 'old'
+ const name = 'new'
  console.log(name)

하이라이트 문구 (mdx 한글지원 x)

{"핵심 ->":5-7}로 강조 가능

function App() {
  return (
    <div>
      <Header />
      <main>
        <Content />
      </main>
    </div>
  )
}