LibraTool logoLibraTool

ਮੁਫ਼ਤ Markdown ਐਡੀਟਰ

ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ Markdown ਲਿਖੋ ਅਤੇ ਪ੍ਰੀਵਿਊ ਕਰੋ। ਸਿਰਲੇਖ, ਬੋਲਡ, ਇਟੈਲਿਕ, ਕੋਡ ਬਲਾਕ, ਟੇਬਲ, ਅਤੇ ਸੂਚੀਆਂ ਸਮਰਥਿਤ ਹਨ।

ਲੋਡ ਹੋਣ ਤੋਂ ਬਾਅਦ ਔਫ਼ਲਾਈਨ ਕੰਮ ਕਰਦਾ ਹੈ
91 ਸ਼ਬਦ · 507 ਅੱਖਰ
ਮਾਰਕਡਾਊਨ
ਝਲਕ
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Markdown ਐਡੀਟਰ ਵਿੱਚ ਸੁਆਗਤ ਹੈ</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 ਨੂੰ John Gruber ਨੇ 2004 ਵਿੱਚ ਵੈੱਬ ਲਈ ਲਿਖਣਾ ਸੌਖਾ ਬਣਾਉਣ ਲਈ ਬਣਾਇਆ ਸੀ।</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>
ਮਾਰਕਡਾਊਨ ਚੀਟਸ਼ੀਟ
# Heading 1H1
**bold**ਬੋਲਡ
*italic*ਇਟੈਲਿਕ
`code`ਇਨਲਾਈਨ ਕੋਡ
- itemਬੁਲੇਟ ਸੂਚੀ
1. itemਗਿਣਤੀ ਵਾਲੀ ਸੂਚੀ
> quoteਬਲਾਕਕੋਟ
[text](url)ਲਿੰਕ
![alt](url)ਚਿੱਤਰ
---ਵਿਭਾਜਕ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਝਲਕ ਟੂਲ ਵਿੱਚ ਹੀ ਬਣੇ ਹੱਥ ਨਾਲ ਲਿਖੇ Markdown parser ਨਾਲ ਬਣਦੀ ਹੈ — ਕੋਈ marked, remark ਜਾਂ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਰੋਤ ਨੂੰ ਲਾਈਨ-ਦਰ-ਲਾਈਨ tokenize ਕਰਦਾ ਹੈ, ਸਿੰਟੈਕਸ ਨੂੰ HTML ਵਿੱਚ ਬਦਲਦਾ ਹੈ ਜੋ ਫਿਰ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ sanitizer ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ।

  1. 1
    ਲਾਈਨ-ਦਰ-ਲਾਈਨ tokenization
    ਖ਼ਾਸ renderMarkdown function ਤੁਹਾਡੇ ਸਰੋਤ ਨੂੰ ਨਵੀਆਂ ਲਾਈਨਾਂ 'ਤੇ ਵੰਡਦਾ ਹੈ ਅਤੇ ਇੱਕੋ ਪਾਸ ਵਿੱਚ ਉਨ੍ਹਾਂ ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ, ਤਰਜੀਹ ਕ੍ਰਮ ਵਿੱਚ fenced code blocks, headings (H1–H6), blockquotes, ਕ੍ਰਮਬੱਧ ਅਤੇ ਬਿਨਾਂ-ਕ੍ਰਮ ਸੂਚੀਆਂ, GFM ਸਾਰਣੀਆਂ (ਕਾਲਮ-alignment ਨਾਲ), horizontal rules, ਅਤੇ ਪੈਰੇ ਮਿਲਾਉਂਦੇ ਹੋਏ।
  2. 2
    Inline ਸਿੰਟੈਕਸ ਵਿਸਥਾਰ
    ਹਰ ਇਕੱਠੀ ਲਾਈਨ ਜਾਂ ਸੈੱਲ ਫਿਰ inlineMarkdown ਨਾਲ ਪ੍ਰੋਸੈਸ ਹੁੰਦਾ ਹੈ, regex ਬਦਲਾਂ ਦੀ ਇੱਕ ਲੜੀ ਜੋ bold (** ਅਤੇ __), italic (* ਅਤੇ _), bold-italic (***), strikethrough (~~), inline code (), ਚਿੱਤਰ (![alt](url)), ਅਤੇ ਲਿੰਕ ([text](url)) ਸੰਭਾਲਦੀ ਹੈ — ਚਿੱਤਰ ਲਿੰਕਾਂ ਤੋਂ ਪਹਿਲਾਂ ਹੱਲ ਹੁੰਦੇ ਹਨ ਤਾਂ ਜੋ ! ਅਗੇਤਰ ਗ਼ਲਤ ਢੰਗ ਨਾਲ ਨਾ ਖਪੇ।
  3. 3
    Sanitization ਅਤੇ ਦੂਰ-ਦੁਰਾਡੇ ਸਰੋਤਾਂ ਨੂੰ ਰੋਕਣਾ
    renderer ਦਾ ਬਣਾਇਆ ਕੱਚਾ HTML ਇੱਕ sanitizer (sanitize-html) ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ ਜੋ <script>, onerror handlers, ਅਤੇ javascript: hrefs ਵਰਗੇ ਅਸੁਰੱਖਿਅਤ tags ਅਤੇ attributes ਹਟਾਉਂਦਾ ਹੈ। ਦੂਜਾ ਪਾਸ (neutralizeRemote) ਡਿਫ਼ਾਲਟ ਤੌਰ 'ਤੇ ਦੂਰ-ਦੁਰਾਡੇ ਚਿੱਤਰ src ਮੁੱਲਾਂ ਨੂੰ placeholders ਨਾਲ ਬਦਲਦਾ ਹੈ, ਤੁਹਾਡੀ ਮਨਜ਼ੂਰੀ ਤੋਂ ਪਹਿਲਾਂ ਝਲਕ ਨੂੰ ਚੁੱਪ-ਚਾਪ ਬਾਹਰੀ ਸਰਵਰਾਂ ਨਾਲ ਸੰਪਰਕ ਕਰਨ ਤੋਂ ਰੋਕਦੇ ਹੋਏ।
  4. 4
    .md ਜਾਂ ਸੁਤੰਤਰ .html ਵਜੋਂ ਐਕਸਪੋਰਟ
    Markdown ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰਨਾ ਕੱਚਾ ਸਰੋਤ ਟੈਕਸਟ ਲਿਖਦਾ ਹੈ। HTML ਡਾਊਨਲੋਡ ਕਰਨਾ sanitize ਕੀਤੇ ਆਉਟਪੁੱਟ ਨੂੰ ਆਪਣੀ inline stylesheet ਵਾਲੇ ਸਵੈ-ਨਿਰਭਰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ — Tailwind classes ਸਿਰਫ਼ ਸਾਈਟ ਅੰਦਰ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਐਕਸਪੋਰਟ ਇਸਦੀ ਥਾਂ ਸਾਦੇ CSS rules ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਫ਼ਾਈਲ ਕਿਤੇ ਵੀ ਪੜ੍ਹੀ ਜਾ ਸਕਦੀ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ

ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ