방법 1: 티스토리 기본 하이라이트
✔︎ 매우 간편하게 적용 가능
✔︎ 7개 테마 사용가능
✔︎ 20개 프로그래밍 언어 하이라이트 스타일 지원
방법 2: Highlight.js 사용
✔︎ 관리페이지에서 HTML / CSS / 파일업로드 작업 필요
✔︎ 246개 테마 사용가능
✔︎ 192개 프로그래밍 언어 하이라이트 스타일 지원
티스토리 기본 하이라이트
1. 플러그인 활성화
티스토리 관리자 페이지 → 플러그인 → 코드 문법 강조 (Syntax Highlight) 적용
2. 하이라이트 적용하기
티스토리 글 작성 → 코드블럭 → 코드블럭 삽입
글 작성을 완료하면 코드 하이라이트가 적용된 것을 확인할 수 있습니다.
✔︎ 코드 하이라이트 적용 완료
Highlight.js 사용
1. 기존 플러그인 해제
❗️ 코드 문법 강조 플러그인을 사용하지 않는다면 이 단계는 생략해주세요
티스토리 관리자 페이지 → 플러그인 → 코드 문법 강조 (Syntax Highlight) 해제
❗️ 티스토리 기본 코드 하이라이트 기능 사용을 해제하고 사용 가능합니다.
2. Highlight.js 다운로드
📎 https://highlightjs.org/download/ 다운로드 페이지에 접속합니다.
버튼을 눌러서 Highlight.js 를 다운로드 받습니다.
3. 파일 업로드
티스토리 관리자 페이지 → 스킨편집 → HTML 편집 → 파일업로드 탭
다운로드 받은 파일중에서 highlight.min.js 와 styles/atom-one-dark-reasonable.css 를 업로드 합니다.
4. HTML 편집
티스토리 관리자 페이지 → 스킨편집 → HTML 편집 → HTML 탭
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/atom-one-dark-reasonable.min.css">
<script>hljs.highlightAll();</script>
</head></head> 바로 위에 코드 추가해 줍니다. 저는 atom-one-dark-reasonable 테마를 적용시켰는데 다른 테마를 원하시면 📎 https://highlightjs.org/static/demo/ 에서 원하는 테마를 고르고, 다운로드 받은 파일중에 styles/ 폴더 안에서 해당 스타일 파일을 찾아서 업로드하고 파일 이름을 href 값에 적용시켜줍니다.
5. CSS 편집
티스토리 관리자 페이지 → 스킨편집 → HTML 편집 → CSS 탭
code {
tab-size: 4;
font-size: 14px;
margin-top: 12px;
margin-bottom: 12px;
padding: 14px 16px;
background-color: #F1F1F1;
border-radius: 7px;
}취향에 맞게 세부 스타일을 꾸며줍니다.
6. 하이라이트 적용하기
티스토리 기본 코드 하이라이트와 같은방식으로 코드를 추가해 줍니다. 다만 기본 하이라이트가 지원하지 않는 프로그래밍 언어는 아래와 같이 HTML 코드를 수정해 줘야합니다.
우선 기본모드 → HTML 으로 모드를 변경해줍니다. 그리고 <pre ... 로 시작하는 코드블럭 코드를 찾아서 class 에 프로그래밍 언어 이름을 추가해주면 됩니다.
❗️주의: 추가한 language-applescript 옆에 xml 처럼 자동으로 생성되어있는 코드를 삭제하면 모드 전환시 초기화되어 버리기때분에 xml 은 남겨둬야합니다.
글 작성을 완료하면 코드 하이라이트가 적용된 것을 확인할 수 있습니다.
✔︎ 코드 하이라이트 적용 완료
댓글