티스토리 MAC 스타일 코드 블럭 설정 방법, HTML CSS

728x90

MAC 스타일 코드 블록

적용 설정 순서

아래 CSS 소스코드 복사, 붙여 넣기.
codeblock.js 파일 업로드.
HTML 편집에 스크립트 붙여 넣기.

위 순서대로 하시면 간단하게 설정이 가능합니다.

CSS코드

pre {
  position: relative;
}
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;
  background-color: #343131;
  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 {
  content: counter(line-idx);
  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;
}
.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;
}

자바스크립트

위 CSS 소스코드를 티스토리에 붙여 넣기 하셨다면 아래 스크립트 파일을 티스토리 스킨파일에 업로드합니다.

codeblock.js

0.00MB

적용설정

위 파일 업로드 완료 하셨다면 아래 스크립트를 HTML 편집 /body 적당한 위치에 붙여 넣기 합니다.

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

위 안내해 드린 순서대로 모두 완료하시면 지금 보이는 MAC 스타일 코드블록 모습을 확인하실 수 있습니다.

다운로드

CSS 코드 복사 붙여 넣기가 귀찮으신 분들은 아래 파일을 다운로드하셔서 사용하세요.

codeblock.css