From 5ae2a29ef6c08cde8f3a976411b1c8a650e0806e Mon Sep 17 00:00:00 2001
From: DoctorLai <dr.zhihua.lai@gmail.com>
Date: Tue, 17 Jun 2025 19:16:43 +0100
Subject: [PATCH] Add simple preview

---
 README.md   | 5 +++--
 src/App.jsx | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a658ca6..91c8b0f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-# Markdown to HTML Converter
+# Markdown to HTML Converter/Previewer
 [![Markdown-HTML-Converter (Built, Lint and Test)](https://github.com/DoctorLai/markdown-html-converter/actions/workflows/ci.yaml/badge.svg)](https://github.com/DoctorLai/markdown-html-converter/actions/workflows/ci.yaml)
 
-A simple web-based tool to convert Markdown to HTML. This app is built using React and runs in the browser. It provides an easy-to-use interface with two text areas, where you can paste your Markdown source (left) and convert it to HTML (right).
+A simple web-based tool to convert Markdown to HTML. This app is built using React and runs in the browser. It provides an easy-to-use interface with two text areas, where you can paste your Markdown source (left) and convert it to HTML (right). Meantime, the HTML will be previewed on the page.
 
 ![image](https://github.com/user-attachments/assets/c0afac08-cae8-48a1-b040-b2c5b6374b0f)
 
@@ -12,6 +12,7 @@ A simple web-based tool to convert Markdown to HTML. This app is built using Rea
 - **Tab Support**: Properly inserts spaces when pressing the "Tab" key inside text areas.
 - **Simple and Intuitive UI**: Easy to use with a clean interface.
 - **Deploy Easily**: `npm run build` and `npm run deploy`
+- **Previewer** The tool provides a real-time HTML previewer for the given markdown source.
 
 ## Live Demo
 
diff --git a/src/App.jsx b/src/App.jsx
index 95fb4c3..89480c0 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -74,6 +74,13 @@ export default function App() {
           <button onClick={convertToHtml}>Convert to HTML →</button>
           <button onClick={clearInputs}>❌ Clear</button>
         </div>
+
+        {/* Live HTML Preview */}
+        <h2>🔍 Live Preview</h2>
+        <div
+          className="preview"
+          dangerouslySetInnerHTML={{ __html: htmlOutput }}
+        ></div>
       </div>
       <footer>
         <p>