Easy Syntax Highlighter (워드프레스 플러그인)

현대적이고 가벼운 WordPress용 구문 강조.

최신 Highlight.js 엔진으로 구동되는 이 플러그인은 코드 스니펫을 표시하는 빠르고 정확한 방법을 제공합니다. 20개 이상의 언어를 지원하며, 80개 이상의 시각적 테마를 포함하고, Gutenberg와 클래식 에디터 모두와 원활하게 통합됩니다.

✨ 주요 기능

• ⚡ 모던 엔진: 최신 Highlight.js 라이브러리를 활용하여 고성능 구문 강조를 제공합니다.
• 80개 이상의 테마: 광범위한 라이트 및 다크 테마 라이브러리(Monokai, Dracula, VS Code, GitHub 등)를 포함하며, 모두 오프라인 호환성을 위해 로컬에 저장됩니다.
• ️ 시각적 인터페이스: 테마 미리보기와 선택이 쉬운 깔끔한 그리드 기반 관리자 인터페이스를 갖추고 있습니다.
• 에디터 통합:
• 구텐베르크: WordPress 기본 “코드” 블록과 자동으로 연동됩니다.
• 클래식 에디터: 손쉬운 코드 삽입을 위한 TinyMCE 버튼이 포함되어 있습니다.
• 스마트 복사: 사용자는 더블클릭으로 코드 블록을 즉시 클립보드에 복사할 수 있습니다(지역화된 피드백 제공).
• 퍼포먼스 우선: 에셋은 스마트 로딩을 사용합니다. 스크립트와 스타일은 실제로 코드 블록이 있는 페이지만 로드됩니다.
• 보안 및 접근성: 적절한 입력 검증, 출력 이스케이핑 및 접근성을 위한 ARIA 라벨로 구축되었습니다.

요구사항

설치 방법

1. 플러그인 파일을 다운로드하세요.
2. FTP를 통해 easy-syntax-highlighter 폴더를 서버의 /wp-content/plugins/ 경로에 업로드하세요.
3. WordPress에 로그인하고 플러그인으로 이동하세요.
4. Easy Syntax Highlighter를 찾아 활성화를 클릭하세요.
5. 설정 → Syntax Highlighter에서 환경설정을 구성하세요.

⚙️ 구성

플러그인을 사용자 지정하려면 설정 → Syntax Highlighter로 이동하세요.

1. 테마 선택

80가지 이상의 다양한 색상 테마 중에서 선택하세요. 설정 페이지는 실시간 미리보기가 포함된 시각적 그리드 레이아웃을 제공하여 저장하기 전에 코드가 어떻게 표시될지 정확히 확인할 수 있습니다.

2. 일반 설정

• 언어 지원: 자동 언어 감지를 활성화하거나 특정 언어를 강제로 지정합니다.
• 복사 기능: “더블클릭으로 복사” 기능을 켜거나 끕니다 (기본적으로 활성화됨).
• 성능: 자산 로딩 및 캐싱 동작을 구성하여 사이트 속도를 유지합니다.

사용 방법

구텐베르크 블록 편집기에서 (권장)

이 플러그인은 기본 WordPress 경험을 향상시키도록 설계되었습니다.

1. + 버튼을 클릭하고 표준 코드 블록을 추가하세요.
2. 코드 조각을 블록에 붙여넣으세요.
3. 게시하세요! 플러그인이 자동으로 언어를 감지하고 프론트엔드에서 강조 표시합니다.

고급: 언어 강제 지정
특정 코드 조각에 대해 자동 감지가 정확하지 않은 경우, 수동으로 언어를 정의할 수 있습니다:

1. 코드 블록을 선택합니다.
2. 툴바의 점 세 개 메뉴(⋮)를 클릭하고 HTML로 편집을 선택합니다.
3. code 태그에 언어 클래스를 추가합니다: <code class="language-python">.
4. 시각적으로 편집을 선택하여 표준 보기로 돌아갑니다.

클래식 편집기에서

1. 편집기 툴바에서 코드 아이콘(TinyMCE 버튼)을 찾습니다.
2. 버튼을 클릭하여 삽입 모달을 엽니다.
3. 코드를 붙여넣고, 드롭다운에서 원하는 언어를 선택한 후 삽입을 클릭합니다.

문제 해결

문제가 발생하면 다음 해결 방법을 확인하세요:

라이선스 & 기여

라이선스
GNU 일반 공중 사용 허가서 v2.0 이상에 따라 라이선스가 부여됩니다.

기여하기
커뮤니티의 기여를 환영합니다!

1. 저장소를 포크하세요.
2. 기능 브랜치를 만드세요.
3. 변경 사항에 대한 명확한 설명과 함께 풀 리퀘스트를 제출하세요.

WordPress 커뮤니티를 위한 ❤️으로 만들었습니다