HTML <body>태그가 끝나는 </body> 위에 붙여넣기
<!--코드블럭 언어명,열기,닫기,줄바꿈 시작-->
<style>
.codeLabel {
position: relative;
margin: 10px 0 0;
}
.codeLabel * {
user-select: none;
cursor: pointer;
font-size: 13px;
}
.codeLabel > div {
display: inline-block;
color: #ccc;
text-transform: uppercase;
background-color: #282c34;
padding: 6px 10px;
}
.codeLabel span {
color: #555;
margin: 0 0 0 10px;
}
.codeLabel span ~ label {
position: absolute;
right: 0;
top: 6px;
}
.codeLabel span ~ label input {
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
</style>
<script>
$("pre[data-ke-type='codeblock']").each(function() {
var showTxt = "열기", hideTxt = "닫기", pre = this;
var code = this.dataset.keLanguage;
var $labelDiv = $("<div>");
var $labelBtn = $("<span>");
var $wrapBtn = $("<label><input type='checkbox' checked='checked'> 줄바꿈</label>");
var $code = $(this).find("code").first();
var codeHtml = $code.html();
if (codeHtml.search('<hide/>\n') > -1 || pre.dataset.hide) {
$code.html(codeHtml.replace('<hide/>\n',''));
$labelBtn.text(showTxt);
$wrapBtn.hide();
$(this).hide();
$(this).attr('data-hide', 1);
} else {
$labelBtn.text(hideTxt);
$(this).show();
}
$labelBtn.on("click", function() {
var txt = $(this).text();
$(this).text((txt==showTxt)?hideTxt:showTxt);
if (txt==showTxt) {
$wrapBtn.show();
$(pre).removeAttr('data-hide');
} else {
$wrapBtn.hide();
}
$(pre).toggle();
});
$labelDiv.on("click", function() {
$labelBtn.triggerHandler("click");
});
$wrapBtn.find("input").first().on("click", function() {
$(pre).css({'white-space': (this.checked)?'pre-wrap':'pre', 'word-wrap': (this.checked)?'break-word':'normal'});
if (typeof setLnHeight === 'function') {
setLnHeight(pre);
}
});
$labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
$(this).before($codeLabel);
});
$(window).on("load", function() {
if ($('code').length) {
var col = window.getComputedStyle($('code').first()[0], null).getPropertyValue("color");
var bgc = window.getComputedStyle($('code').first()[0], null).getPropertyValue("background-color");
$('.codeLabel div').css({'color': col, 'background-color': bgc});
}
});
</script>
<!--코드블럭 언어명,열기,닫기,줄바꿈 끝-->
참고 :
'tistory' 카테고리의 다른 글
| [Tistory] 티스토리 글 content 안의 이미지에 테두리 넣기 (0) | 2022.08.25 |
|---|---|
| [티스토리 코드블럭] 코드블럭 테마, 라인넘버 설정하기 (0) | 2022.07.20 |
| [티스토리 스킨] 본문 기본 글자 색 설정 변경하기 (0) | 2022.07.18 |
| [티스토리 스킨] Book Club 스킨 header 색, 블로그 이름 색, 검색창 색 변경하기 (2) | 2021.11.03 |
| [티스토리 스킨] Portfolio 스킨 리스트 사진 삭제하기 (0) | 2021.10.27 |
댓글