Markdown முதல் HTML மாற்றி — Markdown ஐ HTML ஆன்லைனில் மாற்றவும் _

Markdown முதல் HTML மாற்றம் என்றால் என்ன?

Markdown என்பது கட்டமைக்கப்பட்ட prose குறியாக்க குறைந்தபட்ச punctuation பயன்படுத்தும் (# headings க்கு, * emphasis க்கு, - list items க்கு) இலகுரக plain-text வடிவம். GitHub Flavored Markdown (GFM) tables, strikethrough, task lists மற்றும் autolinks உடன் original CommonMark spec ஐ விரிவாக்குகிறது. HTML என்பது உலாவி காட்டும் rendered வடிவம். Markdown ஐ HTML ஆக மாற்றுவது இலகுரக தொடரியல்லில் author செய்து tags கையால் எழுதாமல் rendered surface க்கு ship செய்ய அனுமதிக்கிறது.

எந்த GitHub Flavored Markdown features ஆதரிக்கப்படுகின்றன?

Bundled marked@12.0.2 parser முழு GFM superset ஆதரிக்கிறது: ATX-style headings # முதல் ###### வரை, nesting உடன் ordered மற்றும் unordered lists, bold **text** மற்றும் italic *text*, strikethrough ~~text~~, inline links [text](url) மற்றும் inline images ![alt](src), optional language tags உடன் fenced code blocks (```js), inline code spans `code`, header rows உடன் pipe tables, GFM task lists - [ ] / - [x], blockquotes >, horizontal rules --- மற்றும் autolinks. ஒவ்வொன்றும் GitHub render செய்யும் அதே விதத்தில் preview pane ல் render ஆகும்.

Markdown முதல் HTML மாற்றம் எவ்வாறு வேலை செய்கிறது?

ஒவ்வொரு மாற்றமும் இரண்டு bundled libraries பயன்படுத்தி உங்கள் உலாவியில் உள்ளூரில் இயங்குகிறது — CDN இல்லை, fetch இல்லை, telemetry இல்லை. உயர்மட்ட படிகள்:

1. Parse: marked.parse(source) உங்கள் Markdown படித்து ஒரு HTML string உருவாக்குகிறது. Parser GFM mode ல் இயங்குகிறது, எனவே tables, task lists, strikethrough மற்றும் autolinks அனைத்தும் அங்கீகரிக்கப்படுகின்றன.
2. Sanitize: HTML வெளியீடு innerHTML க்கு assign செய்வதற்கு முன்பு DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) மூலம் இயக்கப்படுகிறது. DOMPurify Mozilla MDN, Atlassian மற்றும் Microsoft 365 பயன்படுத்தும் அதே XSS sanitizer — அது HTML பாகுபடுத்தி, DOM நடந்து, <script> elements, ஒவ்வொரு on* event handler attribute மற்றும் javascript: URI schemes நீக்குகிறது.
3. Render: sanitized HTML innerHTML மூலம் preview pane க்கு எழுதப்படுகிறது, மற்றும் raw HTML இரண்டாவது pane ல் read-only <textarea> மூலம் காட்டப்படுகிறது, நீங்கள் markup நகலெடுக்க. Live mode 150 ms debounce செய்கிறது, எனவே நீங்கள் தட்டச்சு செய்யும்போது preview புதுப்பிக்கப்படுகிறது.

இந்த கருவியுடன் Markdown ஐ HTML ஆக ஏன் மாற்ற வேண்டும்?

• தனியுரிமை: ஒவ்வொரு parse, sanitize மற்றும் render பாஸும் உங்கள் உலாவியில் நடைபெறுகிறது. Markdown — unreleased blog posts, internal documentation drafts மற்றும் confidential README content உட்பட — எங்கள் சேவையகங்களை ஒருபோதும் அடைவதில்லை.
• Default ஆக XSS-safe: rendered preview pane innerHTML க்கு முன்பு ஒவ்வொரு HTML string ஐயும் DOMPurify மூலம் இயக்குகிறது, எனவே உங்கள் Markdown ல் கச்சா <script> tags அல்லது onerror= handlers இருந்தாலும் inert preview உருவாகும். raw tab inspection க்காக unsanitized string காட்டுகிறது, ஆனால் read-only <textarea> ல் value மூலம் — ஒருபோதும் execute ஆவதில்லை.
• GFM-complete: tables, strikethrough, task lists மற்றும் autolinks GitHub render செய்யும் அதே விதத்தில் render ஆகும். Markdown pipe-table <thead> மற்றும் <tbody> உடன் HTML <table> ஆகும் — விழுந்த rows இல்லை, தட்டையான structure இல்லை.

Markdown முதல் HTML மாற்றத்தின் பொதுவான பயன்பாடுகள் என்ன?

Markdown ஐ HTML ஆக மாற்றுவது documentation, static-site வேலை மற்றும் email authoring முழுவதும் தோன்றுகிறது:

• GitHub README authoring: push செய்வதற்கு முன்பு Markdown ல் உள்ளூரில் project README draft செய்து rendered HTML preview செய்வது. Preview GitHub இன் GFM renderer உடன் tables, task lists மற்றும் fenced code க்கு பொருந்துகிறது.
• Static-site content: Markdown post ஒட்டி Markdown source க்கு பதிலாக markup எதிர்பார்க்கும் CMS field அல்லது templating engine க்கு HTML எடுப்பது.
• Email templates: email service provider இன் templating engine க்கு Markdown ல் transactional-email body எழுதி HTML க்கு மாற்றுவது. வெளியீடு plain semantic HTML — inline styles இல்லை, email-client quirks இல்லை.

Markdown முதல் HTML மாற்று எடுத்துக்காட்டு எப்படி இருக்கும்?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) ஒட்டுவது <h1>Title</h1>, இரண்டு-item unordered list மற்றும் <a href="https://example.com">link</a> கொண்ட preview pane உருவாக்குகிறது. raw pane exact HTML string காட்டுகிறது, நேரடியாக template ல் நகலெடுக்க. |---|---| alignment row உடன் pipe table <thead> மற்றும் <tbody> உடன் முழு <table> ஆகிறது — GFM tables GitHub render செய்யும் விதத்திலேயே render ஆகும் என்று உறுதிப்படுத்துகிறது.

இந்த Markdown முதல் HTML மாற்றி முழுவதும் என் உலாவியில் இயங்குகிறதா?

ஆம். ஒவ்வொரு parse, sanitize மற்றும் render பாஸும் உங்கள் உலாவி tab க்குள் JavaScript ஆக உள்ளூரில் இயங்குகிறது. bundled libraries — marked@12.0.2 மற்றும் DOMPurify@3.1.7 — பக்கத்தின் அதே origin இலிருந்து ship ஆகுகின்றன, எனவே CDN dependency இல்லை, fetch இல்லை, XMLHttpRequest இல்லை, input ல் navigator.sendBeacon இல்லை. பக்கம் load ஆனதும் offline ல் வேலை செய்கிறது. Unreleased posts, internal docs மற்றும் confidential READMEs உங்கள் சாதனத்தில் இருக்கும்.

Rendered preview pane XSS-safe ஆக இருக்குமா?

ஆம். innerHTML க்கு assign செய்யப்படும் ஒவ்வொரு HTML string ம் முதலில் DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) மூலம் கடக்கிறது. DOMPurify Cure53 நிர்வகிக்கும் open-source XSS sanitizer; Mozilla MDN, Atlassian மற்றும் Microsoft 365 user-supplied HTML harden செய்ய பயன்படுத்தும் அதே library. Default html profile <script> elements, ஒவ்வொரு on* event-handler attribute (onerror, onclick, etc.) மற்றும் javascript: URI schemes நீக்குகிறது. <img src=x onerror=alert(1)> ஒட்டுவது onerror attribute இல்லாத preview உருவாக்கி எந்த alert ம் fire ஆவதில்லை.

GFM tables ஆதரிக்கப்படுகிறதா?

ஆம். Markdown → HTML திசை marked இன் GFM mode மூலம் pipe tables நேட்டிவ் ஆக கையாளுகிறது — |---|---| alignment row ஆல் பிரிக்கப்பட்ட header row, data rows தொடர்ந்து, <thead> + <tbody> உடன் <table> உருவாக்குகிறது. Strikethrough (~~text~~ → <del>text</del>) மற்றும் task lists (- [ ] / - [x] → <input type="checkbox">) GitHub render செய்யும் அதே விதத்தில் render ஆகும்.

என் Markdown சரியாக மாற்றப்படுமா?

Canonical GFM feature set க்கு — headings h1 முதல் h6 வரை, nesting உடன் ordered மற்றும் unordered lists, bold / italic / strikethrough, inline links, inline images, language tags உடன் fenced code blocks, inline code spans, pipe tables, task lists, blockquotes, horizontal rules மற்றும் autolinks — HTML வெளியீடு நிலையானது மற்றும் GitHub renderer உடன் பொருந்துகிறது. சில குறிப்பிடத்தக்க நடத்தைகள்: Markdown க்குள் raw inline HTML (மாதிரி <sub>text</sub>) வெளியீட்டில் மாற்றமின்றி pass ஆகும், மற்றும் CommonMark setext headings (=== underlines) மற்றும் ATX headings (# Title) இரண்டும் அதே <h1> உருவாக்கும். இவை bugs அல்ல, documented marked நடத்தைகள். எதிர் திசை வேண்டுமென்றால் HTML முதல் Markdown கருவியை பயன்படுத்தவும்.

Fenced code blocks ல் syntax highlighting ஆதரிக்கப்படுகிறதா?

v1 ல் இல்லை. Fenced code blocks monospaced font மற்றும் subtle background உடன் render ஆகுகின்றன ஆனால் per-language token highlighting இல்லாமல். Syntax highlighting சேர்க்க Prism அல்லது highlight.js bundle செய்ய வேண்டும், ஒவ்வொன்றும் 15–40 KB plus per-language grammar கோப்பு சேர்க்கிறது. இப்போதைக்கு, renderer correctness மற்றும் XSS-safety மீது கவனம் செலுத்துகிறது; user demand ஐந்தால் opt-in toggle tractable follow-up.

இந்த Markdown முதல் HTML மாற்றி அதே origin ல் bundle செய்யப்பட்ட marked@12.0.2 மற்றும் DOMPurify@3.1.7 உடன் ship ஆகிறது, முழு GFM feature set ஆதரிக்கிறது, மற்றும் DOM ஐ தொடுவதற்கு முன்பு ஒவ்வொரு rendered HTML string ஐயும் sanitize செய்கிறது. பதிவேற்றம் இல்லை, CDN இல்லை, telemetry இல்லை — ஒவ்வொரு byte உம் உங்கள் உலாவியில் இருக்கும்.