프라치노공간(티스토리) 꾸미기 1탄 - 코드설정 사파리사이트처럼 만들기(?)

일단 티스토리 첨에 할때 냅다.. 일단 프라치노 공간에서 사서 그 안에서 꾸몄다..

오랫동안 보다보니.. 질리던 찰나에.. 얼마전에 이 블로그를 보고서 프라치노 공간안에서 html 편집을 통해 무언가를 꾸며야겠다는 맘을 먹기로 했다.

프라치노 공간 스킨 TOC 플로팅 목차 설정하는 방법

 

바꾸기 1️⃣탄은 코드 설정을 아래와 같이 바꿔야겠다는 생각이 들었다.

그래서 나혼자,, 홀로 고군분투(?) 해서 얼렁뚱땅 만들어본 블로그 설정 💨💨💨

 

 

첨에 코드 설정을 안하며 아래와 같은 형태로 나올것이다.. 일단, 이쁘지 않다,, 심심 그자체 아무것도 없는 무(無)그자체라고 볼 수 있다.

 

이 설정을 저렇게 사파리 바꾸고 싶다면.. 아래와 같이 설정을 시작하도록 하자.

 

1. 블로그관리 - 왼쪽 사이드 바의 [플러그인]으로 이동

2. Syntax 검색하기 - Syntax Hightlight [ 코드 문법 강조 ] 사용하기

3. 테마에 Atom One Dark 적용하기

[참고] https://0secusik0.tistory.com/69 해당 블로그에서 아래 테마별 정리한 사진 다운 받아왔다ㅎㅎ

이렇게 하면 30프로 설정까지 왔다고 볼 수 있다.

아래와같이 이정도 이쁨정도는 나오게 될 것이다..

 

---

 

자 그럼.. 이제.. 위에 위부분이 나오게 하는게 이제.. 시작이다..

 

1. 일단, 스킨편집에 들어가 HTML 설정으로 이동,,

 

 

2. 동작 확인해보기 

동작 확인을 위해 </body></html>위에다가 아래코드 첨부해서 옆에 미리보기로 작동하는 확인 + CSS 파일에 추가하기

나같은 경우에는 일단 첨에는 잘되는지 확인을 위해..

저기 맨밑에 </body></html> 위에다가 아래 코드를 첨부해보쟈

<!--첨부대상⭐️ -->
<script>
document.addEventListener("DOMContentLoaded", () => { 
  // 페이지가 완전히 로드된 후 실행되는 코드

  const codeBlocks = document.getElementById("article").getElementsByTagName("pre");
  // <article> 요소 내에 있는 모든 <pre> 태그(코드 블록)를 가져옴

  for (let i = 0; i < codeBlocks.length; i++) {
    const codeInner = codeBlocks[i].getElementsByTagName("code")[0];
    // <pre> 태그 내부의 <code> 태그를 가져옴

    if (codeInner !== null) {
      // "procode-wrap" 클래스 추가 (코드 블록 스타일 적용)
      codeBlocks[i].classList.add("procode-wrap");

      // macOS 스타일 헤더 생성
      const header = document.createElement("div");
      header.className = "code-header"; // 헤더에 스타일을 적용할 클래스 추가
      header.innerHTML = `
        <span class="dot red"></span>
        <span class="dot yellow"></span>
        <span class="dot green"></span>
        <span class="copy">COPY</span>
      `;
      // 빨간색, 노란색, 초록색 버튼과 "COPY" 버튼을 추가

      // <pre> 태그의 첫 번째 요소로 헤더 삽입
      codeBlocks[i].insertAdjacentElement("afterbegin", header);

      // 코드 블록의 언어 확인
      let lang = codeBlocks[i].getAttribute("data-ke-language");
      //console.log('lang',lang); // (디버깅용 로그)

      // <code> 태그에 프로그래밍 언어 정보 추가 (대문자로 변환)
      codeInner.setAttribute("data-language", lang.toUpperCase());

      // COPY 버튼 기능 추가
      const copyButton = header.querySelector(".copy");

      copyButton.addEventListener("click", () => {
          // 코드 텍스트를 클립보드에 복사
          navigator.clipboard.writeText(codeInner.innerText).then(() => {
              copyButton.innerText = "COPIED!"; // 버튼 텍스트 변경

              // 2초 후 다시 "COPY"로 복구
              setTimeout(() => {
                  copyButton.innerText = "COPY";
              }, 2000);
          });
      });
    }
  }

  // Highlight.js를 사용하여 코드 블록에 문법 강조 적용
  hljs.highlightAll();
});
</script>

<!-- 이건.. 첨부하지 않기-->
</body>
</html>

 

그러면서 console.log() 사용 필수..만약에 안되거나 무슨 일이 있다면 저기 위에서 내가 코드에 첨부한것처럼  console.log(); 를 유용하게 사용해보도록 하쟈.

 

아래코드는 CSS에 첨부하기 

#article.fc pre.procode-wrap>code{
  padding: 20px 20px 30px 20px!important;
}

.code-header {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px 8px 0 0;
    --tw-bg-opacity: 1;
    background-color: rgb(60 60 60 / var(--tw-bg-opacity));
}

.code-header .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.code-header .dot.red {
  background: #ff5f56;
}

.code-header .dot.yellow {
  background: #ffbd2e;
}

.code-header .dot.green {
  background: #27c93f;
}

.code-header .copy {
  margin-left: auto;
  font-size: 12px;
  color: #f8f8f2;
  cursor: pointer;
}

.procode-wrap {
  border-radius: 10px;
  background: #2d2d2d;
  color: #f8f8f2;
  overflow-x: auto;
  margin: 0;
  /* box-shadow: 4px 3px 4px rgb(40 44 52 / 43%); */
}

code.hljs{
  position: relative;
  overflow: visible; 
}

/* procode-wrap에 언어 표시 */
code.hljs::after {
  position: absolute;
  content: attr(data-language);
  display: block;
  font-size: 12px;
  color: #f8f8f2;
  right : 12px;
  bottom: 8px;
}

.code-tail .tail {
  margin-left: auto;
  font-size: 12px;
  color: #f8f8f2;
  cursor: pointer;
}

 

CSS 가 적용이 안된다면...

=> 그러면 자기.. CSS class가 매핑이 안되는거일수도 있다.

그렇기에 chrome F12 켜서 

1️⃣ 1번 누르기

2️⃣ 커서에 확인해보고 싶은 곳 선택하면 오른쪽 2번과 같이 위치를 알려준다.

3️⃣ 3번 누르면 해당 값에.. class나 id나 이런식으로 알려줄것이다. 그거 이용해서 변경해보면된다..

 

3. COPIED! 버튼 잘 적용되었는지 확인

잘 적용이 되었다면.. 적용버튼을 눌러서 새로운 창을 켜고 COPY에 복사되고 COPIED!로 바뀌는지도 확인해보시기를..

 

사실 여기까지만 해도 된다...

 

=> 이걸 이제 JS 파일 업로드 이용해서 업로드 해서 그냥 SCRIPT 불러오기

로 끝..!

<script defer src="./images/highlight-macos.js?fcver=2526" onload="styleCodeBlocks();"></script>

<!-- 여기 위로 script불러오기-->
</body>
</html>

 

1️⃣ 파일업로드 눌러서 이동

2️⃣ 아래 highligth-macos.js 파일을 다운로드 받고 추가 버튼을 눌러서 추가하기

3️⃣ 추가하면 3번과 같이 나오는것을 확인할 수 있다.

highlight-macos.js

0.00MB

 

 

 

 

사실상, 4번만 해도 끝나지만, 그 과정에서 바로 안되는것을 알기에 위에서부터.. 한번씩 해보기를..

코드 설명은 저기 위에 주석 참고..

 

근데 문제점이 존재하긴한다.. 해당부분은..차차,, 수정해봐야겠다.. 지금은 외면하고 싶다..

코드에 대한 피드백이나,,이해가 안된다거나 머가 안된다거나 이런 댓글들.. 얼마든지 환영합니다.. 🥹