[Blogger] 제미나이 스타일 코드 블럭 (2): Highlight.js GitHub 스타일 적용과 체크 아이콘 복사 버튼 구현

제미나이 스타일의 복사 버튼 있는 코드 블럭 만드는 방법에 이어, Highlight.js 도구로 코드에 알록달록한 색깔(하이라이트)을 입혀 보자. 예시 코드는 GitHub 스타일.

코드 하이라이트

1. 블로그 관리자 화면의 [테마] → [HTML 편집]으로 가서 </head> 태그 바로 위에 아래 코드를 복사해서 붙여 넣는다. 제미나이의 하얀 배경과 가장 잘 어울리는 GitHub 스타일.

HTML


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js"></script>

/* 2026.02.04. 내용 추가 */

위의 HTML 코드는 CSS 하이라이트가 빠져있다. 아래의 코드를 사용하자.

HTML


<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/xml.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/css.min.js'></script>

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    hljs.highlightAll();
  });
</script>

- 글을 쓸 때는 <code class="language-css">를 써야 함에 유의.

코드 하이라이트 적용을 위해 code 클래스명을 language-css로 지정하는 방법 설명

CSS 코드 블록 작성 시 문법 강조를 위한 클래스명 설정 예시 이미지

- 아래 자바스크립트 '// 1. 하이라이트(색상 입히기) 실행 hljs.highlightAll();' 부분은 중복되므로 삭제하면 됨.

/* 내용 추가 끝 */

2. 다음으로 </body> 위에 아래의 자바스크립트 코드를 넣는다.

하이라이트를 실행함과 동시에, 파란색 체크 아이콘이 나타나는 복사 기능을 하나로 합친 코드.

JavaScript


<script>
  // 1. 하이라이트(색상 입히기) 실행
  hljs.highlightAll();

  // 2. 제미나이 스타일 복사 함수 (아이콘 + 색상 + 텍스트 변경)
  function copyGeminiCode(button) {
    const codeBox = button.closest('.gemini-code-box');
    const codeText = codeBox.querySelector('code').innerText.trim();
    
    // 아이콘 정의 (기본 복사 아이콘 vs 파란색 체크 아이콘)
    const copyIcon = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
    const checkIcon = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0b57d0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;

    navigator.clipboard.writeText(codeText).then(() => {
      const iconSpan = button.querySelector('.icon-placeholder');
      const textSpan = button.querySelector('.text-placeholder');
      
      // 클릭 시 상태 변경
      button.classList.add('copied');
      if(iconSpan) iconSpan.innerHTML = checkIcon; // 아이콘을 체크표시로 교체
      if(textSpan) textSpan.innerText = "복사됨";    // 텍스트 변경
      button.style.color = "#0b57d0";              // 전체 색상을 제미나이 블루로

      // 2초 후 원래대로 복구
      setTimeout(() => {
        button.classList.remove('copied');
        if(iconSpan) iconSpan.innerHTML = copyIcon;
        if(textSpan) textSpan.innerText = "코드 복사";
        button.style.color = "#444746";
      }, 2000);
    });
  }
</script>

3. 글을 쓸 때 버튼 부분이 아래와 같이 icon-placeholder와 text-placeholder라는 이름(class)을 가지고 있어야 아이콘이 정상적으로 바뀐다.

gemini-code-box 클래스를 사용한 코드 하이라이트 및 복사 버튼 HTML 소스 코드 화면

- 이 부분은 '제미나이 스타일 코드 블럭 (1)'을 잘 따라했다면 걱정할 필요 없다.

이렇게 하면 글씨 두께감과 하이라이트 색상 그리고 복사 버튼 클릭 시, 파란색 체크 아이콘 효과가 모두 한 번에 적용된다.

오늘의 한마디

복사 버튼 있는 코드 블럭 박스 구현은 여기까지!

"중요: HTML 코드는 language-html, CSS 코드는 language-css라고 정확히 입력해야 하이라이트 엔진이 문법을 인식하고 색을 칠해준다!"

복사됨 체크 아이콘 표시와 코드 하이라이트 적용된 화면

이 블로그 검색

더한스픽