코드에서 이미지로
기사에 있는 모든 코드를 이미지로 변환하여 한 번의 클릭으로 다운로드하세요.
Why we love this skill
이 스킬은 코드를 아름답게 강조 표시된 이미지로 변환하고, 터미널 인터페이스를 시뮬레이션하며, 고화질 다운로드를 지원하므로 개발자가 코드 조각을 공유하기에 이상적인 도구입니다.
지시사항
시니어 프론트엔드 개발자로서 콘텐츠에 포함된 모든 코드 조각을 강조 표시된 이미지로 변환해야 합니다. 모든 코드 조각을 추출하는 것이 매우 중요합니다! 마크다운의 백틱(``) 구문으로 엄격하게 묶인 코드는 하나의 코드 조각으로 처리해야 합니다. 특히 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배로 설정하십시오. 이미지 파일 이름은 숫자를 사용하여 순차적으로 지정하십시오.
Related Skills
View all여행 냉장고 자석 포스터
사용자의 사진을 사용하여 세로로 분할된 여행 사진 포스터와 미니멀한 냉장고 자석 스타일 아이콘을 생성합니다. 배경은 단색이며, 선택적으로 텍스트를 겹쳐 표시할 수 있습니다.
변호사의 위챗 모멘트 9분할 생성기
이 도구는 변호사의 위챗 모멘트에 사용할 전문적인 9분할 이미지를 생성해 줍니다. 사례 연구와 조언을 스토리텔링 방식으로 구성하여 잠재 고객에게 긴급성을 부여하고 법률 상담을 유도합니다. 맞춤형 변호사 정보와 아바타를 지원하며, 화이트보드 스타일의 손글씨 디자인을 통해 딱딱한 법률 강의식 설명 대신 공감대를 형성하는 언어로 고객과 소통합니다. 이 스킬은 이미 제가 지속적인 수익을 창출하는 데 도움이 되었습니다. 이와 같은 원리는 개인 변호사, 개업 변호사, 그리고 고객 확보가 필요한 모든 전문가에게 적용될 수 있습니다.
도시 문화 픽셀 무드 생성기
전 세계 모든 도시의 문화 분위기를 픽셀 아트 스타일로 표현한 포스터를 제작하여 도시 문화를 깊이 있게 분석해 보세요. 8비트 자수 패치워크 미학을 활용하여 픽셀 자수 콜라주 기법으로 도시의 진정한 개성을 담아낸 "문화 분위기" 포스터를 만들어 보세요. 도시 이름을 입력하면 그 도시의 감성이 담긴 픽셀 분위기 포스터를 받아보실 수 있습니다.
코드에서 이미지로
기사에 있는 모든 코드를 이미지로 변환하여 한 번의 클릭으로 다운로드하세요.
Why we love this skill
이 스킬은 코드를 아름답게 강조 표시된 이미지로 변환하고, 터미널 인터페이스를 시뮬레이션하며, 고화질 다운로드를 지원하므로 개발자가 코드 조각을 공유하기에 이상적인 도구입니다.
지시사항
시니어 프론트엔드 개발자로서 콘텐츠에 포함된 모든 코드 조각을 강조 표시된 이미지로 변환해야 합니다. 모든 코드 조각을 추출하는 것이 매우 중요합니다! 마크다운의 백틱(``) 구문으로 엄격하게 묶인 코드는 하나의 코드 조각으로 처리해야 합니다. 특히 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배로 설정하십시오. 이미지 파일 이름은 숫자를 사용하여 순차적으로 지정하십시오.
Related Skills
View all여행 냉장고 자석 포스터
사용자의 사진을 사용하여 세로로 분할된 여행 사진 포스터와 미니멀한 냉장고 자석 스타일 아이콘을 생성합니다. 배경은 단색이며, 선택적으로 텍스트를 겹쳐 표시할 수 있습니다.
변호사의 위챗 모멘트 9분할 생성기
이 도구는 변호사의 위챗 모멘트에 사용할 전문적인 9분할 이미지를 생성해 줍니다. 사례 연구와 조언을 스토리텔링 방식으로 구성하여 잠재 고객에게 긴급성을 부여하고 법률 상담을 유도합니다. 맞춤형 변호사 정보와 아바타를 지원하며, 화이트보드 스타일의 손글씨 디자인을 통해 딱딱한 법률 강의식 설명 대신 공감대를 형성하는 언어로 고객과 소통합니다. 이 스킬은 이미 제가 지속적인 수익을 창출하는 데 도움이 되었습니다. 이와 같은 원리는 개인 변호사, 개업 변호사, 그리고 고객 확보가 필요한 모든 전문가에게 적용될 수 있습니다.
도시 문화 픽셀 무드 생성기
전 세계 모든 도시의 문화 분위기를 픽셀 아트 스타일로 표현한 포스터를 제작하여 도시 문화를 깊이 있게 분석해 보세요. 8비트 자수 패치워크 미학을 활용하여 픽셀 자수 콜라주 기법으로 도시의 진정한 개성을 담아낸 "문화 분위기" 포스터를 만들어 보세요. 도시 이름을 입력하면 그 도시의 감성이 담긴 픽셀 분위기 포스터를 받아보실 수 있습니다.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
