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

날짜:

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

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

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

1. 최초 MarkDown 적용기

💡 구글블로그 MarkDown 사용기 (CSS변경하기)
💡 참고 : mxp22.surge.sh/markdown-highlight-in-blogger.js 미작동 참고

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

// 문제가 되고있는 부분 확인! (호출이 안됨)
<script src='//mxp22.surge.sh/markdown-highlight-in-blogger.js' type='text/javascript'></script>
<head>
...
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css' rel='stylesheet'/>
</head>
<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는 코드로 직접 붙여넣기 하였습니다.

오늘은 이만~

즐거운 코딩 되게요.

끝.

댓글

댓글 쓰기