소스 코드
Elementor 사이트에서 코드 조각을 올바른 방법으로 공유하세요 – 아름답게 포맷되어 있고 방문자가 사용하기 쉽습니다. 이 소스 코드 요소를 사용하면 HTML,CSS, JavaScript,PHP 또는 깔끔한 구문 강조 기능이 있는 80+ 프로그래밍 언어 중 하나를 표시할 수 있습니다. 언어를 선택하고 스타일에 맞는 색상 테마를 선택한 후 코드를 붙여넣기만 하면 됩니다. 심지어 편리한 “복사” 버튼도 추가하므로 사용자는 클릭 한 번으로 즉시 코드를 잡을 수 있습니다. 이는 튜토리얼,문서, 개발자 포트폴리오 또는 코드를 깨끗하고 전문적으로 선보여야 하는 모든 사이트에 완벽한 도구입니다.
광범위한 언어 및 테마 지원
80 개 이상의 다양한 프로그래밍 및 마크업 언어로 코드를 표시하며 각각 정확한 구문 강조가 가능합니다. 8+ 시각적 테마 중에서 선택하여 사이트의 어둡거나 밝은 미적 감각에 맞춰 코드를 읽을 수 있고 시각적으로 매력적으로 만듭니다.
- HTML, CSS, JS, PHP와 같은 여러 언어를 다루는 튜토리얼 블로그에 적합합니다.
- 현대적이고 개발자 친화적인 룩을 위해 어두운 테마를 사용하세요.
- 코드를 한눈에 읽고 이해하기 쉽게 하여 학습 경험을 향상시키세요.
원클릭 복사 기능
방문자가 코드를 클립보드에 즉시 복사할 수 있는 사용자 친화적인 버튼을 포함합니다. 버튼의 텍스트,위치 및 복사 후 나타나는 확인 메시지를 사용자 지정하여 수동으로 선택하고 복사할 필요가 없습니다.
- 스니펫을 재사용하려는 개발자의 사용자 경험을 크게 향상시킵니다.
- 귀중한 코드를 쉽게 가져와 사용할 수 있도록 하여 참여도를 높이세요.
- 사용자에게 명확한 피드백을 제공하기 위해 “복사됨!”을 표시합니다.
전체 시각적 사용자 정의
코드 블록의 모든 부분을 스타일링하여 디자인과 완벽하게 조화를 이루세요. 컨테이너의 패딩,여백, 테두리를 조정하고 복사 버튼의 색상,타이포그래피, 코너 라운딩을 독립적으로 디자인하세요.
- 코드 블록의 배경과 테두리를 사이트의 색 구성표와 일치시킵니다.
- 클릭을 유도하는 눈에 띄는 복사 버튼을 디자인하세요.
- 페이지에서 깔끔하고 통합된 모습을 보려면 코드 주위의 간격을 제어하세요.
소스 코드에 대해 자주 묻는 질문
구문 강조를 위해 프로그래밍 언어를 어떻게 변경합니까?
콘텐츠 설정에서 “코드” 드롭다운 메뉴를 사용하여 스니펫에 맞는 올바른 언어 (예를 들어 HTML,CSS, PHP) 를 선택합니다. 이렇게 하면 키워드와 구문이 정확하게 색칠됩니다.
코드 옆에 있는 줄 번호를 숨길 수 있나요?
예. “줄 번호 사용” 옵션을 “아니오”로 설정하여 줄 번호를 비활성화 할 수 있습니다. 이것은 예제에 줄 번호가 필요하지 않은 경우 더 깨끗한 코드 블록을 제공합니다.
복사 버튼을 어디에 놓을 수 있나요?
코드 블록의 “오른쪽 상단 모서리”와 같은 버튼의 위치를 선택할 수 있습니다. 또한 가시성을 제어하여 항상 표시하거나 호버에만 표시하도록 설정할 수도 있습니다.
표시된 코드는 웹사이트 방문자가 편집할 수 있나요?
아니요. 코드는 보기 및 복사를 위해 정적이고 스타일이 지정된 블록으로 표시됩니다. 방문자는 페이지에서 소스 코드를 직접 편집할 수 없습니다; 표시 목적으로만 사용됩니다.
미리 설정된 테마 대신 나만의 색 구성표를 사용할 수 있나요?
이 요소는 미리 디자인된 여러 테마 (“내일” 과 같은) 를 제공합니다. 완전히 사용자 정의 색상을 사용하려면 스타일링 옵션이 주로 내부 구문 색상이 아닌 컨테이너와 버튼을 제어하므로 사용자 정의 CSS 를 추가해야 할 것입니다.
복사 버튼은 모바일 장치에서 작동합니까?
예,복사 기능은 모든 장치에서 작동하도록 설계되었습니다. 버튼은 터치 친화적이며,복사 명령은 전화기나 태블릿에서 탭하면 실행됩니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
