[Blog] 블로그 꾸미기 맥 터미널

https://guiyomi.tistory.com/132

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

 

위의 블로그를 보고 참고하여 일부 보완해서 구현하였습니다.

위의 블로그 설정을 그대로 적용하다보니 제가 원하는대로 안되기도 하고, 터미널 색상이 아래 그림과 같이 흰색이여서 직접 수정하였습니다.

 

CSS 부분 설정

티스토리 블로그 html 편집에 들어가서 CSS 코드 수정에서 ctrl +f를 누르고 hljs라는 곳을 찾습니다.

기후 /*코드블럭*/ 관련 기존 설정은 은 모두 삭제해주고 아래의 코드를 입력해줍니다.

/* 코드 블럭 */
#article-view pre code.hljs {
    font-size: 18px;
    padding: 20px;
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    border: solid 1px #ebebeb; /* 터미널 창 테두리 */
    line-height: 1.85; /* 행 간격을 살짝 늘려서 부드러운 흐름 추가 */
    overflow: auto;
    background-color: #282c34; /* 터미널 배경색 */
    color: #ffffff; /* 텍스트 색상: 흰색 */
    font-weight: 500; /* 글자 두께: 중간 */
    letter-spacing: 0.05em; /* 글자 간격: 미세하게 조정 */
    word-spacing: 0.1em; /* 단어 간격: 부드러운 여백 추가 */
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); /* 섬세한 그림자 효과 */
}

.article .contents_style li code {
  color: #abb2bf; /* 글자 색상 */
  background: #282c34; /* 배경 색상*/
}

pre {
  position: relative;
}
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #419bf0; /* 오른쪽 하단 bash*/
  font-size: 14px;
}
.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: #cfd2d2;  /*?*/
  background-color: #282c34; /*?*/
  font-family: Menlo, Courier, monospace;
}
.hljs .line {
  counter-increment: line-idx;
  line-height: 1.5;
}
.hljs .line:hover {
  background-color: #262830;
}
.hljs .line:hover::before {
  color: #cfd2d1;
}
.hljs .line::before {
  width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 16px;
  font-size: 0.8rem;
  color: #747a7a;
}
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 14px;
  background-color: #434041;
  border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  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: 600px;
  margin: 32px 8px;
  overflow: auto;
  color: #666;
}
.hljs .code-body::-webkit-scrollbar {
  width: 12px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
  background-color: rgb(1 2 3 / 80%);
  border-radius: 4px;
}
.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;
}

 

HTML

 html 코드 부분에  <script defer src="./images/codeblock.js"></script> 를 추가해줍니다. (위치는 body의 맨 끝 입니다.)

```
</s_t3>
  <script src="./images/script.js"></script>
  <script defer src="./images/codeblock.js"></script>
</body>

 

 

파일 업로드

파일 업로드 부분에 codeblock.js 파일을 업로드 해줍니다.

codeblock.js

0.00MB

 

 

 

 

이제 모든 설정이 완료 되었습니다.