HTML לממיר Markdown: הפוך סימון אינטרנט מבולגן לטקסט נקי ונייד

אני מעביר תוכן למחייתי, במובן שכל מי שמנהל אתר וורדפרס במשך עשור עושה זאת בסופו של דבר. כשהעברתי אצווה של פוסטים ישנים מבונה דפים ואל מערכת מסמכים מבוססת 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> → ![alt](src)), פנה <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> הופך ![alt text](src).
• <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> עטיפה לא תרמה דבר - מיכלים מבניים כמו <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 הופך לטבלת צינורות Markdown: השורה הראשונה הופכת לכותרת, שורת מפריד מוכנסת, והשורות הנותרות הופכות לגוף. תווי צינור בתוך תאים נמלטים כדי שלא ישברו את הטבלה.

מה קורה לקישורים ולתמונות?

עוגנים הופכים [טקסט קישור](href) ותמונות הופכות ![alt text](src), שמירה על תכונת הכותרת כאשר היא קיימת. אם אתה מכבה את "שמור קישורים" טקסט העוגן נשמר אך כתובת האתר נשמטת, ומכבה את "שמור תמונות" מסיר תמונות לחלוטין - שימושי כאשר אתה רוצה רק את הפרוזה.

האם בלוקים של קוד וקוד מוטבע נשמרים?

כן. א

 block becomes a fenced code block, and if the code element carries a class like "language-js" that language is added to the fence. Inline  spans are wrapped in backticks, and the code text itself is never escaped or reformatted, so snippets stay exactly as written.

Will it work on messy HTML copied from a website?
That is what it is built for. The parser is tolerant of unclosed tags, uppercase element names, unquoted attributes and stray comments, and it strips