거의 모든 블로거, 창작자 내용 또는 기술 개발자가 자신의 블로그에 강조 표시된 코드 조각을 표시해야 하는 경우가 있습니다. 이것은 그 자체로 두통이 될 수 있습니다. 그러나 이 코드 조각에서 하나 이상의 줄을 강조 표시해야 할 수도 있으며 이 기능은 안타깝게도 대부분의 코드 통합에 포함되지 않습니다. 다행히 SyntaxHighlighter Evolved 플러그인이 있습니다. 코드를 최대한 깔끔하고 읽기 쉽게 유지하기 위해 이를 사용하는 방법을 보여드리겠습니다.
구문 강조되는 진화
플러그인의 설치 및 활성화는 간단합니다. WP.org 플러그인 저장소에서 찾을 수 있습니다. 그러나 그것이 잘 수행되는지 확인하십시오 알렉스 밀스 (Viper007Bond), 실제로 많은 결과가 있기 때문입니다. 그러나 이것이 신뢰할 수 있고 최신이라는 것을 알고 있습니다. 또한 이것은 Gutenberg 편집자를위한 특수 블록과 함께 제공됩니다. 경험을 개인화 할 수있는 여러 매개 변수는 말할 것도없고, 이러한 유형의 작업에 대한 선택입니다.
메뉴에서 매개 변수 워드 프레스 대시 보드에서 구문 . 계속해서 클릭하십시오. 여기에서 스 니펫을 WordPress 사이트에 삽입하는 데 필요한 모든 것을 조정할 수 있습니다.
구문 강조 설정
플러그인의 설정 페이지는 비교적 간단합니다. 이 플러그인에 대해 우리가 좋아하는 한 가지 특정 요소는 코드가 사이트에 표시되는 방식과 관련하여 많은 사용자 정의를 얻을 수 있다는 것입니다. 임베딩에 CSS 클래스를 추가하고, 줄 번호 패딩을 조정하고, 테마 색상, 스마트 탭 및 줄바꿈 사용, 개별 사이트 전체 코딩 언어 강조 표시 로드 방법을 결정합니다.
대부분의 사람들이 알아야 할 세 가지 특정 매개 변수를 정의하려고합니다.
플러그인 버전, 줄 번호 및 탭 크기
첫 번째는로드중인 플러그인의 버전입니다. 플러그인이 저장소에서 최신 상태로 유지되지만 플러그인의 2.x 및 3.x 버전 중에서 선택할 수 있습니다 , 코드를 표시하려는 방법에 따라 다릅니다. 둘 다 안전하지만 서로가 제공하지 않는 특정 기능을 제공합니다 (작성 당시).
사용자가 코드를 복사하는 것이 가장 중요하다면 버전 3.x가 가능합니다. 그러나 실제 유틸리티보다 디스플레이에 더 유용하다면 스크롤 막대를 사용할 필요가 없기 때문에 버전 2.x의 개행 문자가 더 나을 수 있습니다. 큰 코드 조각의 경우.
그런 다음 줄 번호를 표시하거나 표시하지 않아야합니다. 많은 양의 코드와 튜토리얼의 경우 줄 번호는 매우 중요합니다. 그러나 짧은 스 니펫이있는 경우에는 1 행과 2 행으로 영구적으로 레이블을 지정할 필요가 없습니다.이를 제거하면 코드의 모양이 크게 향상 될 수 있습니다.
그리고는 탭 크기 여전히 논란의 여지가 있습니다. 기본 옵션은 4이지만 원하는 숫자로 변경할 수 있습니다. 2의 올바른 값을 포함합니다. (예, 올바른 값이 없다는 것을 알고 있습니다. 탭에 2 개의 공백이 필요합니다.)
코드 및 단축 코드
페이지 하단으로 스크롤하면 매개 변수 , 큰 코드 미리보기와 많은 단축 코드 매개 변수가 표시됩니다. 모든 플러그인이 스 니펫을 보여주기 위해 무엇을 할 수 있는지 확인하기 위해 시간을 잘 보내십시오. 또한 위의 설정에서 코드 표시에 대해 위에서 변경 한 사항이 여기에 반영됩니다. 따라서 옵션을 변경 한 후 반드시 저장을 누르십시오.
어떤 사람들은 특정 플러그인에 연결할 수 있기 때문에 단축 코드의 열렬한 팬이 아닐 수도 있지만, 똑똑하고 기억하기 쉽기 때문에 사용할 가치가 있다고 생각합니다. 다른 것이 없다면 두 가지를 기억해야합니다. 그러면 플러그인이 최선을 다해 작동합니다.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
또는 약간의 변형. 기억할 수 있다면이 플러그인으로 할 수있는 다양한 일에 대해 확신하는 것입니다. 긴 식별자를 사용할 수 있지만 SyntaxHighlighter 플러그인은 작업을 단순화 할 수 있도록 충분히 잘 구축되었습니다.
짧은 코드 사용
단축 코드를 렌더링할 수 있는 곳이면 어디에서나 사용할 수 있습니다. ~ 안에 Divi 또는 클래식 편집기의 경우 텍스트 모듈 또는 TinyMCE 편집기를 사용하여 단축 코드 사이에 코드를 붙여넣을 수 있습니다. 시각적 탭이 작동하는 방식으로 인해 탭을 사용하는 것이 좋습니다. 텍스트 이러한 서식 특수 문자를 유지합니다.
Gutenberg / Block Editor 사용자라면 일이 간단합니다. 이 경우에도 텍스트 블록을 사용할 수 있습니다. 더 쉽게 사용자 정의 HTML 블록. 위와 같이 코드를 단축 코드 태그에 붙여 넣습니다.
더 좋은 점은 SyntaxHighlighter Evolved 블록 자체입니다. 플러그인 설치에는 자체 Gutenberg 블록이 포함됩니다. 따라서 단축 코드가 아니고 설정을 엉망으로 만들고 싶지 않다면 그럴 필요가 없습니다. 아래 블록을 찾으십시오. 서식 메시지 나 페이지에 삽입하십시오.
코드를 삽입하는 방법에 관계없이 WordPress 사이트의 프런트 엔드에서 동일한 렌더링을 볼 수 있습니다.
요약하자면
여러 가지 이유로 청중에게 스 니펫을 제시해야 할 수 있습니다. 청중이 원하는대로 받아들이고 사용할 수있는 일반적인 문제에 대한 자습서를 작성하거나 솔루션을 게시 할 수 있습니까? 하지만 때로는 GitHub 통합이 사용자에게 원하는 경험을 제공하지 못하는 경우가 있습니다. SyntaxHighlighter Evolved와 같은 플러그인이 필요할 때입니다.
몇 번의 클릭만으로 약간의 사용자 정의와 Gutenberg 블록 또는 단축 코드를 사용하면 청중이 문제없이 코드를 탐색 할 수 있습니다.
