서근 개발노트

티스토리에 팔로잉

FRONT-END/CSS

(티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기

서근

4년 전

QUOTE THE DAY

“ 중요한 건 당신이 어떻게 시작했는가가 아니라 어떻게 끝내는가 이다. ”

- Andrew Matthews (앤드류 매튜스)

목차 

코드블럭 언어명 표시 및 접기 버튼 추가

이번에는 티스토리에서 코드블럭을 사용할때 상단에 어떤 언어를 사용하고 있는지를 확인할 수 있는 스크립트를 구현하고 적용하는 방법에 대해 알아보겠습니다.

만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스...

seons-dev.tistory.com

코드블럭 언어명 표시 및 접기 버튼 추가

사용법은 아주 간단합니다. 아래 코드를 </body> 바로 위에 <script> </script> 로 감싸서 넣어주기만 하면 됩니다.

사용방법

html

UNFOLDED

 <html>
  <header>
        ...
       </header>
 
   <body>
       
       <!--이곳에 추가-->
       
        </body>
 </html>

코드

html

UNFOLDED

 <!--코드블럭 언어표시-->
<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'>");
    var $code = $(this).find("code").first();
    var codeHtml = $code.html();
    if (codeHtml.search('&lt;hide/&gt;\n') > -1 || pre.dataset.hide) {
      $code.html(codeHtml.replace('&lt;hide/&gt;\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");
    });
    $labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
    var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
    $(this).before($codeLabel);
  });
</script>

스타일 설정

이제 사용자의 스킨에 맞게 코드블럭 언어창의 색을 변경해줄 수 있습니다. 아래와 코드를 CSS에 넣어주세요.

css

UNFOLDED

 /*코드블럭 언어 표시*/
  .codeLabel {
    position: relative;
    margin: 10px 0 0;
  }
  .codeLabel * {
    user-select: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .codeLabel > div {
    display: inline-block;
    color: #ccc;
    text-transform: uppercase;
    background-color: #282c34;
    padding: 6px 10px;
  }
  .codeLabel span {
    color: #9c9c9c;
    margin: 10px;
  }
   .codeLabel *:hover {
    color: #ff5544;
  }
  .codeLabel span ~ label input {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

.codeLabel * : 폰트 사이즈 변경

.codeLabel > div : 언어표시창 배경색 및 글씨 색 변경

.codeLabel span : 숨김 / 펼치기 색상 변경

TIP

접힌 상태 유지 방법 1
이미 접힌 상태로 나오길 원하면 코드블럭에 소스 입력 시 제일 첫 줄에 <hide/>라고 넣고 그다음 줄부터 내용을 넣으시면 됩니다.

(또한, 페이지 로딩될때 아예 안 보이게 스킨의 css에서 pre를 찾아 { display: none; }을 추가해주시길 추천합니다.)

swift

FOLDED

 // <hide/> 를 맨위에 추가하여 코드블럭을 접는다.
    
    <---- 이곳에 추가
     
 
 VStack {
   Text("서근블로그")
 }

TIP

접힌 상태 유지 방법 2
글 작성 시 html에서 해당 코드 블록의 <pre> 태그에 <pre data-hide=1>을 추가해주면 동일하게 사용할 수 있습니다.

읽어주셔서 감사합니다🤟

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

이 글이 좋으셨다면 구독 & 좋아요

구독과 좋아요를 눌러주시면 저에게 큰 힘이됩니다.

저작자표시 (새창열림)

'FRONT-END > CSS' 카테고리의 다른 글

(티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) (13)	2022.03.20
(티스토리) 코드블럭에 클립보드로 복사 버튼 추가 (7)	2022.01.21
(티스토리) 본문에 형광펜 효과 주는 방법 (3)	2021.04.15
(HTML/CSS/Javascript) 코드 정리해주는 사이트 모음 (0)	2021.04.15
(티스토리) 스크롤시 부드럽게 이동하기 (4)	2021.04.14

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

'FRONT-END/CSS' 카테고리의 관련 포스팅

티스토리 댓글

깃허브 댓글

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

(티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기

코드블럭 언어명 표시 및 접기 버튼 추가

사용방법

코드

스타일 설정

'FRONT-END > CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<html>
	<header>
	...
	</header>

	<body>

	<!--이곳에 추가-->

	</body>
	</html>

	<!--코드블럭 언어표시-->
	<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'>");
	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");
	});
	$labelDiv.text(code).prop('title', code+' - '+showTxt+'/'+hideTxt);
	var $codeLabel = $('<div class="codeLabel">').append($labelDiv).append($labelBtn).append($wrapBtn);
	$(this).before($codeLabel);
	});
	</script>

	/코드블럭 언어 표시/
	.codeLabel {
	position: relative;
	margin: 10px 0 0;
	}
	.codeLabel * {
	user-select: none;
	cursor: pointer;
	font-size: 0.7em;
	}
	.codeLabel > div {
	display: inline-block;
	color: #ccc;
	text-transform: uppercase;
	background-color: #282c34;
	padding: 6px 10px;
	}
	.codeLabel span {
	color: #9c9c9c;
	margin: 10px;
	}
	.codeLabel *:hover {
	color: #ff5544;
	}
	.codeLabel span ~ label input {
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	}

	// <hide/> 를 맨위에 추가하여 코드블럭을 접는다.

	<---- 이곳에 추가


	VStack {
	Text("서근블로그")
	}

Aug
일	월	화	수	목	금	토
					1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1	1	1	1	1	1	1
1

(티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기

코드블럭 언어명 표시 및 접기 버튼 추가

사용방법

코드

스타일 설정

'FRONT-END > CSS' 카테고리의 다른 글

(티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼)

(티스토리) 코드블럭에 클립보드로 복사 버튼 추가

(티스토리) 본문에 형광펜 효과 주는 방법

(HTML/CSS/Javascript) 코드 정리해주는 사이트 모음

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

코드블럭 언어명 표시 및 접기 버튼 추가

사용방법

코드

스타일 설정