코드를 일반 텍스트 위젯에 붙여넣으면 포맷이 제거되어 읽을 수 없는 블록이 남습니다. The 소스 코드 위젯, Pro 위젯이 들어있습니다 Elementor용 마스터 애드온, 수정 사항: 적절한 구문 강조, 줄 번호, 언어 테마 및 복사 버튼이 포함된 코드를 표시하므로 독자는 한 번의 클릭으로 조각을 잡을 수 있습니다.
튜토리얼,문서, 개발자 블로그,PHP, JavaScript,CSS, HTML 또는 다른 언어를 깔끔하게 보여줘야 하는 모든 곳에 대해 제작되었습니다. 코드를 붙여넣고,언어와 테마를 선택하고,복사 버튼을 설정하면 Elementor 패널에서 모든 설정을 통해 실행됩니다.
소스 코드 위젯이 수행하는 작업 #
위젯은 코드 블록을 가져와서 선택한 언어에 따라 색상으로 구분된 구문 강조 표시로 렌더링합니다. 줄 번호를 매기고 여러 편집기 테마 중 하나를 적용하며 코드가 복사되었을 때를 확인하는 클립보드 복사 버튼을 추가할 수 있습니다.
여기에는 세 개의 탭이 있습니다: 코드, 언어 및 복사 버튼의 콘텐츠, 컨테이너 및 버튼 모양의 스타일, 일반적인 Elementor 옵션의 고급.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- 마스터 애드온 프로 소스 코드가 Pro 위젯이므로 활성 라이센스와 함께 설치됩니다. 플러그인에 새로 추가되었습니까? 참조 설치 가이드.
- 표시하려는 코드 조각입니다.
소스 코드 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 소스 코드또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하십시오. 샘플 스니펫으로 로드되므로 바로 강조 표시를 볼 수 있습니다.
코드를 추가하고 언어를 선택하세요 #
열다 콘텐츠 탭. 그만큼 소스 코드 section 은 모든 것을 보유합니다. snippet 을 the 에 붙여넣습니다 소스 코드 상자, 다음 그 위에 언어와 테마를 설정합니다.
- 코드: 강조할 언어,PHP, 자바스크립트,CSS, HTML 과 같은 75 개 중 하나. 이것은 색이 어떻게 적용되는지를 설정합니다.
- 테마: 블록의 색 구성표(아래에서 설명).
- 소스 코드: 빠른 예제가 필요한 경우 AI로 쓰기 옵션이 포함된 스니펫 자체입니다.
테마 선택 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 테마 드롭다운은 코드 블록의 색 구성표를 설정합니다. 여기에는 기본값,어두움, 펑키,오카이디아, 황혼,코이, 솔라라이즈드 라이트,내일, 사용자 지정 옵션이 포함되어 있으므로 블록을 밝거나 어두운 페이지에 일치시킬 수 있습니다.
언어와 테마를 함께 전환하면 각 스니펫에 올바른 모양이 제공됩니다. 여기에 Dark 테마에 대한 JavaScript 스니펫이 있습니다.
복사 버튼을 설정합니다 #
복사 버튼은 위젯을 튜토리얼에 유용하게 만드는 요소입니다. 코드 상자 아래에는 해당 컨트롤이 있습니다.
- 복사 버튼 활성화: 클립보드 복사 버튼을 표시하거나 숨깁니다.
- 줄 번호 활성화: 왼쪽의 줄 번호를 켜거나 끕니다.
- 버튼 가시성: 항상 또는 호버에만 버튼을 표시합니다.
- 버튼 위치: 구석에 놓습니다, 오른쪽 위처럼요.
- 복사 버튼 텍스트 및 복사된 후 버튼 텍스트: 코드 복사 및 복사됨과 같은 복사 전후의 레이블입니다.
방문자가 버튼을 클릭하면 레이블이 복사 후 텍스트로 전환되어 복사본이 작동했는지 확인합니다.
코드 블록을 스타일링합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭이 분할됩니다 컨테이너 그리고 버튼, 게다가 패턴 무료일 때 패턴 확장이 켜져 있습니다. The 컨테이너 section 은 코드 블록의 프레임을 제어합니다.
- 높이: 블록 높이를 캡핑하고 긴 코드를 스크롤합니다.
- 패딩 및 여백: 블록 내부와 주변의 간격.
- 테두리 유형 및 테두리 반경: 윤곽선과 둥근 모서리.
- 사용자 정의 테마만: 배경, 타이포그래피, 텍스트 색상, 줄 번호 색상. 사용자 지정은 키워드 강조 표시 없이 코드를 한 가지 색상으로 표시합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 버튼 섹션은 복사 버튼을 스타일: 자사의 타이포그래피, 텍스트 색상, 배경 색상, 패딩, 테두리, 반경. 별도의 호버 색상이 없습니다.
페이지의 결과 #
게시 또는 미리보기 및 코드 렌더링이 강조 표시되고 줄 번호와 작업 복사 버튼이 표시됩니다. 아래는 복사된 상태를 표시하는 버튼이 있는 Dark 테마의 CSS 스니펫입니다.
일반적인 사용 사례 #
- 튜토리얼 및 방법 게시물 공유 코드 리더는 복사할 수 있습니다.
- 플러그인 및 테마 문서 구성 또는 후크 예제 포함.
- 개발자 블로그 PHP, JavaScript 또는 CSS로 스니펫을 표시합니다.
- 지식 기반 복사-붙여넣기 명령으로.
- 랜딩 페이지 API 호출 또는 임베드 코드를 시연합니다.
소스 코드 위젯 작업 팁 #
- 언어를 코드에 일치시킵니다. 올바른 코드 설정이 강조 표시를 정확하게 만드는 것입니다.
- 페이지에 맞는 테마를 선택하세요. 어두운 섹션에는 어두운 테마를 사용하고 흰색 페이지에는 밝은 테마를 사용합니다.
- 복사 버튼을 계속 보이게 유지. 독자가 발견할 수 있도록 튜토리얼의 버튼 표시 기능을 항상으로 설정하세요.
- 긴 조각의 높이를 캡핑합니다. 스크롤이 있는 고정된 높이는 긴 블록이 페이지를 차지하는 것을 방지합니다.
- 명확한 버튼 라벨을 작성합니다. 코드 복사 및 복사된 내용은 독자에게 정확히 무슨 일이 일어났는지 알려줍니다.
자주 묻는 질문 #
마스터 애드온의 소스 코드 위젯은 무엇입니까?
구문 강조,줄 번호,언어 테마 및 클립보드에 복사 버튼이 있는 코드를 표시하는 Elementor 용 Master Addons Pro 위젯입니다. 플러그인이나 단축 코드가 필요 없이 Elementor 패널에서 모두 스니펫을 붙여넣고 언어와 테마를 선택한 후 복사 버튼을 설정합니다.
어떤 프로그래밍 언어를 강조합니까?
코드 드롭다운에서 PHP,JavaScript, CSS,HTML, Python,SQL, YAML 등 75 개 언어 중 하나를 선택합니다. 선택 항목은 구문 색상이 적용되는 방식을 설정하므로 스니펫은 코드 편집기에서와 같은 방식으로 읽습니다.
독자가 한 번의 클릭으로 코드를 복사할 수 있습니까?
예. 복사 버튼 사용 을 켜면 블록에 복사-클립보드 버튼이 나타납니다. 표시될 때 위치를 설정하고 클릭이 작동했음을 확인하는 코드 복사 및 복사됨과 같은 복사 전후의 텍스트를 설정합니다.
코드 블록에 줄 번호를 표시할 수 있나요?
예. 콘텐츠 탭의 줄 번호 활성화 토글은 블록의 왼쪽 아래에 숫자를 추가합니다. 튜토리얼에서 특정 줄을 쉽게 참조할 수 있으며,더 깔끔한 모양을 위해 꺼둘 수 있습니다.
코드의 색상 테마를 변경할 수 있나요?
예. 테마 드롭다운은 Default,Dark, Funky,Okaidia, Twilight,Coy, Solarized light,Tomorrow, Custom 을 제공합니다. 밝은 페이지나 어두운 페이지에 맞게 하나를 선택하거나 Custom 을 사용하여 스타일 탭에서 자신만의 배경색과 텍스트 색상을 설정합니다. Custom 은 키워드 강조 표시 없이 코드를 한 가지 색상으로 표시합니다.
감싸는 #
소스 코드 위젯은 원시 스니펫을 독자가 한 번의 클릭으로 복사할 수 있는 깨끗하고 강조 표시된 블록으로 바꿉니다. 코드를 붙여넣고,언어와 테마를 설정하고,줄 번호와 복사 버튼을 켠 다음,용기에 스타일 지정하여 페이지와 Elementor Pro 의 코드 하이라이트 위젯과 비교하려면 을 참조하십시오 Elementor 코드 블록 위젯 페이지. 구조화된 콘텐츠를 표시하는 다른 방법은 을 참조하십시오 동적 테이블 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
