Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

web sprit

[Tistory] 새로워진 티스토리 코드 넣을때 '코드블럭' 사용. 본문

Tistory 관리

[Tistory] 새로워진 티스토리 코드 넣을때 '코드블럭' 사용.

커드만 2019. 6. 30. 14:42

저 같은경우 개발언어를 사용하여 블로그에 글을 올릴경우가 많은데
새로워진 글쓰기 화면이 여간 적응이 안되었습니다.

 

기존 블로그에 소스코드를 넣을때
Color Scripter 사이트를 이용하여 넣곤 하였는데, 
새로워진 티스토리 에디터 기능으로 '코드블럭' 이라는 메뉴를 알게 되었다.

매우 심플하고 간단해서 바뀐 부분중에 제일 장점이란 생각이 듭니다.
그럼 적용하는 방법에 대해 알아보도록 하겠습니다.

 

글을 쓰는 상단에 보면 여러가지 에디터 기능의 버튼들이 존재합니다.
그중에서 점3개(더보기) 모양을 클릭해 줍니다.

코드블럭이라는 메뉴가 존재하는데 클릭!

그럼 팝업으로 코드를 넣을 수 있는 화면이 나타납니다.
자신이 작성하는 언어의 개발언어도 선택할 수 있습니다.

 

지금은 위의 사진처럼 저런 언어를 선택하여 올릴 수 있네요~

 

지금 제가 주로 사용하는 코드는 HTML, CSS, JavaScript 정도인데
하이라이트가 어떻게 적용되어 화면에 나오는지 확인해 보겠습니다.

 

아래는 코드블럭을 이용하여 등록한 에디터 화면입니다.

 

아래는 실제 블로그 적용화면 입니다.

 

보시는 바와 같이 블로그에 적용했을때는 하이라이트 표현이 안됩니다.
그럼 블로그에도 하이라이트를 적용하려면 어떻게 해야 할까요??

 

외부 라이브 러리를 이용하여야 합니다.

 

highlightjs/highlight.js

Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.

github.com

Highlight.js 라는 라이브러리를 GitHub 에서 다운받거나 
아래와 같이 블로그 관리에서 스킨편집을 통해 <head>태그안 끝나는 부분(</head>)에 적용해 주면 됩니다.
블로그 관리의 스킨편집은 
블로그 관리홈으로 이동 > 꾸미기 > 스킨편집 > HTML 편집 클릭
그럼 HTML, CSS, 파일업로드 할 수 있는 화면이 나옵니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

글 저장 후 다시 확인하면 하이라이트가 적용된것을 확인 할 수 있습니다.
지금 제가 소스코드 부분에도 하이라이트가 적용되어 있는데

 

제가 적용한 화면과 색이 조금 다를 수 있습니다.
이 부분은 제가 따로 스킨편집에서 css 를 따로 변경하여 에디터에서 편집했을때의 색과 동일하게 작업하여 그렇습니다.
다른색깔을 원하신다면 본인의 블로그의 css 편집하는방법으로 사용해보시면 좋을것 같습니다.

 

더 좋은 의견이 있다면 아래 댓글 부탁 드립니다.
감사합니다~ ^^

저작자표시 비영리 변경금지

'Tistory 관리' 카테고리의 다른 글

[Tistory] 새롭게 바뀐 티스토리 예전 에디터로 변경하기  (0) 2019.07.07
[Tistory] Tistory 복사금지 및 우클릭 설정하는 법  (0) 2018.07.30
[Tistory] 2차 도메인 설정(CNAME 레코드 등록)  (0) 2016.12.26
[Tistory] 도메인 구입과 티스토리 연결 방법 (가비아)  (3) 2016.04.09
닫기
공유하기 링크
'Tistory 관리' Related Articles more
Comments