WordPress 사이트에 강조 표시된 코드 조각을 표시하는 방법

거의 모든 기술 블로거, 콘텐츠 작성자 또는 개발자는 블로그에 강조 표시된 코드 조각을 표시해야 하는 경우가 있습니다. 그 자체로 두통이 될 수 있습니다. 그러나 해당 스니펫 내의 한 줄 또는 여러 줄을 강조 표시하는 것도 필요할 수 있으며 해당 기능은 불행히도 대부분의 코드 임베드에 포함되지 않습니다. 운 좋게도 SyntaxHighlighter Evolved 플러그인이 있습니다. 코드를 가능한 한 깨끗하고 읽기 쉽게 유지하기 위해 사용하는 방법을 보여 드리겠습니다.

YouTube 채널 구독

SyntaxHighlighter 진화

플러그인 설치 및 활성화는 간단합니다. WP.org 플러그인 저장소에서 찾을 수 있지만 Alex Mills(Viper007Bond)에서 수행한 것인지 확인하십시오. 비슷한 이름과 기능을 가진 플러그인이 많이 있지만 이 플러그인이 신뢰할 수 있고 최신 상태로 유지된다는 것을 알고 있습니다. 또한, 여기에는 Gutenberg 편집자를 위한 특수 블록이 포함되어 있습니다. 이러한 종류의 작업을 위해 선택하게 만드는 경험을 사용자 정의할 수 있는 많은 매개 변수는 말할 것도 없습니다.

WordPress 대시보드의 설정 메뉴에서 SyntaxHighlighter 라는 새 항목을 찾을 수 있습니다. 계속해서 클릭하십시오. 여기에서 코드 조각을 WordPress 사이트에 포함하는 데 필요한 모든 것을 조정할 수 있습니다.

구문하이라이터 설정

플러그인의 설정 페이지는 비교적 간단합니다. 우리가 이 플러그인에 대해 좋아하는 한 가지 특정 요소는 사이트에 코드가 표시되는 방식과 관련하여 많은 사용자 정의를 얻을 수 있다는 것입니다. 임베드에 CSS 클래스를 추가하고, 줄 번호 패딩을 조정하고, 색상 테마를 선택하고, 스마트 탭과 줄 바꿈을 사용하고, 사이트 전체 규모에서 개별 코딩 언어 강조 표시를 로드하는 방법을 결정할 수 있습니다.

우리는 대부분의 사람들이 알고 있어야 한다고 생각하는 세 가지 특정 설정을 언급하고자 합니다.

플러그인 버전, 줄 번호 및 탭 크기

첫 번째는 로드하는 플러그인의 버전입니다. 플러그인 자체는 리포지토리에서 계속 업데이트되지만 코드를 가장 잘 표시하는 방법에 따라 플러그인 버전 2.x와 3.x 중에서 선택할 수 있습니다 . 둘 다 안전하지만 각각은 서로가 제공하지 않는 특정 기능을 제공합니다(적어도 이 글을 쓰는 시점에서는).

사용자가 코드를 복사하는 것이 가장 중요하다면 버전 3.x도 괜찮을 것입니다. 그러나 실제 유틸리티보다 디스플레이용이 더 많은 경우 버전 2.x의 줄 바꿈이 더 적합할 수 있습니다. 큰 코드 조각에 스크롤바가 필요하지 않기 때문입니다.

그런 다음 줄 번호를 표시할지 여부가 있습니다. 많은 양의 코드 및 자습서의 경우 줄 번호는 매우 중요합니다. 그러나 짧은 스니펫이 있는 경우 줄 1과 2로 계속해서 레이블을 지정할 필요가 없습니다. 이러한 스니펫을 제거하면 코드 모양이 상당히 정리될 수 있습니다.

그리고 항상 논쟁의 여지가 있는 탭 크기가 있습니다. 이 옵션의 기본값은 4이지만 원하는 숫자로 변경할 수 있습니다. 올바른 값 2를 포함합니다. (예, 올바른 값이 없다는 것을 알고 있습니다. 탭에 공백 2개만 있으면 됩니다.)

코드 및 단축 코드

설정 페이지 하단으로 스크롤하면 많은 수의 단축 코드 매개변수와 함께 큰 코드 미리보기를 볼 수 있습니다. 모든 플러그인이 코드 스니펫을 강조 표시하기 위해 무엇을 할 수 있는지 알아보기 위해 시간을 할애할 것입니다. 또한 위의 설정에서 코드가 표시되는 방식에 대해 위에서 수행한 모든 변경 사항이 여기에 반영됩니다. 따라서 옵션을 변경한 후 저장을 누르십시오.

어떤 사람들은 당신을 특정 플러그인에 묶을 수 있기 때문에 숏코드의 열렬한 팬이 아니지만, 우리는 이것이 똑똑하고 기억하기 쉽기 때문에 사용할 가치가 있다고 생각합니다. 다른 것이 없다면 두 가지를 기억해야 플러그인이 최상의 성능을 발휘할 것입니다.

• 또는

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , 서식이 지정되고 강조 표시됩니다.

  단축 코드 사용

  단축 코드를 렌더링할 수 있는 곳이면 어디든지 사용할 수 있습니다. Divi 또는 클래식 편집기에서는 텍스트 모듈 또는 TinyMCE 편집기를 사용하여 단축 코드 사이에 코드를 붙여넣을 수 있습니다. 시각적 탭이 작동하는 방식 때문에 특수 문자 서식을 유지하기 위해 텍스트 탭을 사용하는 것이 좋습니다.

  

  Gutenberg/Block Editor 사용자라면 모든 것이 간단합니다. 이를 위해 다시 Text 블록을 사용할 수 있습니다. Custom HTML 블록은 그보다 훨씬 쉽습니다. 위와 같이 숏코드 태그 안에 코드를 붙여넣습니다.

  

  그러나 그보다 훨씬 나은 것은 SyntaxHighlighter Evolved 블록 자체입니다. 플러그인 설치에는 자체 Gutenberg Block이 포함되어 있어 숏코드 사용자가 아니고 매개변수를 조작하고 싶지 않다면 그럴 필요가 없습니다. 서식 아래에서 블록을 찾아 게시물이나 페이지에 삽입하기만 하면 됩니다.

  

  코드를 삽입하는 방법에 관계없이 WordPress 사이트의 프런트 엔드에서 동일한 렌더링을 볼 수 있습니다.

  

  마무리

  청중에게 코드 스니펫을 제시해야 하는 데에는 여러 가지 이유가 있습니다. 어쩌면 튜토리얼을 작성하거나 대중이 필요에 따라 취하여 사용할 수 있도록 일반적인 문제에 대한 수정 사항을 게시할 수도 있습니다. 그러나 때때로 GitHub 임베드는 원하는 사용자에게 정확한 종류의 경험을 제공하지 않습니다. 그럴 때 SyntaxHighlighter Evolved와 같은 플러그인이 필요합니다. 몇 번의 클릭, 약간의 사용자 지정, Gutenberg 블록 또는 단축 코드만 있으면 청중이 문제 없이 코드를 탐색할 수 있습니다.

  귀하의 사이트에서 이와 같은 코드를 강조하기 위해 어떤 용도를 찾을 수 있습니까?

  Adil Bouyghajden의 기사 특집 이미지 / Shutterstock.com