<!DOCTYPE html>
<html>
<head>
	<title>test html 입니다.</title>
</head>
<body>

</body>
</html>

티스토리 블로그에 코드를 공유 하는 글들을 보면 위의 예시 처럼

Editor tool 과 동일하게 high light 도 들어가 있고, Line Number 까지 들어가 있는 글이

가독성이 좋았고 보기 편했다.

 

티스토리는 현재 코드 블록이라는 것을 제공해서 손쉽게 코드를 넣을 수 있게 제공을 하고 있다.

다만 기본 테마가 너무 못생겨서 highlight 와 line number 을 새로 추가해줘야한다.

 

다른 블로그에도 글들이 많이 있어 다른 글들을 보아도 좋으나

초보자의 입장에서 처음 부터 코드블럭을 넣고, 라인넘버까지 넣는 일련의 과정을 한번에 정리해 보았다.

 

1. 코드 블럭을 통해 코드 추가.

1. 글쓰기를 누르고 난 후 상단 메뉴를 보면 코드 블럭이라는 메뉴가 보이고 클릭을 한다.

2. 노란색깔로 표시된 부분을 누르면 내가 작성한 코드의 언어를 선택할 수 있다. 그리고 확인을 누르면

아래와 같은 형식으로 보이게 되고 완료를 누르면 최종적으로 코드가 코드블럭의 기본 테마 형식으로 보이게 된다.

<결과>

기본 코드 블록의 결과는 정말 볼품이 없다. 이제 HighLight 를 추가해보자.

 

2. Highlight.js 적용하기

Highlight.js 는 블로그 관리 에서 플러그인을 통해 적용하는 방법과 HTML 을 통해서 직접 적용하는방법이 있다.

플러그인을 활용한 방식은 간단하므로 설명을 생략하고

직접 사이트에서 받아와 HTML에 적용하는 방법을 설명 하겠다.

 

 

테마는 아래의 사이트를 보고 고르면 된다.

나는  AndroidStudio 테마가 익숙하므로 AndroidStudio 테마를 선택했다.

https://highlightjs.org/static/demo/

테마를 선택했다면 이제 HTML에 적용해보자.

 

내 블로그의 HTML 편집에 들어가서 </head> 위에 아래의 코드를 복사 붙여넣기 해주면된다.

그리고 선택한 테마이름에서 대문자는 소문자로, 띄워쓰기는 -로 바꿔주고 아래의 androidstudio 부분 대신

입력해주면 된다.

예)

'A 11 Y Dark' - > a-11-y-dark

cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a-11-y-dark.min.css">

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

 

초보자를 위해 과정을 스크린샷했다.

1. 블로그 관리 페이지에서 [꾸미기]->[스킨편집] 을 누른다.

 

2. 오른쪽 [html편집] 버튼을 누른다.

 

3. </head>를 검색 하여 테마 이름을 수정하여 블록 영역처럼 </head>위에 붙여 넣는다.

4. 저장을 해보면 위와 같은 결과를 얻게된다.

 

여러분과 결과물이 다를 수 있는데 나는 추가적으로 css에 들어가서 <code> css의 font size를 13으로 바꾸고, 적용되어 있던 font 를 삭제해줫다.

 

3. LineNumber 추가하기

1. highlightjs-line-number.js 를 다운 받는다. 아래는 git hub 주소이다.

혹은 ----> 이곳  <--- 을 우클릭 하여 다른 이름으로 링크저장을 누른다.

https://github.com/wcoder/highlightjs-line-numbers.js/

 

wcoder/highlightjs-line-numbers.js

Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.

github.com

2. 다운받은 js 파일을 위에 highlight 적용할때 사용한 [html편집] 으로 들어가

상단 [파일업로드] -> [추가]  를 눌러 js 파일을 내 블로그에 추가해준다.

3. js 가 추가가 되었으면 아래의 코드를 highlight 를 적용했을 때와 동일하게 </head> 위에 복사 붙여넣기 해준다.

<script src="./images/highlightjs-line-numbers.js"></script>
<script> hljs.initLineNumbersOnLoad();
	$(document).ready(function() {
		$('code.hljs').each(function(i, block) {
		hljs.lineNumbersBlock(block);
		});
	});
</script>

 

4.

완성되었다. 

 

이제 꾸준히 예제 코드들을 열심히 올려주기만 하면된다.

파이팅

'유용한 팁' 카테고리의 다른 글

Docker를 활용한 Jenkins github CI/CD 파이프라인 구축 예제 ~ 2 (file 압축 및 github push)  (0) 2020.05.25
Docker를 활용한 Jenkins github CI/CD 파이프라인 구축 예제 ~ 1 (젠킨스 업데이트 포함)  (0) 2020.05.18

+ Recent posts

티스토리툴바