많은 프로그래밍 관련 글들을 올리실 때
요런거??
위와 같은 형식의 글들을 보신적 있으실 겁니다.
아니면 이런거요.
이런거
이런것들을 적용하는 방법에 대해 소개해볼까 합니다.
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코드로 바꿔서 붙여넣는 방식도 있더군요.
하지만 이정도만 활용해도 저는 충분할꺼라 생각합니다.
'프로그래밍 > 웹, 네트워크' 카테고리의 다른 글
| http와 tcp/ip의 이해 (21) | 2020.10.31 |
|---|---|
| 리틀 엔디언과 빅 엔디언 (0) | 2020.10.22 |
| Restful에 대한 이해하기(Restful 특징) - 4 (0) | 2020.01.13 |
| Restful에 대한 이해하기(Restful과 SOAP차이) - 3 (0) | 2020.01.13 |
| Restful에 대한 이해하기(xml, soap란?) - 2 (0) | 2020.01.12 |
댓글