티스토리 마크다운 깃헙 (Markdown Github) - 코드블럭 적용 에러 해결법

지난 포스팅에서 설명 드렸듯, 저는 Typora 에 마크다운을 작성해서 티스토리에 붙여넣고 있습니다.

폰트, 이탤릭체, 코드 등 전반적으로 호환이 잘 되는데, 코드블럭은 Typora 입력문과 충돌하는 에러가 있었습니다. 

 

1. 코드 블럭 첫 라인이 자동으로 들여쓰기 될 때, 

 

들여쓰기를 하지 않았는데도 첫줄이 다 바뀌어 있네요. 

 

(1) 수정하고자 하는 페이지에서 F12 (개발자도구) 를 누르면, 오른쪽 페이지가 뜹니다. 

여기서 빨간색 동그라미를 누르면 (Ctrl + Shift + C), html element 들을 확인할 수 있어요. 

 

 

(2) 들여쓰기가 잘못된 블록을 클릭합니다. Padding 이 16px 로 되어 있어서 들여쓰기가 된 것 같아요. 0px 로 수정합시다. 

 

(3) Elements 오른쪽에 보면 Styles 가 보이는데요. pre code.hljs 의 패딩을 바꿔줍니다.

빨간색 16px 를 더블클릭하면 수정할 수 있는 칸이 떠요. 

(4) 0px 로 조정하면, 이렇게 첫 칸 들여쓰기가 사라집니다. 

2. 코드블록의 스타일이 임의로 바뀌는 경우 

 

아래 코드의 경우, 검정색 폰트 코드인데 티스토리로는 빨간색으로 출력이 됩니다. 

코드블럭을 쓸 때 언어를 지정할 수가 있는데, 언어를 지정하지 않아서 생긴 것 같아요. 

 

해당 블록은 Bash 를 썼으니, 언어를 Bash 로 지정해줍니다. 

변경된 Typora 파일을 복사해주면, 원래 의도했던 검정색 폰트가 나옵니다 :)