티스토리 코드블럭 커스터마이징 참고사이트

기존의 좋은 내용의 블로그들이 많아서 참고할만한 사이트들을 소개한다.

google font의 폰트를 넣었고 하이라이팅에서 atom-one-dark를 이용중이다.

 

필자는 마크다운 코드블럭을 사용할때 back quote( ` )를 쓸때 인식이 안되는 문제가 있었는데 밑에 인라인 코드블럭에 관련된 글을 읽으면서 CSS편집을 통해 해결했다. 결국 code태그의 style 속성을 변경한 것인데 ```를 이용해 한 단락으로 만든 곳에도 적용이 되는 것 같지만 기존의 하이라이팅의 스타일이 적용되어 눈에는 보이지 않는 것 같다. 

만약 backquote를 이용한 code 블럭 사용에 문제가 생겼다면 4, 5번의 사이트를 참고해보자

pre, code 이 두가지를 어떻게 독립적으로 만들지는 나중에 고민해보자.

 

1. 기본적인 플러그인 & 하이라이팅을 사용해서 코드 블럭을 꾸미는 법에 대해 알려주는 사이트

티스토리 코드블럭 꾸미기

 

 

2. 구글 폰트 원하는 폰트를 검색할 수 있다. (1번 사이트에 어떻게 활용하는지에 대한 방법이 나와있다.)

 

Google Fonts

 

 

 

 

3. 하이라이팅을 이용한 코드블럭 커스터마이징 - Demo page와 다르게 나올때 pre, code 태그를 통한 해결법

티스토리 강좌 / 코드블럭으로 코드 입력하고 highlight.js로 예쁘게 출력하는 방법

 

 

4. 코드블럭 ```로 안묶어지는 문제 해결법

티스토리 마크다운 코드 블락으로 보이는 스타일 적용

 

 

5. 인라인 코드 테마 변경법

[Tistory] 인라인 코드 테마 변경하기