<div id="readability-page-1" class="page">
                
                



<nav id="global-navigation">


</nav>
<main id="wrap" aria-hidden="false">

<div>



                
                    


<article>
<header id="global-header">



<div>
<h2>티스토리 프라치노 스킨에서 마크다운으로 글 쓰기</h2>
<ul>
<li role="text" aria-label="2022년 11월 09일 02시 21분에 작성된 글."><time datetime="2022-11-09T02:21">2022.11.09 02:21</time></li>
<li><a href="/category/%EB%B8%94%EB%A1%9C%EA%B7%B8" aria-label="블로그">블로그</a></li>
</ul>
</div>


</header>
<div id="article"><p>티스토리에서 마크다운으로 글을 복붙해 넣었더니 뭔가 마음에 안들게 변환이 되었다.<br><code>sindresorhus</code>라는 아주 고마운 개발자가 <a href="https://github.com/sindresorhus/github-markdown-css">github-markdown-css</a>라는 이름의 프로젝트로 깃헙 마크다운 테마 쉽게 적용할 수 있게 css 파일을 제공하고 있어서 이걸 활용하기로 했다.</p>
<p>우선 크게 맘에 안들었던 부분은 다음 3가지 였다.</p>
<ul>
<li>표 헤더</li>
<li>코드박스</li>
<li>인용구</li>
</ul>
<p>따로 수정하지 않고 그냥 보면 아래와 같이 보였었다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="1850" data-origin-height="828"><span data-url="https://k.kakaocdn.net/dn/bI4D9s/btrQK1GVNfW/Ok1BnqMws9DrxONApGjjkk/img.png" data-lightbox="lightbox" data-alt="수정 전 마크다운 표현"><img src="https://k.kakaocdn.net/dn/bI4D9s/btrQK1GVNfW/Ok1BnqMws9DrxONApGjjkk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="1850" data-origin-height="828"></span><figcaption>수정 전 마크다운 표현</figcaption>
</figure>

<p>내가 쓰고있는 티스토리 테마는 프라치노 공간이라는 테마인데, 아마도 마크다운을 적극적으로 지원하지는 않는 모양이었다.</p>
<p>css파일들을 수정하지 않고 조금 번거롭더라도, github-markdown.css 파일에 선언된 <code>.markdown-body</code> 클래스로 감싸서 적용하려고 시도했는데, <code>#tt-body-page</code>라는 id를 비롯한 여러 설정들이 우선참조되어서 원하는 모양이 전혀 나오지 않았다.</p>
<h2>너무 귀찮...</h2>
<p>았지만, 앞으로 더 편하게 글을 포스팅 하기 위해서 이번을 감수해야겠다고 생각하고 github-markdown.css를 프라치노 공간에 호환되도록 수정하기로 했다.<br>중점으로 둔 포인트는 다음과 같았다.</p>
<ul>
<li>표가 예쁘게 나오고 화면을 꽉 채워야함</li>
<li>인용구가 일반 github스타일이어야 함</li>
<li>코드박스가 좀더 이뻤으면 좋겠음</li>
<li>글씨체는 원래 프라치노 공간껄로..</li>
</ul>
<p>글들을 더 쓰다보면 개선하고 싶은 사항이 생길텐데 그럼 또 수정해야지.. 하는 생각으로 이정도만 수정했다.<br>가볍게 테스트용으로 몇가지 아래 작성하고 프라치노 공간을 사용하는 다른 마크다운 러버를 위해 내가 몇가지 추가한 css 파일도 첨부한다. <del>(css 잘 몰라서 그냥 대충 원하는거만 적용되게 덕지덕지 수정해 봤다.)</del></p>
<p>나중에 수정사항이 생기면 또 업데이트 할지도...</p>
<table>
<thead>
<tr>
<th>표</th>
<th>예시</th>
<th>이거표임</th>
</tr>
</thead>
<tbody><tr>
<td>쓸 내용은</td>
<td>고민하기 귀찮고</td>
<td>그래도 표는 보여주고 싶은</td>
</tr>
<tr>
<td>최소</td>
<td>세줄은</td>
<td>써야지</td>
</tr>
<tr>
<td>표처럼</td>
<td>보이겠지</td>
<td>??????</td>
</tr>
</tbody></table>
<pre><code>import random

print ("this is test")
print ("this is test")</code></pre>
<blockquote data-ke-style="style1"><p>인용구까지 마무으리</p>
</blockquote><p>아! 참고로 이 css를 정상적으로 반영시키려면 html의 <code>&lt;head&gt;&lt;/head&gt;</code> 사이에 아래 코드를 넣어줘서 css를 참조할 수 있도록 해야한다.</p>
<pre><code>&lt;link rel="stylesheet" href="./images/fraccinospace-github-markdown.css"&gt;</code></pre>
<figure data-ke-align="alignCenter"><a href="https://k.kakaocdn.net/dn/XM5Vl/btrQJ96w9hz/jZkQtes6f972GwEcFaKSvk/fraccinospace-github-markdown.css?attach=1&amp;knm=tfile.css">
    
    <div><div><span>fraccinospace-github-markdown.css</span></div>
<div>0.02MB</div>
</div>
  </a></figure>
</div>


<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>



















</article>


                    
                
</div>
</main>













                




        
        


        

                
                









                
</div>

모두의 근삼이

염근철

티스토리에서 마크다운으로 글을 복붙해 넣었더니 뭔가 마음에 안들게 변환이 되었다. sindresorhus 라는 아주 고마운 개발자가 github-markdown-css라는 이름의 프로젝트로 깃헙 마크다운 테마 쉽게 적용할 수 있게 css 파일을 제공하고 있어서 이걸 활용하기로 했다. 우선 크게 맘에 안들었던 부분은 다음 3가지 였다. 표 헤더 코드박스 인용구 따로 수정하지 않고 그냥 보면 아래와 같이 보였었다.  내가 쓰고있는 티스토리 테마는 프라치..

티스토리 프라치노 스킨에서 마크다운으로 글 쓰기

댓글