소프트웨어 또는 프로그래밍 팁을 제공하는 경우 몇 가지 코드 스 니펫을 공유하고 싶을 것입니다. 코드 스 니펫을 공유하는이 방법은 연습을 빠르게 설정하는 데 도움이 될 수 있습니다. 그러나 기본적으로 필요한 모든 서식을 사용하여 코드를 공유하는 것은 불가능합니다. 형식 지정이란 구문 강조를 의미합니다. 그래도 매우 쉽게 할 수 있습니다.
다행히도 divi를 사용하는 경우 이러한 코드 조각에 사용자 정의 스타일을 추가하기 위해 이 작업을 수동으로 수행할 수 있는 방법이 내장되어 있다는 것을 알아야 합니다. 추가적으로 플러그인과 능숙 Divi에서 미적으로 보기 좋고 기능적인 스니펫을 만드는 프로세스를 실제로 단순화할 수 있는 타사 앱입니다.
이 튜토리얼에서는 Divi (수동)에서 코드 조각을 공유하는 방법을 보여줍니다. 또한 Divi Builder를 사용하여 스 니펫 블록을 디자인하는 방법을 보여 드리겠습니다. 그러면 다음 단계로 넘어갑니다.
측량
이 튜토리얼에서 가능한 스 니펫 디자인의 개요는 다음과 같습니다.
코드 조각이있는 코드 조각 상자에 수동 모드가 추가되었습니다.
학습서의 전제 조건
이 튜토리얼에서 필요한 것은 디비 테마, 설치 및 활성. 새 페이지에서 Divi Builder를 사용하여 샘플 코드 조각을 처음부터 빌드합니다.
시작하려면 새 페이지를 만들고 공용 인터페이스에 Divi Builder를 배포하십시오. 그런 다음 "처음부터 빌드"옵션을 선택합니다.
이제 갈 준비가되었습니다!
Divi의 코드 조각을위한 개인화 된 상자 디자인
코드 조각이 텍스트 모듈에 있으므로 divi 빌더를 사용하여 디자인 요소를 텍스트 모듈 (및 그 주변)에 추가 할 수 있습니다. 이 디자인의 경우 요약 모듈을 사용하여 코드 조각의 레이블로 사용합니다. 다음으로 커서의 스타일을 지정하고 텍스트 모듈의 왼쪽에 배치합니다. 다음으로 스 니펫의 텍스트 모듈 스타일을 지정합니다.
섹션, 행 및 열 만들기
먼저 열의 행으로 새 섹션을 만들어야합니다.
그런 다음 다음과 같이 라인 매개 변수를 업데이트하십시오.
거터 폭 : 1
맞춤 패딩 : 상단의 0px, 하단의 0px
텍스트 모듈 추가
그런 다음 줄에 텍스트 모듈을 추가하십시오.
당신은 떠날 수 있습니다 내용 기본적으로. 나중에 WordPress 코드 조각을 추가하겠습니다. 지금은 다음 텍스트 매개변수를 업데이트하여 텍스트 모듈을 모델링해 보겠습니다.
배경색 : # eff0f1 텍스트 색상 : # 000000 사용자 지정 여백 : 60px 왼쪽 사용자 지정 패딩 : 3 % 위쪽, 3 % 아래쪽, 3 % 왼쪽, 3 % 오른쪽
상단 테두리 너비 : 10px 상단 테두리 색상 : # 7cda24
스 니펫 레이블 만들기
스 니펫 레이블을 만들기 위해 우리는 블 러브 모듈을 사용할 것입니다. 이렇게하면 표시된 코드 언어 옆에 광고 텍스트 아이콘 (또는 사용자 지정 이미지 아이콘)을 추가 할 수 있습니다.
프레젠테이션 모듈을 만들고 텍스트 모듈 위로 끕니다. 그런 다음 다음 프레젠테이션 설정을 업데이트합니다.
제목 : css 콘텐츠 : [가상 콘텐츠 제거] 아이콘 사용 : 예 아이콘 : 스크린 샷 참조
그런 다음 다음과 같이 디자인 매개 변수를 업데이트하십시오.
배경 색상 : # 1b2426 아이콘 색상 : # 7cda24 이미지 / 아이콘 위치 : left 글꼴 크기 : 20px 텍스트 제목 색상 : #ffffff 텍스트 크기 제목 : 16px
제목 줄 높이 : 1.3em 너비 : 100px 맞춤 여백 : -44px 하단, -50px 왼쪽 맞춤 패딩 : 10px 상단, 2px 하단, 15px 왼쪽, 15px 오른쪽
더 많은 스 니펫 상자 디자인을 만들기 위해 섹션 복제
이것은 우리의 첫 번째 코드 박스 디자인을 지원합니다. 이제 코드 블록 디자인이 포함 된 섹션을 복제하고 레이블과 색상을 업데이트하여 다른 인코딩 언어에 대한 새 코드 블록을 만들어야합니다. 물론 이것은 선택 사항이지만 페이지에 다른 스 니펫을 추가하려는 경우 각기 다른 색상 구성표를 사용하는 것이 도움이됩니다.
예를 들어 섹션을 복제하고 Blurb 모듈 설정을 엽니 다.
Javascript의 경우 제목을 "js"로 업데이트하십시오.
그런 다음 이미지 / 아이콘 색상을 마우스 오른쪽 버튼으로 클릭하고 찾기 및 바꾸기를 선택합니다.
업데이트 된 검색 및 교체 옵션 :
에서 :이 섹션 바꾸기 : [새 색상] 모두 바꾸기 : 찾은 모든 값 바꾸기를 선택하십시오.
이제 JS 스 니펫에 대한 새 스 니펫 블록이 있습니다.
다음은 WordPress의 인기있는 코드 유형에 대한 스 니펫 상자의 예입니다.
Prettify Code 플러그인을 사용하여 수동 코드 단편에 구문 강조 표시 추가
수동 방법을 사용하면 텍스트를 즉시 붙여 넣을 수 있습니다. 코드 정자화 플러그인 강조 표시된 코드를 모든 "pre"태그에 즉시 추가합니다. 이 플러그인의 장점은 사용자 정의가 전혀 필요하지 않다는 것입니다. 플러그인을 다운로드하고 활성화하기 만하면됩니다.
다음은 Active Prettify Code에서 코드가 어떻게 보이는지에 대한 예입니다.
Code Prettify가 제공됩니다. 구글 또한 모든 멋진 스 니펫을 스타일링하는 데 사용됩니다. stackoverflow.com.
끝내기
Divi에서 코드 조각을 보는 것은 어렵지 않습니다. WordPress에서 제공하는 사전 및 Word 코드 태그를 사용하여 스 니펫을 수동으로 추가하면 대부분의 비 html 스 니펫에 대한 작업이 수행되지만 먼저 인코더를 통해 스 니펫을 실행해야합니다. html로 확인하세요. 또한 텍스트 모듈 설정을 사용하여 스 니펫 텍스트 스타일을 추가로 사용자 정의 할 수 있습니다. 그리고 수동 스 니펫에 하이라이트를 추가하는 Code Prettify를 잊지 마십시오.
스 니펫을 정기적으로 공유하는 사람들에게는 SyntaxHighlighter 플러그인을 사용하는 것이 가장 좋은 방법 일 것입니다. 어느 쪽이든 항상 Divi Builder를 사용하여 스 니펫에 더 창의적인 디자인을 추가 할 수있는 옵션이 있습니다.
봉 기회.
