[Blog] highlight.js 소스 복사 기능 추가(복사 버튼 추가)

highlight.js에 적힌 소스코드를 클릭 한번에 복사해보자.

필자가 이전 Syntax Highlight에서 제일 애용했던 기능은 더블클릭시 소스 전체 선택이였다.

필자가 올린 소스를 다시 사용하는데 복사 붙혀넣기가 안되면 그것만큼 불편한것도 없기때문이다.

(몇몇 소스는 너무 길기도 해서 드래그하기도 힘들다.. ㅠㅠ)

아쉽게도 highlight.js에는 그런기능이 없으니 Copy버튼을 하나 만들어서 버튼 클릭시 소스를 클립보드에 복사하도록 해보자.

CSS 추가

우선 아래 CSS부터 추가 해주자.

  /*/////////////////////////*/
  /*코드 Copy 버튼*/
  /*/////////////////////////*/
  div.highlightTopDiv > .toolbar {
    /*위치 고정*/
    position: absolute;
    top: 10px;
    right: 10px;
    /*기본은 안보이게*/
    opacity: 0;
    /*opacity가 변화할때 천천히 변화하게*/
    transition: opacity 0.2s ease-in-out;	
  }
  /*마우스 오버시 보여주기*/
  div.highlightTopDiv:hover > .toolbar {
    opacity: 1;
  }
  /*포커싱 받을시 (마우스 클릭시 포커싱 받음) 보여주기*/
  div.highlightTopDiv:focus-within > .toolbar {
    opacity: 1;
  }
  /*마우스 오버시 버튼 설정(기본 설정)*/
  div.highlightTopDiv > .toolbar a,
  div.highlightTopDiv > .toolbar button,
  div.highlightTopDiv > .toolbar span {
    border: 0;
    color: #bbb;
    font-size: 11px;
    padding: 2px 5px;
    background: #f5f2f0;
    background: rgba(224, 224, 224, 0.2);
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    border-radius: .5em;
  }
  /*포커싱 받거나 버튼구역 오버시 텍스트 색상 변경*/
  div.highlightTopDiv > .toolbar a:hover,
  div.highlightTopDiv > .toolbar a:focus,
  div.highlightTopDiv > .toolbar button:hover,
  div.highlightTopDiv > .toolbar button:focus,
  div.highlightTopDiv > .toolbar span:hover,
  div.highlightTopDiv > .toolbar span:focus {
    color: inherit;
    text-decoration: none;
  }
  /*/////////////////////////*/
  /*코드 Copy 버튼*/
  /*/////////////////////////*/

Copy버튼은 이전에 만든 제목 라벨 우측상단에 올릴것이다. 라벨에 마우스를 올리면 버튼이 보이도록 설정해두었다.

(현재 적용되어 있으니 어떤 느낌인지 미리 확인해봐도 된다.)

제목 라벨을 아직 만들지 않았으면 아래 링크를 따라가서 만들도록 하자.

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

HTML 추가

<script>
    //화면상의 pre를 모두 불러서 아래 코드를 실행
    $("pre").each(function() {
      var pre = this;             //PRE
      var name = this.className;  //PRE Class이름을 가져온다.(PRE class이름은 곧 사용하는 코드이름)
      
      if(name == "nohighlight")
      {
        //highlight.js에서 nohighlight속성은 아무것도 지원하지 않기 때문에
        //필자도 nohighlight일때는 아무것도 해주지 않는다.
      }
      else if(name == "plaintext")
      {
        //highlight.js에서 plaintext속성은 일반텍스트로 표현할때 쓰기때문에
        //라벨을 TEXT로 넣어줄까 말까 고민하다가 그냥 아무것도 해주지 않기로 결정했다.
        //TEXT라벨을 넣고 싶으면 아래 주석을 풀어주기만 하면 된다.
        //var $highlightTopDiv = $('<div class="highlightTopDiv">').text("TEXT");
          //$(this).before($highlightTopDiv);
      }
      else if(name == "")
      {
        //class가 지정되있지 않을때 highlight.js의 언어 자동감지를 사용한다는 뜻인데
        //자동감지를 할때 확인해보니 highlight.js에서 Class를 자동으로 입력해준다.
        //그래서 class가 ""일때는 highlight.js가 제대로 작동하지 않았을경우인데
        //아직 확인해본적이 없어서 일단 공란으로 놔두기로 했다.
      }
      else
      {
        //위의 경우를 제외하고 class가 지정되었을때 highlightTopDiv이라는 Div를 생성후
        //해당 코드를 표시해준다. (위 Css에서 highlightTopDiv 디자인을 미리 만들어두었다.)
        var $highlightTopDiv = $('<div class="highlightTopDiv">').text(name);
          $(this).before($highlightTopDiv);
        //////////////////////////////////////////////////////////////////////////////
        ////////////////////Copy 버튼 관련 추가 로직////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////
        //Copy버튼을 올릴 div를 만들어주고 해당 div를 제목라벨 div에 올린뒤
        //Copy버튼을 copyDiv에 넣어준다.
        var $highlightCopyDiv = $('<div class="copyDiv">');
          $highlightTopDiv.append($highlightCopyDiv);          
        var $highlightCopyBtn = $('<button>Copy</button>');
        $highlightCopyDiv.append($highlightCopyBtn);
        
        //Copy버튼 클릭시 클립보드에 pre안에 있는 텍스트를 넣어준다.
        $highlightCopyBtn.on("click", function() {
          navigator.clipboard.writeText(pre.innerText);          
        });                
      }
    });   
</script>

기존 제목라벨 스크립트 소스에 Copy 버튼 관련 소스를 추가해주었다.

위 스크립트를 HTML소스 제일 아래 </body> 바로 위에 추가시켜주면 된다.

주의사항

제목 라벨을 설정하지 않고 Copy기능만 넣고 싶다고 한다면 일단 스크립트 소스에서 highlightTopDiv관련 소스는 다 삭제하고 (if문은 있어야 한다.) 아무 div를 하나 만들어서 pre를 올린뒤 그 div에 Copy버튼 div를 올리면 될것이다.

관련글

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

[Blog] highlight.js 설치하기(티스토리에 설치하기)

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

[Blog] highlight.js 폰트 변경 하기 (D2 Coding 폰트 티스토리 적용)

날다의 운영환경
본체	DeskTop
O S	Windows11 Pro
Browser	Google Chrome