אני מעביר תוכן למחייתי, במובן שכל מי שמנהל אתר וורדפרס במשך עשור עושה זאת בסופו של דבר. כשהעברתי אצווה של פוסטים ישנים מבונה דפים ואל מערכת מסמכים מבוססת Markdown, גיליתי מה "clean HTML" באמת אומר בטבע: <p> תגיות עם סגנונות מוטבעים, ריק <span>s עוטף מילים בודדות, <div>s שלוש רמות עמוק סביב פסקה, ומדי פעם תג שפשוט מעולם לא נסגר הדבקת זה לתוך שדה Markdown נתנה לי קיר של סוגריים זווית מילולית העתקה-הדבקה של מעובד טקסט איבד כל קישור, כותרת ורשימה. אף קיצור דרך לא עבד, ובסופו של דבר ניקיתי מאמרים ביד אחר צהריים לפני שהגעתי להגיון לגבי זה.
להיות הגיוני פירושו להתייחס ל-HTML-to-Markdown כאל מה שהוא: טרנספורמציה מובנית עם מערכת ברורה של כללים, לא העתק-הדבק. אלמנט כותרת הופך ל- # קַו. מודגש הופך **. קישור הופך [text](url). שולחן הופך לשולחן צינורות. ברגע שיש לך את המיפויים האלה ומנתח סובלני מספיק כדי לשרוד סימון בעולם האמיתי, ההמרה משעממת ואמינה - וזה בדיוק מה שאתה רוצה. אני בונה Toolz.dev ולשים מבוסס דפדפן HTML לממיר Markdown שם זה מיישם את הכללים האלה, אבל המדריך הזה עוסק בכללים עצמם כדי שתבינו איך הפלט צריך להיראות ולמה.
TL;DR: כדי להמיר HTML ל-Markdown, מפה רכיבי בלוק למקבילות ה-Markdown שלהם (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ בלוק מגודר), מפה אלמנטים מוטבעים (<strong>→**,<em>→*,<a>→[text](href),<img>→), פנה<table>לתוך טבלת צינורות GitHub Flavored Markdown, פענח ישויות HTML בחזרה לתווים אמיתיים, ושחרר<script>/<style>. השתמש בסובלני מנתח לתגים לא סגורים, ועשה זאת בדפדפן כדי שהתוכן שלך לעולם לא יועלה.
למה להמיר HTML ל-Markdown בכלל?
Markdown הוא הפורמט הנייד של רשת המפתחים המודרנית. קבצי README, אתרי תיעוד, בלוגים סטטיים (Hugo, Jekyll, Astro, Next.js content), שימו לב לאפליקציות כמו Obsidian ו-Bear, בעיות GitHub, ויותר ויותר ההנחיות וההקשר שאנו מזינים למודלים של AI - כולם מדברים Markdown. It' טקסט רגיל, הוא שונה בצורה נקייה ב-Git, והוא שורד את המעבר ממערכת אחת לאחרת מבלי לגרור ערימה של סימון מצגות יחד איתו.
HTML, לעומת זאת, זה מה שאתה לסיים עם בכל פעם שתוכן עובר דרך דפדפן או עורך WYSIWYG.העתק קטע מדף אינטרנט, ייצא מ-CMS, משוך גוף של מאמר מתוך API, או תפוס טקסט מעוצב משדה טקסט עשיר, ותקבל HTML - בדרך כלל HTML עמוס, מלא ברכיבי מעטפת וסגנונות מוטבעים שאתה עושה ' לא רוצה במסמך נקי ההמרה היא הגשר מ-" תוכן לכוד בסימון מצגת" ל-"content אני יכול לגירסה, לערוך ולפרסם מחדש בכל מקום."
התרחישים חוזרים על עצמם ללא הרף ברגע שאתה מבחין בהם העברת בלוג מחוץ לוורדפרס או מדיום משיכת תיעוד ממערכת עזרה HTML מדור קודם הפיכת מאמר מגורד להערת Markdown המרת ניוזלטר דואל's HTML לטיוטה Markdown הזנת דף אינטרנט's תוכן ל-LLM כהקשר נקי במקום HTML גולמי שמבזבז עליו אסימונים <div> מרק בכל מקרה החלופות הידניות - הקלדה מחדש, או הדבקה מחדש של טקסט מעובד ובנייה מחדש של העיצוב ביד - הן איטיות ומפסידות. ממיר מבוסס כללים אינו אף אחד מהם.
כיצד ממפה HTML ל-Markdown?
המיפוי מתפצל באופן טבעי לשתי שכבות: מבנה ברמת הבלוק ועיצוב מוטבע.
חסום אלמנטים הגדר את השלד של המסמך 's, ולכל אחד מהם יש מקביל ישיר של Markdown:
<h1>-<h6>להפוך ל#דרך######קווי כותרת.<p>הופך לפסקה המופרדת בשורות ריקות.<ul>/<li>להפוך ל-רשימות תבליטים;<ol>/<li>להפוך ל1.רשימות ממוספרות ורשימות מקוננות מוזחות בשני רווחים.<blockquote>קידומות כל שורה עם>.<hr>הופך---.<pre><code>הופך לבלוק קוד מגודר עם backticks משולש.<table>הופך לשולחן צינורות Markdown בטעם GitHub.
אלמנטים מוטבעים לקשט טקסט בתוך הבלוקים האלה:
<strong>ו<b>להפוך ל**bold**.<em>ו<i>להפוך ל*italic*.<code>הופך`inline code`.<a href="...">הופך[link text](href), שמירה עלtitleתכונה כאשר קיים.<img>הופך.<del>ו<s>להפוך ל~~strikethrough~~(סיומת GitHub Flavored Markdown).<br>הופך לשבירת קו קשיח - שני רווחים נגררים לפני הקו החדש.
הפעל את הכללים האלה על בלוק אמיתי של HTML והמבנה שורד ללא פגע. בהינתן קלט זה:
<article>
<h1>Getting Started</h1>
<p>Convert <strong>HTML</strong> into clean <em>Markdown</em>.</p>
<ul>
<li>Paste from a CMS</li>
<li>Get portable output</li>
</ul>
<pre><code class="language-js">const md = convert(html)</code></pre>
</article>
אתה מקבל:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
כדאי לקרוא שני פרטים בפלט הזה. ראשית, ה <article> wrapper לא תרם דבר - מיכלים מבניים כמו <article>, <section>, ו <div> שקופים; הממיר חוזר לתוכם ומעבד את ילדיהם כבלוקים. שנית, גדר הקוד נקלטה js כשפתו. That's כי ה <code> אלמנט נישא class="language-js", מדגשים תחביר מוסכמה להשתמש, וממיר טוב קורא כי מחלקה לתייג את הגדר. It's דבר קטן שעושה את ההבדל בין בלוק קוד מדגיש באתר docs שלך ואחד שעושה 't.
מה גורם לממיר לשרוד HTML בעולם האמיתי?
הכללים לעיל הם החלק הקל הסיבה בגלגול ידני ממירי regex להיכשל - ו I' יש כתוב וזרק זוג - הוא כי HTML אמיתי שובר הנחות ללא הרף שלוש בעיות עולות שוב ושוב.
תגיות unclosed. דפדפנים הם סלחניים מפורסמים: <p>one<p>two מציג כשתי פסקאות כי א <p> נסגר באופן מרומז כאשר אלמנט בלוק אחר נפתח, ו <li>a<li>b הוא שני פריטי רשימה מאותה סיבה מנתח נאיבי שסוגר רק אלמנטים על מפורש </p> יקנן את הפסקה השנייה בתוך הראשונה ויבלבל הכל במורד הזרם. ממיר חזק מיישם את אותם כללי תג קצה מרומזים שמפרט ה-HTML מגדיר: פתיחת אלמנט ברמת בלוק סוגרת פסקה פתוחה; פתיחת א <li> סוגר את הקודם הממיר שלי עושה את זה, וזו הסיבה שהדבקת פלט CMS מרושל בדרך כלל פשוט עובדת.
<script> ו <style> בלוקים. אלה מכילים קוד ו-CSS, לא תוכן, ויש לקחת את תוכנם מילה במילה (א < בתוך JavaScript הוא לא תג) ולאחר מכן ירד לחלוטין. שכח מהם למקרה מיוחד ותקבל דימום ממקור JavaScript לתוך ה-Markdown שלך.
ישויות HTML. תוכן אינטרנט זרוע &, ©, —, , והפניות מספריות כמו ’. ב-Markdown - שהוא טקסט רגיל - אתה רוצה את התווים בפועל: &, ©, —, ואפוסטרופ אמיתי. פענוח ישויות בשם ומספריות אינו אופציונלי; דלג על זה וה-Markdown הנקי שלך קורא כמו view-source.
זו הסיבה שהפסקתי לנסות להמיר HTML עם find-and-replace ובניתי מנתח סובלני תקין במקום זה הוא tokenizes את HTML לתוך עץ - טיפול הערות, אלמנטים ריק כמו <br> ו <img>, שמות תגים באותיות רישיות ותכונות לא מצוטטות - ואז הולך על העץ הזה ופולט Markdown. יש לציין שהוא 't מסתמך על הדפדפן 's DOM, מה שאומר שאותו היגיון פועל גם על שרת, אבל התמורה המעשית עבורך היא פשוטה: זה 't לזרוק על הסימון המבולגן שממנו עשויים אתרים אמיתיים.
איך אני משתמש בממיר?
על Toolz.dev/tools/html-to-markdown, הדבק את ה-HTML שלך בחלונית השמאלית וה-Markdown מופיע בצד ימין תוך כדי הקלדה - שם' אין להעלות ואין כפתור המר לחיפוש. טען את המדגם אם אתה רוצה לראות כל מבנה נתמך בבת אחת.
כמה אפשרויות מכסות את ההעדפות הנפוצות. בחר את דמות הקליע שלך (-, *, או +) לרשימות לא מסודרות שיתאימו לפרויקט שלך's style. שמור על סימון בטעם GitHub עבור טבלאות וחבטות, או כבוי אם היעד שלך מקבל רק CommonMark. החלף "שמור קישורים" כבוי כאשר אתה רוצה את הפרוזה אך לא את כתובות האתרים - שימושי להפיכת מאמר כבד קישורים לטקסט קריאה נקי - ו-"שמור תמונות" כבוי כדי להפשיט תמונות לחלוטין שורת הנתונים הסטטיסטיים מציגה מילים, כותרות, קישורים, תמונות, בלוקי קוד וזמן קריאה משוער, שהוא בדיקת שפיות מהירה שהמבנה נתקל לפני שהדבקת את התוצאה איפשהו.
כמו בכל דבר באתר, ההמרה היא 100% בצד הלקוח המנתח הוא JavaScript רגיל הפועל בדפדפן שלך, כך דפים מודבקים, תיעוד פנימי, וטיוטות שלא פורסמו לעולם לא נשלחים לשום מקום.That 's ברירת המחדל הנכונה עבור עבודת תוכן - אתה צריך 't צריך להעלות טיוטה לשרת stranger's רק כדי לעצב אותו מחדש - וזה אומר שהכלי ממשיך לעבוד במצב לא מקוון. אני מעמיק מדוע עיבוד בצד הדפדפן חשוב ב מדריך כלים לפרטיות נתונים.
HTML לעומת Markdown: מתי להשתמש באיזה
המרה ביניהם קלה; לדעת מה אתה רוצה זו ההחלטה האמיתית.
| אספקט | HTML | סימון |
|---|---|---|
| מטרה עיקרית | רינדור בדפדפן | כתיבה ואחסון טקסט |
| קריאות כמקור | מסכן (כבד תג) | מצוין (נקרא כטקסט רגיל) |
| Git diffs | רועש | נקי |
| ניידות בין מערכות | נמוך | גבוה |
| בקרת פריסה מדויקת | מלא | מוגבל בעיצוב |
| איפה זה גר | דפי אינטרנט, פלט WYSIWYG | READMEs, מסמכים, הערות, אתרים סטטיים |
| עקומת למידה | תלול | דקות |
Markdown מחליף בכוונה בקרת פריסה לשם פשטות, וזו הסיבה שהוא מנצח עבור תוכן שאתה כותב, גרסה ומסתובב, ומפסיד כאשר אתה צריך מצגת ברמת הפיקסלים. המר HTML ל-Markdown כאשר אתה ' לוכדים או מעבירים תוכן; שמור HTML כאשר אתה ' מחדש בונים א עמוד. וכאשר אתה צריך ללכת לכיוון השני - סימון ל-HTML עבור שדה CMS או תבנית דואל - ה Markdown כדי HTML ממיר האם תמונת המראה של הכלי הזה וחולקת את אותן מוסכמות, כך שהשניים הלוך ושוב נקיים עבור מבנים משותפים.
איפה זה מתאים לזרימת עבודה של תוכן
המרת פורמט היא לעתים רחוקות כל העבודה; it's שלב אחד. לאחר שאמיר מאמר ל-Markdown I' בדרך כלל אריץ את הטקסט דרך א מונה מילים כדי לבדוק אורך מול יעד, ואם למקור היו ישויות HTML שצריכות קידוד בחזרה עבור יעד אחר, ה מקודד/מפענח ישות HTML מטפל הפוך. When I'm cleaning up hand-written HTML before conversion, an מניין HTML מפשיט את הרעש ראשון הכלים הקטנים האלה משתלבים יחד לצינור שניתן לחזור עליו, וזה כל הרעיון מאחורי איך אני חושב על ערכת כלים מבוססת דפדפן - פרסתי את הפילוסופיה הזו ב מדריך ערכת כלים למפתחי אינטרנט והרחב יותר מדריך כלי קידוד.
טעויות נפוצות בהמרת HTML ל-Markdown
העתקה-הדבקה של טקסט מעובד במקום המרת ה-HTML. אתה מאבד קישורים, כותרות, ורשימות - כל המבנה.Convert הסימון בפועל.
התעלמות ממחלקת שפת הקוד. אם הבלוקים המגודרים שלך יוצאים ללא שפה ו-don't להדגיש, הממיר הפיל את class="language-x" רמז. אחד טוב קורא את זה.
בהנחה ש-CommonMark ו-GFM זהים. טבלאות ומעבר קו הם הרחבות של GitHub Flavored Markdown, לא הליבה CommonMark. אם היעד שלך הוא CommonMark קפדני, טבלה זכתה 't render - המר עם GFM כבוי וטפל בטבלאות בדרך אחרת.
אמון ממיר שמעלה את התוכן שלך. שפע של "free" ממירים מקוונים POST HTML שלך לשרת.לכל דבר שלא פורסם או פנימי, that's דליפה. השתמש בכלי בצד הלקוח.
שָׁוא
כיצד אוכל להמיר HTML ל-Markdown?
הדבק את ה-HTML שלך בעורך וה-Markdown מופיע מיד - אין קובץ להעלות ואין כפתור המרה ללחיצה. התאם את סגנון התבליט או טיפול בקישורים אם תרצה, ולאחר מכן העתק את ה-Markdown או הורד אותו כקובץ.md.
האם הממיר מטפל בשולחנות?
כן. עם GitHub Flavored Markdown מופעל, HTML <table> הופך לטבלת צינורות Markdown: השורה הראשונה הופכת לכותרת, שורת מפריד מוכנסת, והשורות הנותרות הופכות לגוף. תווי צינור בתוך תאים נמלטים כדי שלא ישברו את הטבלה.
מה קורה לקישורים ולתמונות?
עוגנים הופכים [link text](href) ותמונות הופכות , שמירה על תכונת הכותרת כאשר היא קיימת. אם אתה מכבה את "שמור קישורים" טקסט העוגן נשמר אך כתובת האתר נשמטת, ומכבה את "שמור תמונות" מסיר תמונות לחלוטין - שימושי כאשר אתה רוצה רק את הפרוזה.
האם בלוקים של קוד וקוד מוטבע נשמרים?
כן. א <pre><code> בלוק הופך לבלוק קוד מגודר, ואם אלמנט הקוד נושא מחלקה כמו "language-js" השפה הזו מתווספת לגדר. מוטבע <code> טווחים עטופים באותיות אחוריות, וטקסט הקוד עצמו לעולם אינו נמלט או מעוצב מחדש, כך שקטעים נשארים בדיוק כפי שנכתבו.
האם זה יעבוד על HTML מבולגן שהועתק מאתר אינטרנט?
בשביל זה הוא בנוי המנתח סובלני לתגים לא סגורים, שמות אלמנטים גדולים, תכונות לא מצוטטות והערות תועות, והוא מפשיט ובלוקים <style>. פלט CMS או WYSIWYG מועתק בדרך כלל ממיר בצורה נקייה, אם כי מבנים מקוננים מאוד יוצאי דופן עשויים להזדקק לסדר ידני קטן.</p> <h3>האם זה הופך את הכלי Markdown ל-HTML, אז הפעלת Markdown דרך הכלי הזה והתוצאה חזרה דרך זה משחזרת בדרך כלל את המסמך המקורי. Whitespace וכמה תכונות של HTML בלבד הם המקורות הרגילים להבדלים קטנים.</p> <h3>האם התוכן שלי מועלה לשום מקום?</h3> <p>לא. ההמרה פועלת במלואה בדפדפן שלך באמצעות JavaScript רגיל - שום דבר שאתה מדביק נשלח לשרת, נרשם או מאוחסן. זה הופך אותו לבטוח עבור דפים פנימיים, טיוטות שלא פורסמו וכל תוכן שאתה מעדיף לא להעלות, והוא ממשיך לעבוד ללא חיבור לרשת.</p> <h3> האם הממיר HTML ל-Markdown בחינם?</h3><p>Yes. אין הרשמה, אין מגבלת שימוש, אין סימן מים ואין העלאה. class="language-json">{ "@context": "faQPage", "@type": "0Qut;: "Question", "name": "איך אני ממיר HTML ל-Markdown?", "text": "הדבק את ה-HTML שלך בעורך וה-Markdown מופיע מיד - אין קובץ להעלאה ואין כפתור המרה ללחוץ. התאם את סגנון הקליע או טיפול בקישורים אם תרצה, ואז העתק את ה-Markdown או הורד אותו כקובץ.md." } }, { "@type": "האם הממיר מטפל בטבלאות?", "name": "האם הממיר מטפל בטבלאות?", "acceptedAnswer": { "@type": "Answer", "text": "כן. עם GitHub Flavored Markdown מופעל, HTML <table> הופך לטבלת צינורות Markdown: השורה הראשונה הופכת לכותרת, שורת מפריד מוכנסת, והשורות הנותרות הופכות לגוף. תווי צינור בתוך תאים נמלטים כך שהם לא שוברים את הטבלה." } }, { " @type": "Question", "name": "מה קורה לקישורים ותמונות?", "text": "עוגנים הופכים ל[טקסט קישור] (href) ותמונות הופכות ל-![alt text] (src), תוך שמירה על תכונת הכותרת כאשר היא קיימת. אם אתה מכבה את \"שמור קישורים\" טקסט העוגן נשמר אך כתובת האתר נשמטת, ומכבה את \"שמור תמונות\": "שאלה", "name": "האם בלוקים של קוד וקוד מוטבע נשמרים?", "text": "כן. A "Answer", "text": "כן, המנתח אינו מכיל מחלקה כמו \"language-js\" " המנתח נשאר בדיוק כפי שנכתב." } }, { " @type": " Question", "text": " לשם כך הוא בנוי. המנתח סובלני לתגים לא סגורים, שמות אלמנטים באותיות רישיות, תכונות לא מצוטטות והערות תועה, והוא מפשיט את <script> ו-<style> בלוקים. פלט CMS או WYSIWYG מועתק בדרך כלל בצורה נקייה, אם כי מבנים מקוננים מאוד יוצאי דופן עשויים להזדקק למסודר ידני קטן." } }, { " @type": "Question", "name": "האם זה הופך את הכלי Markdown to HTML?", " טקסט": "עבור המבנים הנפוצים, כן. הממיר הזה הוא היפוך של הכלי Markdown ל-HTML, אז הפעלת Markdown דרך הכלי הזה והתוצאה חזרה דרך זה משחזרת בדרך כלל את המסמך המקורי. Whitespace וכמה תכונות של HTML בלבד הם המקורות הרגילים להבדלים קטנים." } }, { "@type": "Question", "name": "האם התוכן שלי הועלה לכל מקום?", " "acceptedAnswer": { "@type": "לא. ההמרה פועלת כולה בדפדפן שלך באמצעות JavaScript רגיל - שום דבר שאתה מדביק נשלח לשרת, מתועד או מאוחסן. זה הופך אותו בטוח עבור דפים פנימיים, טיוטות שלא פורסמו וכל תוכן שאתה מעדיף לא להעלות, וזה ממשיך לעבוד ללא חיבור לרשת." } } }, { " @type": " האם ממיר HTML ל-Markdown בחינם?", "name": " האם הממיר HTML ל-Markdown בחינם?", "text": "כן. אין הרשמה, אין מגבלת שימוש, אין סימן מים ואין העלאה. המרה מתרחשת באופן מקומי בדפדפן שלך, והדף ממשיך לעבוד במצב לא מקוון לאחר טעינתו." } } ] } </code></pre><
