프로그래밍/웹, 네트워크

티스토리 마크다운 언어 쓰기(프로그래밍 코드 양식?)

Hwan2 2020. 5. 16. 00:56
반응형

많은 프로그래밍 관련 글들을 올리실 때 



 요런거??


위와 같은 형식의 글들을 보신적 있으실 겁니다.


아니면 이런거요.



이런거



이런것들을 적용하는 방법에 대해 소개해볼까 합니다.


https://github.com/sindresorhus/github-markdown-css


여기에 있는 css를 가져다 사용하는 겁니다.





우선 티스토리 설정창에 가신 후...




스킨편집 클릭!!








여기까지오면 html 편집기가 열릴텐데 거기서 



 <link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.css" rel="stylesheet">


이걸 복사해서 <head> 뒤에 삽입하면 됩니다.


저는 link가 끝나는 마지막 부분에 삽입했습니다.






그 후 css 로 바꾼 후 맨 아래에 다음 같은 코드를 넣어줍니다.



.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
}
@media (max-width: 767px) {
    .markdown-body {
        padding: 15px;
    }
}







그런 후 적용하고 나오면 됩니다.


이걸 글 쓸 때 어떻게 적용하면 되느냐??






글쓰기에서 글을 대충 쓴 후 저기 보이는 HTML 클릭.


문단 위와 아래에 다음과 같은 코드로 감싸기





 <div class="markdown-body">   </div>



이렇게 감싸주면 됩니다.


그 후 HTML 체크를 풀고 글을 쓰시다가 중간에 원하시는 코드나 머릿말을 넣고싶으시면 다음과 같이 하면 됩니다.


1. HTML 체크를 하여 편집기모드로 들어간다.

2. 넣고 싶은 마크업이 있다면 아래의 테그를 이용한다.



<h1 ~ h6> </h1 ~ /h6>

h1

h2

h3

h4

h5
h6


<pre><code>  </code></pre>

hi



<code> </code>

hi


(요거 <code></code>는 글 작성시 일반 글자처럼 보입니다. 하지만 미리보기로 미리 확인해 보시면 바뀐걸 볼 수 있습니다.



사실 기능이 더 있지만....

솔직히 github에서 사용하는것 처럼 편하게 사용하기엔 다소 무리가 있습니다.


찾아보니 툴을 사용해서 마크업 언어로 미리 작성한 후 html코드로 바꿔서 붙여넣는 방식도 있더군요.


하지만 이정도만 활용해도 저는 충분할꺼라 생각합니다. 







반응형
저작자표시