공지사항관리 기능 분리 및 개선

blog/templates/blog/create_post.html

@@ -22,7 +22,7 @@
           </div>
 
           <!-- 마크다운 에디터 -->
-          <h2>contents</h2>
+          <h2>Contents</h2>
 
           <div class="col-md-12">
             {{ form.contents }}
@@ -41,9 +41,22 @@
 
     <!-- 마크다운 파서 및 스크립트 -->
     <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
     <script>
       // 마크다운 파서 초기화
-      const md = window.markdownit();
+      const md = window.markdownit({
+        highlight: function (str, lang) {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return hljs
+                .highlight(str, {language: lang})
+                .value;
+            } catch (__) {}
+          }
+          return ''; // 기본 HTML 이스케이프 처리
+        }
+      });
 
       // content 필드와 미리보기 연결
       const textarea = document.getElementById("markdown-editor");
@@ -52,7 +65,16 @@
       // 실시간 미리보기 업데이트
       textarea.addEventListener("input", function () {
         const markdownContent = textarea.value; // textarea 내용 가져오기
-        preview.innerHTML = md.render(markdownContent); // 마크다운 -> HTML 변환
+        const renderedContent = md.render(markdownContent); // 마크다운 -> HTML 변환
+        preview.innerHTML = renderedContent;
+
+        // Highlight.js로 코드 블록 강조
+        document
+          .querySelectorAll("#preview pre code")
+          .forEach((block) => {
+            hljs.highlightElement(block);
+          });
       });
     </script>
-  {% endblock %}
+  </div>
+{% endblock %}