markdown style 적용 -- marked.js 사용

src/css/toc.css

@@ -354,15 +354,113 @@
 }
 
 .chat .chat-body .message {
-  font-size: 16px;
+  font-size: 15px;
   max-width: 70%;
-  padding: 0.8rem;
+  padding: 0 0.8rem;
   border-radius: 6px;
-  word-break: break-word;
-  white-space: pre-wrap;
-  line-height: 1.5;
   margin: 0;
+  line-height: 1.6;
+}
+
+.chat .chat-body .message.user {
+  color: #fff;
+}
+
+.chat .chat-body .message.ai {
+  color: #324B61;
+}
+
+/* 마크다운 요소 스타일 */
+/* 헤딩 스타일 */
+.chat .chat-body .message h1,
+.chat .chat-body .message h2,
+.chat .chat-body .message h3,
+.chat .chat-body .message h4,
+.chat .chat-body .message h5,
+.chat .chat-body .message h6 {
+  color: #2C3E50;
+  font-weight: bold;
+  margin-top: 1.2em;
+  margin-bottom: 0.5em;
+}
+
+.chat .chat-body .message h1 {
+  font-size: 1.5em;
+  border-bottom: 2px solid #E3E9F1;
+  padding-bottom: 5px;
+}
+
+.chat .chat-body .message h2 {
+  font-size: 1.25em;
+  border-bottom: 1px solid #E3E9F1;
+  padding-bottom: 5px;
+}
+
+.chat .chat-body .message h3 {
+  font-size: 1.1em;
+}
+
+/* 문단 스타일 */
+.chat .chat-body .message p {
+  margin: 0.5em 0;
+}
+
+/* 코드 블록 */
+.chat .chat-body .message code {
+  background-color: #E3E9F1;
+  color: #324B61;
+  padding: 2px 4px;
+  font-size: 0.8em;
+  border-radius: 4px;
+}
+
+/* 여러 줄 코드 블록 */
+.chat .chat-body .message pre {
+  background-color: #E3E9F1;
+  color: #324B61;
+  padding: 15px;
+  border-radius: 5px;
+  overflow-x: auto;
+  font-size: 0.95em;
+}
+
+/* 리스트 스타일 */
+.chat .chat-body .message ul,
+.chat .chat-body .message ol {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  color: #3A4B5A;
+}
+
+.chat .chat-body .message ul li {
+  list-style-type: disc;
+  margin: 0.2em 0;
+}
+
+.chat .chat-body .message ol li {
+  list-style-type: decimal;
+  margin: 0.2em 0;
+}
+
+/* 링크 스타일 */
+.chat .chat-body .message a {
+  color: #0072CE;
+  text-decoration: none;
+}
+
+.chat .chat-body .message a:hover {
+  text-decoration: underline;
+}
+
+/* 인용 블록 */
+.chat .chat-body .message blockquote {
+  border-left: 5px solid #E3E9F1;
+  color: #5B6A7C;
+  padding-left: 15px;
+  margin: 1em 0;
+  font-style: italic;
 }
+/* ################## */
 
 .chat .chat-body .message.user {
   align-self: flex-end;
@@ -427,6 +525,7 @@
   resize: none; /* 사용자가 크기를 변경하지 못하게 설정 */
   font-size: 16px;
   line-height: 1.5;
+  font-family: var(--body-font-family);
 }
 
 #chat-input::placeholder {

src/js/08-chat.js

 /* eslint-disable no-undef */
+import { marked } from 'https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js'
+
 ;(function () {
   'use strict'
 
@@ -66,9 +68,9 @@
     if (storedMessages) {
       const messages = JSON.parse(storedMessages)
       messages.forEach(({ type, text }) => {
-        const messageItem = document.createElement('pre')
+        const messageItem = document.createElement('div')
         messageItem.className = `message ${type}`
-        messageItem.textContent = text
+        messageItem.innerHTML = marked(text)
         chatBody.appendChild(messageItem)
       })
       chatBody.scrollTop = chatBody.scrollHeight
@@ -227,9 +229,9 @@
 
   function addMessageToChatBody (message) {
     if (message.trim() !== '') {
-      const user = document.createElement('pre')
+      const user = document.createElement('div')
       user.className = 'message user'
-      user.textContent = message
+      user.innerHTML = marked(message)
       chatBody.appendChild(user)
       chatBody.scrollTop = chatBody.scrollHeight
 
@@ -264,7 +266,7 @@
           sendButton.classList.remove('active')
           stopButton.classList.add('active')
 
-          const messageItem = document.createElement('pre')
+          const messageItem = document.createElement('div')
           messageItem.className = 'message ai'
           chatBody.appendChild(messageItem) // 실제 메시지가 들어갈 자리
 
@@ -313,12 +315,12 @@
 
       if (index < text.length) {
         partialMessage += text.charAt(index)
-        element.textContent = partialMessage
+        element.innerHTML = marked(partialMessage)
         chatBody.scrollTop = chatBody.scrollHeight
         index++
         setTimeout(type, speed) // 한글자씩 추가
       } else {
-        saveMessagesToStorage('ai', element.textContent)
+        saveMessagesToStorage('ai', partialMessage)
         sendButton.classList.add('active')
         stopButton.classList.remove('active')
         isWriting = false
@@ -329,7 +331,7 @@
   }
 
   function createAiMessage (message) {
-    const messageItem = document.createElement('pre')
+    const messageItem = document.createElement('div')
     messageItem.className = 'message ai'
     chatBody.appendChild(messageItem)
 

src/partials/footer-scripts.hbs

-<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
+<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}" type="module"></script>
+{{!-- <script async src="{{{uiRootPath}}}/js/vendor/marked.js"></script> --}}
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 {{#if env.SITE_SEARCH_PROVIDER}}
 {{> search-scripts}}