코드블럭 복사 기능 추가

[youngminss]

작업 내용

• 코드블럭 복사 기능 추가

메모

• 코드블록 구현을 위해 rehype-pretty-code plugin 을 사용 중이었고, experimental 기능이긴하나 copy button 옵션이 있어서 사용해보려 했으나, rsc 에서 적용 시 error 이슈가 있으므로 기각
• 복사 버튼이 붙은 커스텀 pre component 를 pre element 대신 사용하도록 수정 (cc. Error: Expected onClick listener to be a function, instead got a value of string type. rehype-pretty/rehype-pretty-code#235 (comment))
• 위 cc 를 참고해서 기능 구현은 되었으나, 스타일 측면으로 line 이 길어져서 스크롤이 되는 형태일 때 copy 버튼이 항상 우상단에 위치해야하는 요구사항을 만족시키지 못함, 최종적으로 pre element 와 copy button 을 감싸하는 div 컨테이너를 wrapping 함
  • copy button 은 div 기준으로 우상단을 계산하므로 항상 우상단에 위치하고
  • 스크롤이 될 수 있는 pre 코드블록은 코드블록대로 개별적으로 스크롤링 되도록

체크리스트

• chrome
• firefox
• safari

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
youngminss-log	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 20, 2024 9:16am