Code Section 꾸미기

D A S H B O A R D

Hyeon-Stone

D E V E L O P

S E C U R I T Y

Version 11.0.0 This is a major release. As such it contains breaking changes which may require action from users. Please read VERSION_11_UPGRADE.md for a detailed summary of all breaking changes. Unless otherwise attributed items below are thanks to Josh Goebel (ref: #2558). The below list should only be considered to be a high-level summary.

https://highlightjs.org/

[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사 맥북으로 공부하면서 블로그 글을 작성하고 있는 도중, 갑자기 내 티스토리 블로그 코드 블록 디자인이 무척이나 거슬리기 시작했다.

https://guiyomi.tistory.com/132

HTML

•

<head> 영역 안에 highlight.js를 이용하기 위한 코드 추가

•

codeblock.css 파일은 후에 <code> 섹션을 꾸며주기 위해 사용

<link rel="stylesheet" href="../stylesheets/codeblock.css">
<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/an-old-hope.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
HTML
복사

•

기본적으로 <pre><code><pre><code> 구조

•

나는 highlight.js를 이용하여 코드 하이라이팅을 해줄 것이기 때문에 <code>에 “hljs” Class를 추가 

<pre >
	<code class="hljs">
        function fetchAPI () {
            let params = {
                "grant_type": "authorization_code",
                "response_type": "code",
                "orgCode" : "1111",
                "client_id": "2cbec071fb07f27bca342c31ebd44fe",
                "redirect_uri": "http://localhost:3030/client/app",
                "username": "username",
                "password": "password"
            };
            const query = Object.keys(params)
                            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
                            .join('&');
            const url = "http://localhost:3030/oauth/?" + query;
            fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',  // This is REALLY important
                    'X-FSI-UTCT-TYPE' : 'TGC00002'
                },
            }).then((response) =>{
                    console.log(response);
                    var options = 'top=10, left=10, width=500, height=700, status=no, menubar=no, toolbar=no, resizable=no';
                    window.open(response.url,"엿",options);
            })
        }
	</code>
</pre>
HTML
복사

CSS

•

위 HTML 영역이 코드 하이라이팅 부분

•

CSS는 <code> 섹션을 이쁘게 맥북의 윈도우(창) 모양으로 바꾸어 주는 부분

pre {
  position: relative;
  width: 90%;
  padding-bottom: 20px;
}
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #cfd2d1;
  font-size: 12px;
}
.hljs {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
  color: #cfd2d1 !important;
  background-color: #323444!important;
  font-family: Menlo, Courier, monospace;
}
.hljs .line {
  counter-increment: line-idx;
  line-height: 1.5;
  color: #cfd2d1  ;
}
.hljs .line:hover {
  background-color: #262830;
}
.hljs .line:hover::before {
  color: #cfd2d1;
}
.hljs .line::before {
  content: counter(line-idx);
  width: 24px;
  display: inline-block;
  text-align: right;
  font-size: 0.8rem;
  color: #747a7a;
}
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 14px;
  background-color: #282a36 !important;
  border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 0 5px;
}
.hljs .code-header .btn.red {
  background-color: #f5655b;
}
.hljs .code-header .btn.yellow {
  background-color: #f6bd3b;
}
.hljs .code-header .btn.green {
  background-color: #43c645;
}
.hljs .code-body {
  max-height: 300px;
  margin: 16px 8px;
  overflow: auto;
}
.hljs .code-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
  /* background-image: linear-gradient(180deg, red, orange, yellow, green, blue, navy, purple); */

  border-radius: 4px;
  opacity: 0.8;
}
.hljs .code-body::-webkit-scrollbar-corner {
  display: none;
}
.hljs .copy-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 0;
  width: 64px;
  border-radius: 4px;
  margin-left: auto;
  transition: 0.2s background-color;
}
.hljs .copy-btn:hover {
  background-color: #555152;
}
.hljs-function ,.hljs-attr{
  color: #cfd2d1  !important;

}

#clickhere{
  color: #fff;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  padding-left: 5rem;
}
CSS
복사

JS

•

코드 복사 기능 추가

•

맥북의 신호등 색 점 추가

•

라인 마다 hover 기능 가능하도록 div로 묶어주는 기능

const COPY_TEXT_CHANGE_OFFSET = 1000;
const COPY_BUTTON_TEXT_BEFORE = 'Copy';
const COPY_BUTTON_TEXT_AFTER = 'Copied';
const COPY_ERROR_MESSAGE = '코드를 복사할 수 없습니다. 다시 시도해 주세요.';

const codeBlocks = document.querySelectorAll('pre > code');

const copyBlockCode = async (target = null) => {
  if (!target) return;
  try {
    const code = decodeURI(target.dataset.code);

    await navigator.clipboard.writeText(code);
    target.textContent = COPY_BUTTON_TEXT_AFTER;
    setTimeout(() => {
      target.textContent = COPY_BUTTON_TEXT_BEFORE;
    }, COPY_TEXT_CHANGE_OFFSET);
  } catch(error) {
    alert(COPY_ERROR_MESSAGE);
    console.error(error);
  }
}
$(document).ready(function(){
  for (const codeBlock of codeBlocks) {
    const codes = codeBlock.innerHTML.match(/(.*)(\n|.*$)/g);
    // const codes = codeBlock.innerHTML.split('\n');
    const processedCodes = codes.reduce((prevCodes, curCode) => prevCodes + 
  `<div class="line">${curCode}</div>`, '');
    const ExplainText = `<h3 id="clickhere">Click here!!!</h3>`
    const copyButton = `<button type="button" class="copy-btn" 
  data-code="${encodeURI(codeBlock.textContent)}" 
  onclick="copyBlockCode(this)">${COPY_BUTTON_TEXT_BEFORE}</button>`;
    
    const codeBody = `<div class="code-body" style="display:none">${processedCodes}</div>`;
    const codeHeader = `
    <div class="code-header">
      <span class="red btn"></span>
      <span class="yellow btn"></span>
      <span class="green btn"></span>
      ${ExplainText}
      ${copyButton}
    </div>`;
  
    codeBlock.innerHTML = codeHeader + codeBody;
  }
  
})
JavaScript
복사