1) MAC 코드블럭으로 변경하는 방법
내가 현재 사용하고 있는 코드블럭이 가독성이 너무 떨어져서 변경하려고 찾아보던 중에 예쁜 스킨을 발견했다.
바로 적용하려고 했는데, 뭔가 묘하게 바뀐게 있는 것 같긴한데 결과론적으로 맥 스타일이 적용이 되지 않았다.
mac 코드블럭으로 변경하고 싶다면 아래 블로그 참고하여 변경하면 된다.
댓글이나 여기저기 블로그 글들을 찾아보니 대부분의 블로그가 문제 없이 되는 것 같다.
https://guiyomi.tistory.com/132
[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기
글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사
guiyomi.tistory.com
2) hELLO 스킨 코드블럭 변경 오류
여기서부터는 나의 오류 찾기 과정.
아예 변경이 안된거냐 하면 그건 아니다. 가로 스크롤도 사라졌고 뭔가 색도 변하긴 했다.
묘하게 변한건 있지만 원하던 스타일과는 동떨어진 상태로 변경이 됐다.
일단 둉이님 블로그에서 나왔던 방법대로
1. css 수정한다. (기존 hljs 관련 코드는 모두 주석처리 하였다.)
2. js 파일 업로드한다.
3. html에 script 코드를 붙여넣기 한다.
이 간단한 세 과정을 모두 거쳤으나 결과적으로 대부분의 코드가 적용되지 않은 모습을 볼 수 있다.
참고로 나는 현 기준 가장 마지막 버전인 4.2.1 버전을 사용중이며 이 전에 코드 편집 시도한적 없는 클린한 상태다.
2-1) 플러그인 제거
hELLO 스킨 공식 블로그 글을 참고하면 코드 하이라이팅 문제는 플러그인을 꺼줘야 한다고 나와있다.
다크모드로 변경 해도 코드블럭은 흰색으로 나오는 등 색 변경이 안되는 현상이라 내가 해결하고자 하는 바와 직접적인 연관은 없을 것 같으면서도 혹시나 해서 시도했다.
플러그인은 티스토리 관리자 - 플러그인 - 코드 문법 강조를 해제 해주면 된다.
이걸 해제하면 또 변화가 발생하긴 한다.
그래 색이 변하긴 했다. 하지만 원하던 결과는 아니다.
2-2) js링크 주석처리
기존에 있는 코드들을 삭제하기엔 무서워서 모두 주석처리로 하였는데, 이 과정에서 내가 누락한게 있지는 않을까 꼼꼼히 살펴봤다.
일단 <head> 영역에서 기존에 사용하던 하이라이트가 css로 연결되어 있었다. 이걸 해제해줬다.
다크모드시에는 하얀색으로 일반모드일 때는 검은색으로 나타나게 되어있는데 맥 코드블럭을 쓰면 배경이 검은색이기 때문에 스킨이 다크모드인지 아닌지와 큰 연관이 없어서 해제해주는게 맞는 것 같다.
하이라이트 링크를 해제하면 다른 하이라이트 링크를 찾아서 가져오던가 해야한다.
안그러면 이렇게 가독성 떨어지는 코드블럭이 되는거였다. ㅎㅎ 적용해보고 깨달았다.
주석처리 한건 해제 해줬고
script에서 드래그로 표시한 해당 부분을 보면 다크모드일때나 아닐때나 모두 다크모드로 설정되도록 변경했다.
성공적으로 하이라이트 적용 완료!
2-3) 내부 스크립트로 작성 해보기
조금조금씩 미묘한 변화가 있긴 하지만 아직도 한참이나 부족하다. 일단 가장 중요한 맥 상단바가 보이지 않는다.
이 부분은 javascript로 codeHeader라는 클래스의 html코드를 작성하여 code영역의 ::before 로 생성하여 붙여 넣어줬고, 추가적으로 css를 이용해 꾸며준 부분이다.
모양이 이상하다던가 색이 이상하다 등의 문제 이전에 애초에 자바스크립트로 추가한 코드가 적용이 되어있지를 않다는 소리다. 그 말인 즉 js가 적용이 안된 것 같다라는 결론으로 도달했다.
이것저것 시도 해보다가 이건 정말 하고 싶지 않았지만 내 미적인 만족도를 위해 시간을 너무 뺏기는 것 같아서 결국 import 방식이 아닌 html 내부에 스크립트로 작성했다.
코드가 엄청 긴건 아니지만 결국 한줄 Import에 비교하면 아주 지저분해졌다.
2-4) load 함수 이용하기
이대로 종료하기 전에 공식 블로그를 한번 더 읽어보니 아래와 같은 QnA 글이 있었다.
정확한 원리 파악은 힘들지만 4.1v 으로 업로드 하면서 이미지 렌더링 방식을 변경했고 그로 인해서 script 사용시 문제가 있었던 것 같다. 이 부분을 해결하기 위해 4.0v으로 스킨을 다운그레이드 하기에는 이미지 로딩을 빠르게 하여 블로그 속도를 개선하는건 엄청 큰 장점이여서 포기하지 못하겠고 아래 제시한 방법을 사용해서 해결했다.
즉 <script>는 defer를 이용해서 불러오면 불러와지는게 맞고 (이전부터 defer로 가지고 오긴 했다.)
추가로 내부 스크립트에 load 이벤트를 등록해서 사용하는 방법을 그대로 따라 해봤다.
2-4-1) 일단 기존 둉이님이 제공했던 스크립트를 아래와 같이 수정했다.
function macSkin(){
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);
}
}
for (const codeBlock of codeBlocks) {
const codes = codeBlock.innerHTML.match(/(.*)(\n|.*$)/g);
const processedCodes = codes.reduce((prevCodes, curCode) => prevCodes +
`<div class="line">${curCode}</div>`, '');
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">${processedCodes}</div>`;
const codeHeader = `
<div class="code-header">
<span class="red btn"></span>
<span class="yellow btn"></span>
<span class="green btn"></span>
${copyButton}
</div>`;
codeBlock.innerHTML = codeHeader + codeBody;
}
}내가 추가적으로 작업한건 없고, 다만 전체 스크립트를 macSkin()이라는 함수 안으로 넣어줬다.
수정한 .js 파일은 다시 티스토리 스킨에 업로드!
2-4-2) html에 스크립트 붙여넣기
<script defer src="./images/codeblockStyle.js"></script>
참고로 파일명을 내가 변경한게 있으니 그대로 복사 붙여넣기 쓰면 오류가 생긴다. 파일명 확인하기.
2-4-3) load 함수 이용해서 macSkin() 함수 호출하기
<script>
window.onload = function(){
macSkin();
}
</script>이렇게 하면 스킨 변경 완료다. 참 결과를 두고 보면 별게 아닌게 되는데 오랫동안 붙잡고 있게 된다. 허망하다.
내부 스크립트를 작성하는거랑 비교하면 훨씬 깔끔하게 마무리 됐다.
3) 스킨 추가 수정하기
적용은 완료 됐지만 추가적으로 수정하고 싶은 부분 몇개가 있어 수정했다.
3-1) 빈줄 출력 없애기
입력한 코드보다 라인이 한 줄씩 더 생긴다. 한줄을 입력하면 라인 2개 3줄을 입력하면 라인 4개 이런식이다.
#수정 전 코드
const processedCodes = codes.reduce((prevCodes, curCode) => prevCodes +
`<div class="line">${curCode}</div>`, '');
#수정 후 코드
const processedCodes = codes.reduce((prevCodes, curCode, counter) => {
if (counter == codes.length - 1) {
return prevCodes;
} else {
counter += 1;
return prevCodes + `<div class="line">${curCode}</div>`
}
},'');자바스크립트에서 위 코드를 아래 코드로 변경해주면 해결 된다.
3-2) 상단 헤더부분 줄이기
겨우 한줄 코드를 작성할 때도 상단표시줄이 두꺼워 꽤나 많은 자리를 차지한다. 좀 줄여도 괜찮을 것 같아서 수정했다.
css를 보면 헤더부분에 따로 높이 지정이 된건 아니고 버튼의 높이 + 패딩 값으로 이루어져있다.
.hljs .code-header {
display: flex;
align-items: center;
padding: 3px 14px 3px !important;
background-color: #434041;
border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
border-radius: 50%;
width: 12px;
height: 12px;
margin: 0 5px;
}그래서 버튼 크기를 12px로 줄여주고 Padding값은 좌우는 그대로 놔두되 위 아래를 3px로 변경해줬다.
전후를 비교하면 확실히 불필요한 공백이 많이 줄어들었다.
3-3) 그림자 만들어주기
초기 배포하신 분의 적용사례를 보면 그림자가 적용되어 있다. 또 맥 사용자로써 맥에서의 파인더부터 이미지까지 모든 창에 그림자가 생기긴 한다. 그러니 지금 내 블로그에 적용된건 뭔가가 틀어져서 그림자가 제대로 적용되지 않은 상태인거다.
이것저것 확인해보니 그림자는 제대로 적용이 되어있는게 맞았다.
모서리 부분을 자세히 살펴보면 옅은 회색이 보인다. 저게 box-shadow로 준 그림자다.
pre 안에 code 태그가 있고 code영역에 그림자를 지정했는데 pre태그에 overflow 속성때문에 가려진 거다.
overflow: visible;위 속성값을 pre태그에 붙여 넣어주면 된다.
그럼 자연스러운 그림자 생성까지 완료!
참고 블로그
[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기
글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사
guiyomi.tistory.com
[블로그] 티스토리 블로그 코드블럭 맥 스타일로 변경하기
블로그 코드블럭을 예쁘게 보이는 것을 중요하게 생각한다. 맥 스타일로 코드블럭을 꾸미는 것이 예쁘게 보여, 한 번 시도해 보았다. https://guiyomi.tistory.com/132 [티스토리 블로그 테마] - 1. 코드 블
knewnew.tistory.com
