Tistory 스킨편집으로 코드 복사 만들기

글을 올리다 보니 소스코드를 많이 올리게 된다. 메뉴의 코드 블록이 맘에 안들고 소스를 복사하여 넣고 싶다.

 

아래 처럼 박스가 생기고 복사 버튼을 누루면 소스내용이 복사 되어 원하는 곳에 붙여 넣기를 하고 싶다.

Tistory 보안 정책으로 여러줄의 경우 복사 버튼으로 복사가 되지 않고 출처가 복사되는 것을 확인하였다.

 

화면 구성 디자인은 V0 AI를 이용하여 만들었다.

<pre> 소스코드 </pre>

 

찾다보니 스킨 편집으로 가능하다고 하여 구현해 보았다.

 

HTML 편집

 

아래처럼 코드를 </body> 위 부분에 붙여 넣기 하면 된다.

 

 

문제는 여러줄일 경우 Tistory 보안 정책으로 소스코드가 복사가 안되고 출처만 복사가 된다.

소스 코드는 아래에 있으니 내용을 드래그하여 복사하여 사용하면 된다.

<script>
(function() {
  // 모든 pre 태그 선택
  const codeBlocks = document.querySelectorAll('pre');
  
  // 각 코드 블록에 대해 처리
  codeBlocks.forEach((codeBlock, index) => {
    // 원래 코드 블록의 클래스와 스타일 저장
    const originalClass = codeBlock.className;
    const originalCode = codeBlock.innerHTML;
    
    // 새로운 래퍼 div 생성
    const wrapper = document.createElement('div');
    wrapper.style.maxWidth = '800px';
    wrapper.style.margin = '30px auto';
    wrapper.style.border = '1px solid #e0e0e0';
    wrapper.style.borderRadius = '10px';
    wrapper.style.boxShadow = '0 4px 16px rgba(0,0,0,0.08)';
    wrapper.style.overflow = 'hidden';
    wrapper.style.fontFamily = "'Segoe UI',Tahoma,Geneva,Verdana,sans-serif";
    
    // 헤더 div 생성
    const header = document.createElement('div');
    header.style.display = 'flex';
    header.style.justifyContent = 'space-between';
    header.style.alignItems = 'center';
    header.style.backgroundColor = '#f3f4f6';
    header.style.padding = '12px 20px';
    header.style.borderBottom = '1px solid #ddd';
    
    // 제목 div 생성
    const title = document.createElement('div');
    title.style.fontWeight = '600';
    title.style.fontSize = '15px';
    title.style.color = '#111827';
    title.textContent = '';
    
    // 복사 버튼 생성
    const copyButton = document.createElement('button');
    copyButton.style.backgroundColor = '#2563eb';
    copyButton.style.color = 'white';
    copyButton.style.border = 'none';
    copyButton.style.padding = '6px 12px';
    copyButton.style.fontSize = '13px';
    copyButton.style.borderRadius = '5px';
    copyButton.style.cursor = 'pointer';
    copyButton.textContent = '복사';
    
    // 복사 버튼 클릭 이벤트
    copyButton.addEventListener('click', function() {
      const tempTextArea = document.createElement('textarea');
      // 코드 블록 내의 텍스트만 추출 (HTML 태그 제거)
      const tempElement = document.createElement('div');
      tempElement.innerHTML = originalCode;
      const codeText = tempElement.textContent || tempElement.innerText;
      
      tempTextArea.value = codeText;
      document.body.appendChild(tempTextArea);
      tempTextArea.select();
      document.execCommand('copy');
      document.body.removeChild(tempTextArea);
      
      // 복사 완료 표시
      const originalText = copyButton.textContent;
      copyButton.textContent = '복사됨!';
      copyButton.style.backgroundColor = '#10B981';
      
      setTimeout(function() {
        copyButton.textContent = originalText;
        copyButton.style.backgroundColor = '#2563eb';
      }, 2000);
    });
    
    // 새로운 pre 태그 생성
    const newCodeBlock = document.createElement('pre');
    newCodeBlock.id = 'codeBlock-' + index;
    newCodeBlock.className = originalClass;
    newCodeBlock.style.backgroundColor = '#1e1e1e';
    newCodeBlock.style.color = '#dcdcdc';
    newCodeBlock.style.fontFamily = 'Consolas,monospace';
    newCodeBlock.style.fontSize = '14px';
    newCodeBlock.style.padding = '20px';
    newCodeBlock.style.overflowX = 'auto';
    newCodeBlock.style.whiteSpace = 'pre-wrap';
    newCodeBlock.style.lineHeight = '1.6';
    newCodeBlock.style.margin = '0';
    newCodeBlock.innerHTML = originalCode;
    
    // 요소들을 조립
    header.appendChild(title);
    header.appendChild(copyButton);
    wrapper.appendChild(header);
    wrapper.appendChild(newCodeBlock);
    
    // 원래 코드 블록을 새 래퍼로 교체
    codeBlock.parentNode.replaceChild(wrapper, codeBlock);
  });
})();
</script>

 

 

이제 새로운 글을 쓸때 아래처럼 <pre> </pre> 태그를 이용하면 간단하게 블록이 만들어 지고 소스를 넣을 수 있게 된다.

 

 

소스코드가 아래처럼 간단하면 복사 버튼으로 내용을 복사하여 붙여 넣기가 가능하다.

<pre> 소스코드 </pre>

 

소스 코드 수정은 기본 모드에서 쉽게 수정하여 집어 넣으면 된다.