Vanilla JavaScript Implementation
In this approach, you directly manipulate the DOM elements using JavaScript to capture user input and update the preview container. This approach is suitable for small-scale applications and provides more control over the implementation details.
Explanation:
The provided code demonstrates a basic Markdown Previewer implemented using HTML, CSS, and JavaScript. The HTML file contains text for inputting Markdown syntax and a div element to display the rendered HTML content. JavaScript code listens for input events on the text, converts the Markdown to HTML using the marked library, and updates the preview div accordingly.
Example: Below is an example of building a Markdown Previewer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="editor-container">
<textarea id="editor"></textarea>
</div>
<div class="preview-container">
<div id="preview"></div>
</div>
</div>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.2/marked.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-around;
align-items: flex-start;
margin-top: 20px;
}
.editor-container,
.preview-container {
width: 45%;
}
textarea {
width: 100%;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
#preview {
border: 1px solid #ccc;
padding: 10px;
min-height: 300px;
}
document.addEventListener("DOMContentLoaded", () => {
const editor = document.getElementById("editor");
const preview = document.getElementById("preview");
function updatePreview() {
const markdown = editor.value;
const html = marked(markdown, { breaks: true });
preview.innerHTML = html;
}
editor.addEventListener("input", updatePreview);
// Initial load
const defaultMarkdown = `
# Heading 1
## Heading 2
[Link](https://www.example.com)
\`inline code\`
\`\`\`
// Code block
const greeting = 'Hello';
console.log(greeting);
\`\`\`
- List item 1
- List item 2
> Blockquote
**Bold text**
`;
editor.value = defaultMarkdown;
updatePreview();
});
Output:
Build a Markdown Previewer
Build a Markdown Previewer
The Markdown Previewer is a simple web application that allows users to input Markdown syntax and preview the rendered HTML output in real-time. This article will cover the implementation of a Markdown Previewer using HTML, CSS, and JavaScript.Markdown is a lightweight markup language that is commonly used for formatting text on the web.
- Markdown is a lightweight markup language with plain-text formatting syntax. Common Markdown syntax includes headings, links, inline code, code blocks, lists, blockquotes, images, and emphasis (bold and italic text).
- The Markdown syntax consists of simple formatting rules such as using # for headers, * or _ for italics, ** or __ for bold, and so on.
- # Hello, Markdown!’
Table of Content
- Vanilla JavaScript Implementation
- Framework/Library Integration (e.g., React):
Contact Us