1. Marked 설치하기

   먼저, Marked를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 npm으로 Marked를 설치합니다.

   npm install marked
   

2. HTML에 Marked 스크립트 추가하기

   번역 기능을 추가할 HTML 파일에 Marked 스크립트를 추가합니다. 다음처럼 <script> 태그를 사용하여 Marked 스크립트를 가져옵니다.

   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   

3. Markdown 문서 작성하기

   번역할 Markdown 문서를 작성합니다. 예를 들어, 다음과 같은 Markdown 문서가 있다고 가정해봅시다.

   # Hello, World!
      
   This is a test document.
   

4. JavaScript로 번역 기능 추가하기

   이제 JavaScript 코드를 사용하여 Markdown 문서에 번역 기능을 추가할 수 있습니다. 다음 코드를 참고하세요.

   // 번역할 Markdown 문서 가져오기
   const markdown = document.querySelector('#markdown').textContent;
      
   // 원하는 언어로 번역하기
   const translatedMarkdown = translateMarkdown(markdown);
      
   // HTML로 변환하기
   const html = marked(translatedMarkdown);
      
   // 변환된 HTML을 표시할 요소 선택하기
   const output = document.querySelector('#output');
      
   // 변환된 HTML을 표시하기
   output.innerHTML = html;
      
   // Markdown을 번역하는 함수
   function translateMarkdown(markdown) {
     // 여기에서 Markdown을 원하는 언어로 번역하는 로직을 구현합니다.
     // 번역된 결과를 반환합니다.
   }
   

   위 코드에서는 #markdown ID를 가진 요소에 작성된 Markdown 문서를 가져와 translateMarkdown() 함수로 번역한 후, marked() 함수로 HTML로 변환합니다. 변환된 HTML은 #output ID를 가진 요소에 추가됩니다.

5. Markdown 번역 로직 구현하기

   번역 로직은 translateMarkdown() 함수에서 구현합니다. 이 함수에서는 Markdown을 원하는 언어로 번역하고 번역된 결과를 반환해야 합니다. 언어 번역 API를 사용하거나 정적인 번역 데이터를 사용할 수 있습니다.

   function translateMarkdown(markdown) {
     // 예시로 번역을 진행합니다.
     // 실제로는 API 호출 등의 방법으로 번역해야 합니다.
     return markdown
       .replace('Hello, World!', '안녕하세요!')
       .replace('This is a test document.', '이것은 테스트 문서입니다.');
   }
   

   위 예시에서는 단순히 replace() 함수를 사용하여 영어 문장을 한글로 변경했습니다.

6. 결과 확인하기

   HTML 파일을 열고, Markdown 문서가 번역되어 HTML로 표시되는지 확인해보세요. 번역 로직에 따라 Markdown 문서가 번역되어야 합니다.

이제 Marked를 사용하여 다국어 번역 기능을 추가할 수 있습니다. 참고로, 번역 로직은 프로젝트의 요구사항에 맞게 커스터마이즈할 수 있습니다.