본문 바로가기

블로깅

Typora 로 Tistory 포스팅하기

이전 글에서 Typora를 이용하여, md 글을 쓴 뒤, 이를 티스토리에 올리는 방법을 포스팅 했었다.

해보면 알겠지만, 외부 css 를 tstory 에 추가하는 것 뿐 아니라 이런 저런 js파일 추가... Typora로 쓴 내용을 html로 내보낸 후에 복사하기 등 여하튼 절차가 상당히 귀찮았던거는 사실이다.
더군다나 제일 짜증났던 것은, 이전 방식(외부 css, js를 추가하는 등) 으로 하면 Typora 에서 보이는 화면과 안 맞을 때가 있다. 예를 들면, ####이나 ##### 등이 적용이 안되고, code highlightening 도 안되는 경우가 있었다. 이를 또 티스토리 에디터에서 일일이 수정하기란 여간 번거롭다.

이에 대해 어떻게 할까.. 고민하던 중, 보다 쉽게 Typora로 tistory에 글을 쓰는 방법을 발견했다.

1. 먼저 Typora로 글을 쓴다.

Typora로 글을 쓰려는 이유는, 무엇보다 md 문법을 이쁘게 잘 볼 수 있기 때문이다. 만약 아직 md 에디터를 찾고있고, Typora를 써보지 않았다면 꼭 써보길 추천이다!

다음과 같이 쓰고싶은 글을 먼저 쓰자.

2. Typora 환경설정 하기

메뉴에서 '파일 - 환경설정'을 들어가보자. 생각보다 많은 환경설정이 있는데, 필요하다 싶은 부분은 알아서 설정해주면 된다.

가장 중요한 부분은, '에디터 > 복사시 기본 동작 > 마크다운을 일반 텍스트로 복사' 에 체크가 풀려있는지 확인한다. 아래와 같이 체크가 풀려있어야 한다.

3. Typora 에디터에서 그대로 복사해서, 티스토리 에디터로 그대로 붙여넣는다.

이게 아주 재밌는 부분인데, Typora에서 그대로 복사해서 가져오면, 문법 그대로의 텍스트로 복사되어서 붙여질 것 같지만, 아니다. 위에 설정에서 '마크다운을 일반 텍스트로 복사'를 해제했기 때문에, 티스토리 에디터에 붙여넣기한 글은 html 코드로 완성되어져 있다. 실제로 아래와 같이 된다.

놀랍게도, 마크다운 모든 문법부터, code syntax higlightening 까지 Typora 에디터에 보이는 그대로 가져온다.

html 보기로 저 글을 보게 되면, Typora 에디터에서 복사해올 때, Typora 에디터에서 적용한 css 를 html inline style로 적용되어 html 로 코드 속에 남게된다. 그래서 html 코드가 전반적으로 커지기는 하지만, 그래도 Typora 에디터에서 보았던 스타일 그대로 가져올 수 있기 때문에, 훨씬 편리하다.

한 가지 궁금한건, Typora 에디터에서 복사한 글을, 다른 에디터에 붙여넣으면 티스토리 에디터처럼 html화 되지 않고, 그냥 마크다운 텍스트로만 남는다. 이에 대해 아시는 분 있으면 좀 알려주세요... 여러가지 시도 해봤는데, 아직도 그 이유를 모르겠다.

아직 문제는, Tistory 기본 글꼴인 'Noto Sans' 가 적용되지 않았다는 점이다. 이를 해결해보자.

4. Typora 글꼴 설정하기

Tistory는 기본 글꼴로 'Noto Sans' 를 사용하고, Typora 에디터는 'Open Sans' 를 사용한다. Typora 에서 '파일 - 환경설정 - 테마 - 테마폴더 열기' 를 누르면, Typora theme를 설정하는 css 파일을 담은 폴더가 뜨는데, 이 css 파일에서 확인해볼 수 있다. 나는 Typora 에서 github theme 를 쓰므로, 'github.css' 를 열어보았다.

위와 같이 github theme 를 나타내는 css 설정을 볼 수 있다. 중간에 body {...} 부분에 font-family를 보면 기본 font가 'Open Sans' 임을 알 수 있다. 이제 이를 'Noto Sans' 로 바꿔주기 전에, 먼저 'Noto Sans' 폰트를 다운받자.

Noto Sans 다운로드 : https://www.google.com/get/noto/#/family/noto-sans-kore

이제 저 github.css 파일 말고, 별도로 css 파일을 만들어 여기다가 덮어쓸 스타일만 작성할 건데, 이렇게 해도 적용이 된다.

먼저 github.css 와 같은 디렉토리에 base.user.css 를 만든다. 파일을 열고 다음과 같이 작성한다.

body {  
    font-family: "Noto Sans", "Noto Sans CJK kr";  
    line-height: 1.8;  
    font-size : 10pt;  
}

나는 github theme 의 기본 줄간격인 1.6 이 답답해서 1.8로 추가적으로 바꿨다. 글꼴 사이즈도 10pt로 바꿔주었다.

이제 이 파일을 저장하고, Typora를 껐다가 다시켜보자. 이제, 'Noto Sans' 폰트가 Typora 에디터에 적용되었을 것이다!

다시, 이전과 같이 그대로 복사하여 Tistory 에디터에 붙여 넣으면, Tistory 기본 폰트인 'Noto Sans' 로 적용되어있음을 볼 수 있다.

Typora 글꼴 바꾸기 : https://bundokim.tistory.com/43

+. Tistory 에디터에서 일부 적용안되는 스타일들을 위해.

쓰다보니, Tistory 에디터랑 Typora 에디터랑 일부 안맞는 스타일이 있었는데, 대표적으로 인용(blockquote) 이랑 리스트(li) 가 그렇다. 위와 같이 하면 일반적인 글들(p 태그들) 은 적용이 되지만, blockquote 과 li는 tistory 스킨 css 에 있는 스타일로 덮어씌워진다. 크롬 개발자 모드로 티스토리 스킨 css 스타일을 확인해보니, 이런식으로 되어있었다.

blockquote p {  
    font-size : 18px;  
...  
}

Typora 에서 복사하여 붙여넣으면 blockquote 까지만 inline 태그로 스타일이 적용된다. 그런데, Tistory 에서는 blockquote p 에서 스타일을 적용시켜버리니, 자연스럽게 우리가 Typora로 설정한 스타일이 덮어씌워지는 것이다. 이를 위해, 기존의 base.user.css 에 다음을 추가하였다.

body {  
    font-family: "Noto Sans", "Noto Sans CJK kr";  
    line-height: 1.8;  
    font-size: 10pt;  
}

/\* for Tistory view \*/  
    blockquote p, ol li p, ul li p{  
    font-size: 10pt;  
}

이렇게 저장하고, Typora를 다시 실행시킨 다음에, 복사하여 Tistroy 에디터에 붙여넣어주면 원하는 스타일대로 적용된 것을 볼 수 있다.

사실, Tistroy css 와 Typora css 간 불협화음 되는 부분이 있어 이런 일이 일어나는데, 사용하면서 발견하는대로 다음 github repo에 올려두려고 한다. 이 외에도 Tistory에서 안이쁘게 나오는 부분( 우리가 Typora 스타일로 의도하지 않은 스타일 )이 발견되면 issue로 던져주시면 좋겠다.

Typora 스타일을 tistory 스타일로 적용시키는 소스 링크 : https://github.com/heumsi/typora-tistory-style