구글블로그 MarkDown 에러(미적용건) 해결 (2025.01)

날짜: 


# 구글블로그 MarkDown 에러(미적용건) 해결 (2025.01)

안녕하세요 __물먹고하자__ 입니다 :)
오늘 블로그 글을 하나 쓰고나니 MarkDown으로 적용된 게시글이
적용이 안되는 현상을 확인했습니다.

급히 확인하여 복원하시켜놓기! 공유드립니다.

---
## 1. 최초 MarkDown 적용기
> 💡 <a href="https://xodhks0113.blogspot.com/2024/11/markdown.html" target="_blank">구글블로그 MarkDown 사용기 (CSS변경하기)</a>
💡 참고 : <a href="https://gongboo.github.io/journal/markdown-in-blogspot/" target="_blank">mxp22.surge.sh/markdown-highlight-in-blogger.js 미작동 참고</a> 

<!-- 1. 에러발생 -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje64wqVYDIcnMx6Zxsad-lhpGWaxXFKtRkuAmzYc8Zrfmm87hseKJp5cf_bHXbkLh_hkg5XwhESki3WkZ1Awc_cbPfL-PvOaXwtmU3I3MhaPhHXAzkja5usvfeuCf5-p4HEbir0V8VXyb-R70yAVYcptjdQ5Ua1RDfAMYKHNsd1caCnlxZhxZ47Ptcl6or/s2582/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-01-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.54.23.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2582" data-original-width="1882" height="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje64wqVYDIcnMx6Zxsad-lhpGWaxXFKtRkuAmzYc8Zrfmm87hseKJp5cf_bHXbkLh_hkg5XwhESki3WkZ1Awc_cbPfL-PvOaXwtmU3I3MhaPhHXAzkja5usvfeuCf5-p4HEbir0V8VXyb-R70yAVYcptjdQ5Ua1RDfAMYKHNsd1caCnlxZhxZ47Ptcl6or/s600/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-01-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.54.23.png"/></a></div>

MarkDown 사용부분이 그냥노출되고 있음을 확인 (구글 테마 HTML 편집진입)

``` html
// 문제가 되고있는 부분 확인! (호출이 안됨)
<script src='//mxp22.surge.sh/markdown-highlight-in-blogger.js' type='text/javascript'></script>
```

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHohCZYJhNO0cJ7NaiI8Zf5ZBW4McvfTA6zDIIHORxdnOv7fvn6Wsndu_9KbK1v1lHY6jp1gLeM40rDzrFAXZhLxDOVQjSkZibDtBsK3gcoHFINKWTElcO0iLRbxsGkFfGU4qNW0lCsAwbmPOuMNeCnnIQ8F9TqPhh1E8JOgU7RuGcz2XkXfFYUQsw4KOb/s1040/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-01-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.54.57.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="430" data-original-width="1040" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHohCZYJhNO0cJ7NaiI8Zf5ZBW4McvfTA6zDIIHORxdnOv7fvn6Wsndu_9KbK1v1lHY6jp1gLeM40rDzrFAXZhLxDOVQjSkZibDtBsK3gcoHFINKWTElcO0iLRbxsGkFfGU4qNW0lCsAwbmPOuMNeCnnIQ8F9TqPhh1E8JOgU7RuGcz2XkXfFYUQsw4KOb/s600/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-01-21%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.54.57.png" width="600"/></a></div>


``` html
<head>
...
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css' rel='stylesheet'/>
</head>

```

``` html
<body>
...
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js'/>
    <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>
</body>

```

---
## 마무리
갑자기 발생한건이라 cdnjs 전부 업데이트 했고, markdown-highlight-in-blogger.js는 코드로 직접 붙여넣기 하였습니다.

오늘은 이만~

즐거운 코딩 되게요.

끝.

댓글

댓글 쓰기