Markdown Editor
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
h1 {
color: #333;
}
.editor-container {
display: flex;
}
textarea {
width: 50%;
height: 400px;
padding: 10px;
font-size: 16px;
border-radius: 5px 0 0 5px;
border: 1px solid #ccc;
resize: none;
}
#preview {
width: 50%;
height: 400px;
padding: 10px;
font-size: 16px;
border-radius: 0 5px 5px 0;
border: 1px solid #ccc;
overflow-y: auto;
}
// scripts.js
const markdownInput = document.getElementById('markdown-input');
const preview = document.getElementById('preview');
markdownInput.addEventListener('input', updatePreview);
function updatePreview() {
const markdownText = markdownInput.value;
const htmlText = marked(markdownText);
preview.innerHTML = htmlText;
}
No comments:
Post a Comment