구글 블로그 blogger(blogspot)에 마크다운 적용하기

구글 블로그 blogger(blogspot)에 마크다운 적용하기

서브 블로그로 blogspot을 쓰고 있는데 요즘에는 챗 지피티에서 생성한 글도 백업용으로 거기에 올리고 있다. 챗 지피티는 마크다운 형식으로 답변해줘서 깔끔하게 보기 좋은데 블로그스팟이 마크다운을 지원 안하는 것이었다. 그래서 템플릿을 수정해줘서 적용시켰다.

이거보고 따라했는데

https://github.com/cs905s/md-in-blogger

내용을 요약하자면..

1. </head> 앞에 이거 추가

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>

1. </html> 앞에 이거 추가

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="//mxp22.surge.sh/markdown-highlight-in-blogger.js" type="text/javascript"></script>

이제 pre로 감싸진 부분에 마크다운이 적용된다.

마크다운 부분을

<pre class="markdown"> </pre> 로 감싸면 된다.

글에다가 직접 적용할거라면 html 모드(html 보기)로 바꿔서 적용해야 한다. 근데 이러니까 html 코드가 잘 안보이는 문제가 있었다.

html 코드는 태그 때문에 html 모드에서 쓰면 글에서 안보이게 차단되니 그부분만 일반 글쓰기 모드로 바꿔서 작성해줘야한다. 아니면 태그를 모두 < >로 바꿔준다

이게 이렇게 나오는데

html 요소를 직접 만드는 거를 악용될 수 있으니 특정 html 태그가 인식되면 blogspot에서 아예 안보이게 해놓은거 같다

모드를 바꿔서 일반 글쓰기로 전환하면 이렇게 보이는데

여기에서 Html 코드를 붙여넣어주면

블로그 스팟이 알아서 태그 부분을 &lt gt로 변환해서 태그로 작동 못하게 해준다.

최종 해결 결과

그냥 템플릿 자체에 넣었다.

마크다운 안쓰는 경우를 생각해서 템플릿에는 안넣고 직접 pre 태그를 넣으려고 했는데 글 몇개 쓰다가 불편하고 귀찮아서 템플릿 자체에 넣었다.

이 부분에 추가했다.

이제 그냥 글쓰기 모드에 쓰면 된다.

html도 그냥 작성해도 된다.

아쉬운 점

마크다운 기본이라 하이라이트가 안된다. 하려면 <span style="background-color: #fcff01;"></span>을 쓰면 되는데 딱히 좋아보이지는 않는다

이거 블로거에 적용하는 부분 코드를 살펴봤는데 길지 않아서 커스텀 하려면 할 수 있을 것 같은데 나중으로 미뤄둔다.

수정

mxp22.surge.sh/markdown-highlight-in-blogger.js 이부분이 작동을 안해서 내 블로그에 마크다운이 이상하게 돌아가는 것을 알게 되었다. 서버가 내려간 것 같았다. 저거 개발자는 이제 업데이트도 없고 별로 신경을 안쓰는 듯하여 내용 살펴보니 짧아서 통으로 가져와서 그냥 내 블로그에 붙이기로 했다. 아래 항목을 </body> 태그 위에 붙여서 해결.

    <script src='//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js' type='text/javascript'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js' type='text/javascript'/>

    <script type='text/javascript'>
      var MarkdownHighlightInBlogger = {};
      MarkdownHighlightInBlogger.unescapeHTML = function (html) {
        var htmlNode = document.createElement(&quot;DIV&quot;);
        htmlNode.innerHTML = html;
        return htmlNode.innerText || htmlNode.textContent;
      };

      MarkdownHighlightInBlogger.convertMD = function () {
        try {
          console.info(&#39;Converting markdown using vanilla JavaScript&#39;);

          // showdown renderer
          var converter = new showdown.Converter();
          converter.setFlavor(&#39;github&#39;);

          // `pre` 요소를 모두 가져와서 처리
          document.querySelectorAll(&#39;pre.markdown&#39;).forEach(function (block) {
            var rawtext = block.innerText;
            var md_html = converter.makeHtml(rawtext);
            var tempDiv = document.createElement(&quot;div&quot;);
            tempDiv.innerHTML = md_html;

            // 변환된 HTML을 삽입하고 원래 마크다운 요소 숨김 처리
            block.insertAdjacentElement(&quot;beforebegin&quot;, tempDiv);
            block.style.display = &quot;none&quot;;
          });

          // `pre code` 요소에 하이라이트 적용
          document.querySelectorAll(&#39;pre code&#39;).forEach(function (block) {
      		hljs.highlightBlock(block);
          });
        } catch (exc) {
          console.error(exc);
        }
      };

      // DOM 로드 후 함수 실행
      document.addEventListener(&quot;DOMContentLoaded&quot;, MarkdownHighlightInBlogger.convertMD);
    </script>