📝
મફત Markdown એડિટર
રિયલ ટાઇમમાં Markdown લખો અને પ્રિવ્યુ કરો. હેડિંગ, બોલ્ડ, ઇટાલિક, કોડ બ્લોક્સ, ટેબલ અને લિસ્ટ સપોર્ટ કરે છે.
એક વાર લોડ થયા પછી ઑફલાઇન કામ કરે છે
91 શબ્દો · 541 અક્ષરો
Markdown
પ્રિવ્યૂ
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Markdown Editor માં આપનું સ્વાગત છે</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">ડાબી બાજુ <strong>Markdown</strong> લખો, જમણી બાજુ લાઇવ પ્રિવ્યુ જુઓ.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">લક્ષણો</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>બોલ્ડ</strong>, <em>ઇટાલિક</em>, અને <del>સ્ટ્રાઇકથ્રુ</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">ઇનલાઇન કોડ</code> અને ફેન્સ્ડ કોડ બ્લોક્સ</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">લિંક્સ</a></li><li class="my-0.5">લિસ્ટ્સ, બ્લોકક્વોટ્સ, ટેબલ્સ, અને વધુ</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">કોડ ઉદાહરણ</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown ને 2004 માં John Gruber એ વેબ માટે લખવાનું સરળ બનાવવા બનાવ્યું હતું.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">ફીચર</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">સપોર્ટેડ</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">હેડિંગ્સ</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">યાદીઓ</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">કોષ્ટકો</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">કોડ</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown ચીટશીટ
# Heading 1H1
**bold**બોલ્ડ
*italic*ઇટાલિક
`code`ઇનલાઇન કોડ
- itemબુલેટ લિસ્ટ
1. itemનંબરવાળી લિસ્ટ
> quoteબ્લોકક્વોટ
[text](url)લિંક
ઇમેજ
---ડિવાઇડર
આ કેવી રીતે કાર્ય કરે છે
Preview ટૂલમાં જ સીધા બનેલા હાથે લખેલા Markdown parser વડે render થાય છે — કોઈ marked નહીં, કોઈ remark નહીં, કોઈ બાહ્ય લાઇબ્રેરી નહીં. તે source ને line-by-line બ્રાઉઝરમાં tokenize કરે છે, syntax ને HTML માં રૂપાંતરિત કરીને જે display પહેલાં sanitizer માંથી પસાર થાય છે.
- 1લાઇન-બાય-લાઇન ટોકનાઇઝેશનકસ્ટમ renderMarkdown ફંક્શન તમારા source ને newlines પર વિભાજિત કરે છે અને એક જ pass માં તેમાંથી પસાર થાય છે, priority order માં fenced code blocks, headings (H1–H6), blockquotes, ordered અને unordered lists, GFM tables (column-alignment સાથે), horizontal rules, અને paragraphs ને મેચ કરે છે.
- 2ઇનલાઇન સિન્ટેક્સ વિસ્તરણદરેક ભેગી કરેલી line કે cell પછી inlineMarkdown દ્વારા પ્રોસેસ થાય છે, regex replacements ની ચેન જે bold (** અને __), italic (* અને _), bold-italic (***), strikethrough (~~), inline code (), images (), અને links ([text](url)) હેન્ડલ કરે છે — images links પહેલાં resolve થાય છે જેથી ! prefix ખોટી રીતે consume ન થાય.
- 3Sanitization અને remote-resource blockingRenderer દ્વારા બનેલો raw HTML <script>, onerror handlers, અને javascript: hrefs જેવા unsafe tags અને attributes કાઢી નાખવા sanitizer (sanitize-html) માંથી પસાર થાય છે. બીજો pass (neutralizeRemote) ડિફૉલ્ટ રીતે remote image src મૂલ્યોને placeholders વડે બદલે છે, જે તમે opt in ન કરો ત્યાં સુધી preview ને silently external servers ને phone home કરતાં અટકાવે છે.
- 4.md કે standalone .html તરીકે Export કરોMarkdown કૉપી કરવું કે ડાઉનલોડ કરવું raw source ટેક્સ્ટ લખે છે. HTML ડાઉનલોડ કરવાથી sanitized આઉટપુટ પોતાના inline stylesheet સાથે self-contained document માં લપેટાય છે — Tailwind ક્લાસ ફક્ત site ની અંદર જ કામ કરે છે, તેથી export ને બદલે plain CSS rules bundle કરે છે, જે ફાઇલને ગમે ત્યાં વાંચી શકાય તેવી બનાવે છે.
સંબંધિત સાધનો
HTML થી Markdown કન્વર્ટર
HTML ને સ્વચ્છ Markdown માં કન્વર્ટ કરો. હેડિંગ, લિસ્ટ, લિંક્સ, ઇમેજ, કોડ બ્લોક્સ અને બ્લોકક્વોટ્સ હેન્ડલ કરે છે. CMS માંથી કન્ટેન્ટ ખસેડવા માટે પરફેક્ટ.
પ્રયાસ કરો
Markdown થી HTML કન્વર્ટર
લાઇવ પ્રિવ્યુ સાથે Markdown ને સ્વચ્છ HTML માં કન્વર્ટ કરો. બ્લોગ, CMS કે ઈમેલ ટેમ્પલેટ્સ માટે પેસ્ટ-રેડી HTML કોપી કરવા સોર્સ વ્યુ વાપરો.
પ્રયાસ કરો
Mermaid ડાયાગ્રામ એડિટર
લાઇવ પ્રિવ્યુ સાથે Mermaid સિન્ટેક્સમાં ફ્લોચાર્ટ, સિક્વન્સ ડાયાગ્રામ, ગેન્ટ ચાર્ટ અને વધુ લખો. SVG કે PNG તરીકે એક્સપોર્ટ કરો. સંપૂર્ણપણે તમારા બ્રાઉઝરમાં ચાલે છે.
પ્રયાસ કરો