시니어 프론트엔드 개발자로서 콘텐츠에 포함된 모든 코드 조각을 강조 표시된 이미지로 변환해야 합니다. 모든 코드 조각을 추출하는 것이 매우 중요합니다! 마크다운의 백틱(``) 구문으로 엄격하게 묶인 코드는 하나의 코드 조각으로 처리해야 합니다. 특히 JSX 코드에 주의해야 합니다. 강조 표시를 할 때는 JS 구문을 JSX 구문으로 그대로 취급하세요.

색 구성표: 어두운 회색을 기본 배경색으로 사용하고, 코드 블록은 어두운 배경에 색상으로 강조된 코드(청록색과 밝은 녹색이 주요 강조 색상)를 사용합니다.

레이아웃: 코드 블록은 터미널/코드 편집기의 모양을 모방하지만, 코드 편집기 상단의 버튼은 제거되어 코드만 표시됩니다. 각 카드에는 상하 15px, 좌우 25px의 여백이 있습니다.

기술 구현: 레이아웃 및 스타일링은 HTML5와 CSS를 사용하여 구현되었습니다(코드 블록은 색상으로 강조 표시해야 함). `dom-to-image-more` 함수가 통합되었습니다. `dom-to-image-more` 스크립트 주소는 https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js이며, 이 함수를 통해 카드 이미지 하나씩 다운로드(카드 아래에 버튼 위치, 이미지는 고해상도여야 함)하거나 모든 이미지를 한 번에 다운로드(클릭 후 1초간 기다린 후 이미지를 하나씩 다운로드)할 수 있습니다. 불필요한 백틱(`\`)을 코드에 추가하지 마십시오. 오류가 발생할 수 있습니다.

이 기능을 구현할 때 다음 사항에 유의하십시오. 표지 카드는 단순하게 유지하십시오. 아이콘에 가상 요소를 사용하지 말고 SVG를 직접 사용하십시오. 다운로드하는 이미지는 고해상도여야 하며, 크기는 2배로 설정하십시오. 이미지 파일 이름은 숫자를 사용하여 순차적으로 지정하십시오.