2024년 9월 30일 월요일
Markdown to HTML변환기, 그리고 코드
Markdown to HTML 변환기
이 코드는 다음과 같은 기능을 제공합니다:
- 사용자가 마크다운을 입력할 수 있는 텍스트 영역
- 변환 버튼
- 변환된 HTML을 표시하는 출력 영역
사용 방법:
- 사용자가 마크다운 텍스트를 입력 영역에 붙여넣거나 직접 입력합니다.
- '변환' 버튼을 클릭합니다.
- 변환된 HTML이 출력 영역에 표시됩니다.
이 코드를 블로그 핫스팟에 삽입하면, 방문자들이 마크다운을 HTML로 쉽게 변환할 수 있습니다. 필요에 따라 스타일을 수정하거나 기능을 추가할 수 있습니다.
 |
| 코드 변환기 |
사용한 코드::
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdown to HTML Converter</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } #container { max-width: 800px; margin: 0 auto; } textarea { width: 100%; height: 200px; margin-bottom: 10px; } #output { border: 1px solid #ddd; padding: 10px; } </style> </head> <body> <div id="container"> <h1>Markdown to HTML Converter</h1> <textarea id="markdown-input" placeholder="여기에 Markdown을 입력하세요..."></textarea> <button onclick="convertToHtml()">변환</button> <h2>HTML 출력:</h2> <div id="output"></div> </div> <script> function convertToHtml() { const markdownInput = document.getElementById('markdown-input').value; const htmlOutput = marked(markdownInput); document.getElementById('output').innerHTML = htmlOutput; } </script> </body> </html>
