티스토리 코드블록만 복사 가능하게 하기

 

티스토리 코드블록만 복사 가능하게 하기

최근 스킨 업데이트를 했더니 코드블록 복사 버튼이 사라졌네요 ㅜㅜ github에서 뭘 받아서 했던 기억이 나는데 컴퓨터도 포맷해서 자료가 남아있질 않습니다. 일단 임시방편으로 코드블록만 복사하도록 해놨습니다.
기록 겸 공유 겸 이번 포스팅에서는 블로그 글에서 코드블록만 복사 가능하게 만드는 방법에 대해 알려드리겠습니다.

오른쪽 클릭 복사 방지

자기 글이 복사되는 게 싫으신 분들이 많으실텐데요. 이건 티스토리 설정 - 플러그인에서 설정할 수 있습니다. 마우스 오른쪽 클릭 방지 플러그인을 사용중으로 바꿔놓으면 됩니다.

제 블로그는 오른쪽 클릭 복사 방지를 해놨더니 코드블록도 복사가 불가능하게 됐습니다. 블로그에서 저도 코드를 가져다 쓰는 입장이라 불편합니다. 그래서 코드블록 복사버튼을 만들었던건데... 아직 못 찾아서 임시로 코드블록만 복사하도록 만들었습니다.

코드블록만 복사 가능하게 하기

일단 코드블록이라도 복사가능하게 만들겠습니다. 간단합니다. html에서 예외를 두겠다는 명령어를 써놓습니다.
설정 - 스킨 편집 - html 편집 - CSS에 들어가서 다음을 입력합니다. 

<!--코드복사 허용-->
code {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
<!--코드복사 허용-->

 

• user-select 속성은 사용자가 마우스로 텍스트를 드래그하여 선택할 수 있는지를 결정합니다.(복사 가능)
• -webkit-, -moz-, -ms-는 각각 Chrome/Safari(웹킷), Firefox(모질라), Edge/IE(마이크로소프트) 브라우저에서 호환성을 유지하기 위해 사용하는 벤더 프리픽스(Vendor Prefix) 입니다.
• user-select : text 명령으로 code 태그인 경우 복사가능하게 하고, body 태그 안에 있는 내용은 user-select : none으로 복사 불가능하게 하겠다는 얘기입니다.

마치며

임시로 복사가능하게 해놨지만 버튼 만드는 방법을 빨리 찾아야겠습니다.

 

함께보면 좋은글

 

[티스토리 팁] 티스토리 폰트 변경하기(feat.눈누)

 

티스토리에 수식 바로 쓰기