[티스토리] 코드블럭 편집하기 완결판 - 라인넘버 추가, 숫자추가, 폰트추가, 테마, 글자크기, 코드블럭 모서리 편집

개요

우선 티스토리에서 기본적으로 제공하는 코드 블록 플러그인을 사용 시 코드 크기도 작고 모서리도 편집 못하고, 라인 넘버도 없어서 많은 디자인적인 제약이 있습니다.

그래서 이번포스트에서는 아래와 같이 커스텀 된 코드 블록 테마를 티스토리에 적용해보겠습니다.

class MainActivity : AppCompatActivity() {
 
    val TAG = "MainActivity"
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
}

필요한 Highlight 파일들 업로드

2가지 파일을 티스토리에 업로드해야합니다.

1. highlight.js

2. [코드 블록 테마]. min.css

->업로드

만약 저와 같은 테마를 사용하시겠다면 1 2 3을 스킵해주시고 업로드로 가주세요(업로드에 파일 첨부하였습니다. )

1. highlight.js

highlight코드 블록을 쓰기 위한 js파일입니다.

먼저 이 링크로 들어가 주세요 https://highlightjs.org/download/

링크로 들어가시면 아래와 같이 언어를 선택하 실수 있습니다. 저는 Common에 있는 것 모두 선택하였습니다.

그리고 다운로드해서 zip 파일을 풀어 주시면 아래와 같은 파일들이 나옵니다.

그리고 빨간 박스로 하이라이트 된 저 파일이 우리가 티스토리 스킨 편집기에서 올려야 할 파일입니다. 업로드 전 우선 hightlight.js를 바탕화면에 복사해놓겠습니다.

2. [코드 블록 테마]. min.css

코드 블록 테마 파일이 필요합니다.

모든 테마 파일들은 여기 styles에 있습니다.

저는 vs2015.min.css를 사용해주었습니다. 이 파일 또한 업로드 전 바탕화면에 따로 구비해두겠습니다.

다른 테마를 사용하고 싶으시다면 이 링크에서 데모 버전을 확인하셔서, 이름을 찾은 후 style폴더 안에서 같은 이름에 파일을 찾아서 쓰시면 됩니다. https://highlightjs.org/static/demo/

-> 업로드

2가지 파일이 모두 준비가 되었다면 이제 티스토리 스킨 편집기에 업로드하면 됩니다.

업로드해보겠습니다. 블로그 관리 > 꾸미기 > 스킨 편집> html 편집 > 파일 업로드

파일 추가를 해서 모아둔 3개 파일을 업로드해주세요. 그리고 적용을 눌러 마무리해주세요.

html 편집 - highlight.js 추가, 코드라인마다 숫자 추가, 폰트 추가(옵션)

먼저 html을 편집해주겠습니다. 파일 업로드 옆에 있는 html편집기로 이동합니다. 그리고 <head>를 찾습니다.

그리고 head 끝에 아래 코드를 복사해서 붙여 넣겠습니다.

<!--Syntax Highlighter-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>
<!-- Line Number 적용 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
 </script>

만약 저와 같은 폰트를 사용하시겠다면, 아래 코드를 복사해서 다시 head문 끝에 넣어주세요.

<!-- 코드에 font적용 -->
<link href='https://fonts.googleapis.com/css?family=Overpass Mono' rel='stylesheet'>
<style>
    pre>code {
        font-family: 'Overpass Mono' !important; 
        font-size: 14px !important;
    }
</style>

다른 폰트를 원하시면 이링크로 들어가셔서 원하시는 폰트를 찾은 뒤 https://fonts.google.com/ 아래 이미지처럼 빨간 사각형을 그린 부분을 복사해서 대신 붙여 넣으시면 됩니다.

아래 이미지는 완성본입니다.

1. hilighter.js를 불러온 것이고

2. line Number를 적용하기 위해

3. font적용한 것입니다.

html 편집이 끝나면 적용 버튼을 눌러 마무리해주세요.

CSS로 디자인 편집

코드 블록에 둥근 모서리와 Line Number를 편집해보겠습니다.

CSS 편집기를 들어가신 후 가장 아래로 이동해주세요.

저와 같은 디자인을 원하면 CSS 끝에 아래 코드를 복붙 해주세요.

/* Line Number CSS */
/* for block of numbers */
.hljs-ln-numbers {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	color: #B5B5B5;
	border-right: 1px solid #B5B5B5;
	vertical-align: top;
	width: 20px;
	padding-left: 0px;
}
 
/* your custom style here */
.hljs-ln td.hljs-ln-code {
	padding-left: 15px;
}

/*custom codeblock rounding*/
.entry-content pre code.hljs {
	padding: 10px; margin: 15px 0; max-width: 100%; overflow-x: auto; overflow-y: hidden;  border-radius: 7px; line-height: 130%;
}

위에 CSS 코드를 조금씩 변경하셔서 커스터마이징 하셔도 됩니다. 끝난 후 적용을 눌러주세요

주의

만약 모두 적용을 눌렀는데 아래와 같이 테이블이 보인다면

CSS 편집기로 돌아가셔서 ctrl + F를 눌러주셔서. entry-contnet를 찾은 후 테이블을 설정하는 곳에서 부등호를 아래와 같이 넣어주면 됩니다.

참고

highlight.js demo

highlightjs.org

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (2) - 라인 넘버, 폰트 설정

전에 포스팅한 코드 블럭 하이라이트에 이어서 라인 넘버 설정 방법을 공유한다. 코드 블럭 하이라이트는 이 글을 참고하길 바란다. 2021.04.03 - [기타] - 티스토리 코드 블럭 하이라이트 및 라인

one-hour.tistory.com

Tistory 블로그 꾸미기 - Highlight.js 적용

Tistory 블로그 Highlight.js 플러그인 적용 목차 개요 Tistory 플러그인 Highlight.js 적용 방법 추가 개요 블로그에 Highlight.js라는 Syntax Highlighter를 적용해보자. Tistory 플러그인 블로그/manage/plugi..

boltlessengineer.tistory.com

'유틸리티' 카테고리의 다른 글

[Adsense] Tistory 블로그 광고 승인 팁, 거절이유 - 승인대기시간, 콘텐츠 없음 뜻 (0)	2021.06.29

개요

필요한 Highlight 파일들 업로드

html 편집 - highlight.js 추가, 코드라인마다 숫자 추가, 폰트 추가(옵션)

CSS로 디자인 편집

주의

참고

'유틸리티' 카테고리의 다른 글

티스토리툴바