Markdown 미리보기 페이지 만들기 - 온라인/오프라인버전
예전부터 블로그에 글을 작성할 때 마크 다운을 꾸준하게 사용해서 작성했습니다. 오래 사용하다 보니까 사용하면 사용할수록 편해집니다. 티스토리 api 서비스가 끝나면서, 이후 Oath 를 이용해서 티스토리 에디터를 만드셨던 분께 감사드립니다. 덕분에 마크다운을 잘 사용하게 되었어요.
티스토리 에디터 자체에서 마크다운 Markdown 을 입력하면 기본모드 HTML 모드로 변환해주는 기능이 있습니다.
그런데 문득 그런 생각이 들었습니다 마크 다운을 입력했을 때 그 결과물을 라이브로 미리 볼 수 있도록 지원하는 기능을 한번 만들고자 싶었습니다. 사실 이 기능들은 여기저기 많이 있습니다. 국내는 물론 해외에서도 이 기능을 만든 분들이 많습니다. 어떻게 잘 하시는건지, 자체 페이지에 넣어서 관리하시는 경우도 있죠.
제가 기존에 알던 지식을 더 하고 ai 를 활용하여 추가 보정하는 코딩하는 재미에 빠져 있다보니 한번 해보고 싶었습니다. 제가 알던 것들을 html 소스로 짜서 넣었고. GPT가 다듬었습니다.
Markdown to TEXT 소스코드
<!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>얼마 전 유튜브에 어떤 작곡가분께서 만드셨던 개인 노래. 직접 작곡을 하시고 AI 보이스 를 이용한 노래가 하나 올라왔습니다. 이런 경우를 이제 보자면 소스코드에 저작권 관련된 문제는 없을 거라고 생각합니다. 강Ai 가 더 발전한다면 이런 사소한 소스코드엔 저작권이 더 없겠죠. 마음껏 사용하셔도 됩니다.
현재 이 소스 코드가 너무 정상적으로 작동을 하고 있어서 이 기능을 로컬 페이지에 올려서, 북마크로 연결해 사용하고 있습니다.
웹페이지 온라인으로HTML 로만 구현하기
웹페이지에서 간단하게 구현하고자 한다면, 기존의 Style 을 해치지 않는 선에서 아래의 코드 정도로 구현이 가능합니다.
<!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: 461px; height: 112px;"></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>
이제 사용해봅시다. 그 전에. Markdown 글을 하나 작성해야겠죠?
현재 마크다운 Markdown 글을 간단하게 예시로 만드는 방법은 참 쉽습니다. 그냥 GPT 에게 만들어 달라고 하면 만들어줍니다.
### 빵을 만들어 먹는 것이 효율적인 이유
빵은 인류가 수천 년 동안 소비해온 주요한 식품 중 하나로, 그 이유는 여러 가지로 해석될 수 있습니다. 여기서는 빵을 만들어 먹는 것이 효율적인 이유를 살펴보겠습니다.
#### 1. 영양소 공급빵은 탄수화물의 주요원이며, 우리 몸에 필요한 에너지를 공급합니다. 또한 다양한 종류의 빵은 단백질, 식이 섬유, 미네랄 및 비타민과 같은 다른 영양소를 제공합니다. 특히, 온전한 곡물을 사용하여 만든 빵은 식이 섬유가 풍부하여 소화에 도움이 되며, 혈당을 안정화시키는 데 도움이 될 수 있습니다.
#### 2. 보존 및 이용성빵은 보존이 용이하고, 오랫동안 신선함을 유지할 수 있습니다. 올바른 조리 및 보관 방법을 사용하면 여러 주나 심지어 몇 달 동안도 빵을 유지할 수 있습니다. 빵은 또한 다양한 음식과 함께 조합하여 맛을 더할 수 있습니다. 예를 들어, 샌드위치, 토스트, 파니니 등으로 활용할 수 있어 식사의 다양성을 높여줍니다.
#### 3. 경제적 효율성빵은 비교적 저렴하게 생산될 수 있으며, 대부분의 경우 재료가 간단하고 저렴합니다. 이는 대규모로 생산될 때 생산 비용이 낮아지고, 소비자에게는 저렴한 가격으로 제공될 수 있다는 것을 의미합니다. 따라서 빵은 경제적인 관점에서도 효율적인 식품입니다.이처럼 빵을 만들어 먹는 것은 영양, 보존 및 이용성, 경제적 효율성 등 다양한 측면에서 효율적입니다. 하지만 과도한 섭취는 건강에 해를 끼칠 수 있으므로 적절한 섭취량을 유지하는 것이 중요합니다.
현재 여러 가지 소스들을 만들어 보고 있습니다. 이렇게 HTML로만 기능들을 구현하는 것은 단순하게 HTML 로만 배포가 가능하기 때문에 그러는 것도 이유가 될테고. 귀찮게 css 나 script.js 를 별도로 업로드 하지 않고도 사용할 수 있게 만드는 것이 그냥 개인적인 목표이기 때문입니다.
실제 구현된 소스는 아래와 같습니다.