HTML Markdown 문서작성 미리보기

워드프레스 내에서 온 페이지 형식으로 구현한 마크다운 형식 텍스트 미리보기 웹페이지 입니다. 코드는 직접 큰 틀을 짜고, 자잘한 것들은 Gpt로 도움을 받아서 구현한 소스입니다. 이게 되나 싶었던 것들이 꽤나 많았는데 이것들이 되더라고요. GPT 같은 경우에는 아직까지 버전에 따라서 성능 제한이 있다고는 하지만 갈수록 인공지능 LLM의 기술 발전과 이게되네? 싶은 것들이 있어서 놀라는 중입니다.

모두 html을 통해서만 구현을 했습니다.

개인적으로 무언가 제가 원하는 기능을 만들 때, 어차피 혼자 사용하는 것을 기본적으로 상정해서 만듭니다. + 더불어 원래대로라면 CSS JS 등 기능은 별도의 파일을 업로드 하면서 외부에서 끌어오지만, 별도의 파일 업로드를 하지 않는 선에서 구현하는 것을 목적으로 하고 있기 때문에 조금 복잡한 소스가 될 수도 있습니다.

웹페이지 바로 올린다면 <style> 이 꼬이는 경우가 많이 발생합니다.

HTML 소스

<!DOCTYPE html>
<html lang="en">
<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/showdown/1.9.1/showdown.min.js"></script>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  
  #container {
    display: flex;
    justify-content: space-between;
    width: 80%;
    height: 70%;
  }
  
  textarea {
    width: 45%;
    height: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
  }
  
  #output {
    width: 45%;
    height: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: auto;
  }

</style>
</head>
<body>

<div id="container">
  <textarea id="markdownInput" placeholder="Enter Markdown here..."></textarea>
  <div id="output"></div>
</div>

<script>
  var converter = new showdown.Converter();

  document.getElementById('markdownInput').addEventListener('input', function() {
    var markdownInput = document.getElementById('markdownInput').value;
    var htmlOutput = converter.makeHtml(markdownInput);
    var output = document.getElementById('output');
    output.innerHTML = htmlOutput;
  });
</script>

</body>
</html>

워드프레스나 티스토리에 해당 기능을 올린다면 <style></style> 부분에서 웹 페이지 자체 sytle 하고 꼬이게 됩니다. 그래서 아예 이 부분은 <style>을 최소화 시키거나, 미적인 감각을 삭제하고서 사용합니다. 그래도 HTML 로만 구동하다보니 기능은 정삭적으로 작동합니다.