ユーザからMarkdown形式で入力した文章をHTML形式へ変換し、リアルタイムでプレビューを表示するMarkdown変換ツールです。
実際のページは以下のURLからアクセスできます。
https://shiro091.github.io/Markdown-Converter/
サンプルコードも残します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown変換ツール</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>MarkdownからHTMLに変換</h1>
<div id="container">
<div class="container">
<h2>Markdown形式で入力:</h2>
<textarea id="markdown-input" placeholder="Markdown形式で入力してください"></textarea>
</div>
<div class="container">
<h2>HTMLへの変換結果:</h2>
<div id="html-output"></div>
</div>
<div class="container">
<h2>HTMLプレビュー:</h2>
<div id="preview"></div>
</div>
</div>
<script src = "script.js"></script>
</body>
</html>
const markdown = document.querySelector("#markdown-input");
const output = document.querySelector("#html-output");
const preview = document.querySelector("#preview");
const convertInline = (text) => {
const imageRegex = /!\[(.*?)\]\((.*?)\)/;
const boldRegex = /\*\*(.*?)\*\*/;
const underScoreBoldRegex = /__(.*?)__/;
const italicRegex = /\*(?!\*)(.*?)(?<!\*)\*/;
const underScoreItalicRegex = /_(?!_)(.*?)(?<!_)_/;
const linkRegex = /\[(.*?)\]\((.*?)\)/;
if(boldRegex.test(text)){
text = text.replace(boldRegex , `<strong>$1</strong>`);
}else if(underScoreBoldRegex.test(text)){
text = text.replace(underScoreBoldRegex , `<strong>$1</strong>`);
}
if(italicRegex.test(text)){
text = text.replace(italicRegex , `<em>$1</em>`);
}else if(underScoreItalicRegex.test(text)){
text = text.replace(underScoreItalicRegex , `<em>$1</em>`);
}
if(imageRegex.test(text)){
text = text.replace(imageRegex , `<img alt = "$1" src = "$2">`);
}
if(linkRegex.test(text)){
text = text.replace(linkRegex , `<a href = "$2">$1</a>`);
}
return text;
};
const convertMarkdown = () => {
let result = "";
const line = markdown.value.split("\n");
line.forEach((element) => {
if(element.startsWith("### ")){
const text = element.slice(4);
result += `<h3>${convertInline(text)}</h3>`;
return;
}else if(element.startsWith("## ")){
const text = element.slice(3);
result += `<h2>${convertInline(text)}</h2>`;
return;
}else if(element.startsWith("# ")){
const text = element.slice(2);
result += `<h1>${convertInline(text)}</h1>`;
return;
}else if(element.startsWith("> ")){
const text = element.slice(2);
result += `<blockquote>${convertInline(text)}</blockquote>`;
return;
}else{
result += convertInline(element);
return;
}
});
return result;
};
markdown.addEventListener("input" , () => {
const html = convertMarkdown();
output.textContent = html;
preview.innerHTML = html;
});
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#markdown-input {
width: 100%;
height: 100px;
}
#html-output, #preview {
height: 100px;
display: inline-block;
width: 100%;
border: 1px solid #ccc;
padding: 10px;
margin: auto;
white-space: pre-wrap;
background-color: #f9f9f9;
}
@media (min-width: 600px) {
#markdown-input, #html-output, #preview {
height: 200px;
margin: 0;
}
#container {
display: flex;
justify-content: space-evenly;
gap: 10px;
}
}