티스토리 코드블럭 오른쪽 위에 언어 표기하기

저는 간단하게 사용했던 언어와 나중에 해보고싶은 언어 정도만 해놓았는데,

해당 부분은 클래스명을 찾아서 

스킨편집 -> html 편집 -> css  에 작성하시면 됩니다.

 

저랑 스킨이 달라서 적용이 안되는 부분이 있을 수도 있습니다.

(hljs는 highlight.js로 들어가는 친구로 생각이 듭니다. 없으시다면 code의 first child에 적용하는 것도 좋은 방법인거 같습니다.)

pre:has(code.hljs) {
    position: relative;
}
pre code.hljs::before {
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgb(111, 111, 111);
    transition: color .5s;;
}
pre.html code.hljs::before {
    content: 'html';
}
pre.css code.hljs::before {
    content: 'css';
}
pre.javascript code.hljs::before {
    content: 'js';
}
pre.sql code.hljs::before {
    content: 'sql';
}
pre.shell code.hljs::before {
    content: 'shell';
}
pre.java code.hljs::before {
    content: 'java';
}
pre.bash code.hljs::before {
    content: 'bash';
}
pre.typescript code.hljs::before {
    content: 'ts';
}
pre.python code.hljs::before {
    content: 'py';
}
pre.kotlin code.hljs::before {
    content: 'kt';
}
pre.go code.hljs::before {
    content: 'go';
}
pre.arduino code.hljs::before,
pre.cpp code.hljs::before,
pre[class="c++"] code.hljs::before {
    content: 'C++';
}
pre.csharp code.hljs::before {
    content: 'C#';
}