Create previews from Markdown-formatted text webpages

마크다운 Markdown 텍스트 웹페이지에서 미리보기

숫자 붙이기 숨기기
1 HTML Markdown 문서작성 미리보기
1.1 HTML 소스
2 워드프레스 페이지 내에서 구현하기

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>

오프라인이나 별도의 웹 페이지에서 사용할 경우 상단의 소스를 그대로 사용하면 된다.

Create previews from Markdown-formatted text webpages

워드프레스 페이지 내에서 구현하기

워드프레스나 티스토리에 해당 기능을 올린다면 <style></style> 부분에서 웹 페이지 자체 sytle 하고 꼬이게 됩니다. 그래서 아예 이 부분은 <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>
</head>
<body>

<div id="container">
  <textarea id="markdownInput" placeholder="Enter Markdown here..." style="width: 95%; height: 150px;"></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>

※ 하단의 예문은 Ai 를 이용하여 만들었습니다.

예문 복사하기, Copy an example 예문 복사하기

Similar Posts