אם אתה כותב באינטרנט, אולי תרצה לבדוק את Markdown. יש הרבה אפליקציות Markdown הנותנות מענה לכותבי אינטרנט. אבל עורכי קוד חינמיים כמו Visual Studio Code (VSCode) של מיקרוסופט יכולים להיות אפילו יותר חזקים.

VSCode מבין ב-Markdown ויש לו כלים מובנים לתצוגה מקדימה שלו ב-HTML. עם זאת, אתה יכול להוסיף פונקציונליות של מעבד תמלילים כמו ספירת מילים ובודק איות. ייתכן שתרצה גם להפעיל התאמות אישיות ספציפיות לאתר עבור התצוגה המקדימה.

לבסוף, היכולת להעתיק את Markdown כ-HTML כך שתוכל להדביק אותו בצורה נקייה לתוך מערכת ניהול תוכן (CMS) היא חובה.

הורד והתקן VSCode

כדי להתחיל, הורד את VSCode או VSCodium חלופית הקוד הפתוח שלו. גרסאות של כל אחת מהן זמינות עבור כל מערכות ההפעלה העיקריות לשולחן העבודה.

ברגע שעשית הורדת והתקנת VSCode, הפעל את היישום כדי להתחיל.

התקן את הרחבת ספירת מילים

התחל בהוספת מונה מילים. יש הרבה הרחבות זמינות שמטפלות בזה. זה שמבדיל בצורה הטובה ביותר בין מילים בפועל לבין קוד או שמות קבצים הוא סיומת Word Counter של מיקרוסופט.

הורד:ספירת מילים הרחבת VSCode (חינם)

  1. לחץ על הורד את ההרחבה תַחַת אֶמְצָעִי בחלונית הימנית התחתונה.
    2. instagram viewer
  2. לאחר ההורדה, עבור אל VSCode.
  3. הקלק על ה סמל גלגל השיניים בפינה השמאלית התחתונה של הממשק.
  4. לחץ על הרחבות.
  5. לחץ על האליפסיס (...) ליד החלק העליון של חלונית ההרחבות.
  6. נְקִישָׁה התקן מ- VSIX.
  7. בחר את ms-vscode.wordcount-*.vsix קובץ שהורדת זה עתה.

ה ספירת מילים כעת יש להתקין את ההרחבה. בדוק אותו על ידי פתיחת קובץ Markdown חדש והקלדה. כעת אתה אמור לראות מונה מילים בצד שמאל למטה של ​​הממשק:

התקן את ההרחבה לבדיקת איות

כמו כן, תרצה להוסיף פונקציונליות של בדיקת איות. כמו עם מונה מילים, יש הרחבות רבות שמטפלות בבדיקת איות. הפופולרי ביותר הוא בדיקת איות קוד על ידי Street Side Software מכיוון שהיא זמינה בשפות רבות.

הורד:בדיקת איות קוד הרחבת VSCode (חינם)

  1. בצע את שלבים 1 עד 6 מהסעיף שלמעלה.
  2. בחר את streetsidesoftware.code-spell-checker-*.vsix קובץ שהורדת זה עתה.

ה בדיקת איות קוד כעת יש להתקין את ההרחבה. בדוק את זה על ידי פתיחת קובץ Markdown חדש והקלדת מילים באיות שגוי.

אתה אמור לראות קו מתפתל כחול מתחת למילים הללו יחד עם ספירת שגיאות בצד הימני התחתון של הממשק:

התאם אישית את ה-Error Squiggle

הבעיה הגדולה ביותר עם הרחבה זו של בדיקת איות היא הצבע הכחול החלש המשמש עבור הפיתול המזהה שגיאות. זה נוטה להשתלב ברקע של ערכות נושא כהות ועושה שימוש חוזר עבור אלמנטים אחרים של Markdown.

אתה יכול לנסות לשנות אותו לצבע אדום מודגש כמו שהיית מצפה לראות במעבד תמלילים:

  1. הקלק על ה סמל גלגל השיניים בפינה השמאלית התחתונה של הממשק.
  2. לחץ על הגדרות.
  3. לחץ על שולחן עבודה, לאחר מכן מראה חיצוני.
  4. גלול מטה אל התאמה אישית של צבע:
  5. נְקִישָׁה ערוך ב- settings.json.
  6. הדבק את הקוד הבא בעורך שנפתח בלשונית חדשה:
    "editorInfo.foreground": "#ff0000"
  7. סגור ושמור את הקובץ.

עכשיו אם אתה מאיית מילה שגוי, VSCode יקשט אותה עם פיתול אדום בוהק:

התעלמות מנקודות חיוביות כוזבות

ייתכן שבודק האיות לא יזהה מונחים מסוימים ספציפיים לתעשייה או שמות עצם כמו שמות חברות. בצילום המסך למעלה, למשל, VSCode מדגיש את הקיצור "distro" כשגיאת כתיב.

כדי להפסיק לראות את המילים האלה כשגיאות, תרצה להוסיף אותן לשגיאות שלך הגדרות משתמש.

  1. לחץ לחיצה ימנית על המילה שאתה רוצה שבודק האיות יתעלם.
  2. לרחף מעל אִיוּת ובחר הוסף מילים להגדרות משתמש.

מעתה ואילך, בדיקת האיות לא תזהה עוד מילים אלו כשגויות:

התקן Copy Markdown כהרחבת HTML

לאחר מכן, התקן את תוסף העתק Markdown כ-HTML כדי שתוכל להעתיק ולהדביק Markdown בפורמט.

הורד:העתק Markdown כ-HTML הרחבת VSCode (חינם)

  1. בצע את שלבים 1 עד 6 מהסעיפים שלמעלה.
  2. בחר את jerriepelser.copy-markdown-as-html-1.1.0.vsix קובץ שהורדת זה עתה.

כעת אתה אמור להיות מסוגל להעתיק את Markdown מ- VSCode ולהדביק אותו ב-CMS כ-HTML נקי. כדי לבדוק זאת:

  1. בחר טקסט Markdown.
  2. פתח את ה לוח פקודות בתוך ה נוף תפריט, או על ידי לחיצה CTRL+Shift+P.
  3. בחר סימון: העתק כ-HTML:
  4. הדבק את ה-Markdown שהועתק בקובץ HTML חדש.

אתה אמור לראות שה-Markdown שהועתק הודבק כהלכה כ-HTML:

התאמה אישית של חלונית התצוגה המקדימה

כברירת מחדל, לחלונית התצוגה המקדימה יהיה אותו סגנון כמו ערכת הנושא הנוכחית של VSCode.

עם זאת, ייתכן שתרצה שתצוגות מקדימות ישקפו יותר את היעד הסופי של התוכן שלך. אתה יכול להתאים אישית את חלונית התצוגה המקדימה כדי לגרום ל-Markdown שלך להיראות כאילו הוא כבר באתר שבו אתה מפרסם.

אתה יכול להשתמש בכל אתר שאתה רוצה; הסגנונות הבאים נלקחו מ-MUO. רַק השתמש בכלי בדיקת האלמנטים של הדפדפן שלך כדי למצוא גופנים ו בחר צבעים מכל אתר אינטרנט.

  1. צור קובץ חדש ושם לו משהו כמו "CustomStyles.css"
  2. הדבק את קוד ה-CSS לדוגמה הבא בקובץ:
    גוף {
     צבע רקע: #fff;
     צֶבַע: #2c2c2c;
     משפחת גופנים: Roboto;
     גודל גופן: 18px;
     משקל גופן: 400;
    גובה קו: 1.7em;
     רוחב מקסימלי: 750 פיקסלים;
    }
    h1 {
     גודל גופן: 38px;
     משקל גופן: 800;
    }
    

    h2 {
     גודל גופן: 34px;
     משקל גופן: 700;
    }
    

    h3 {
     גודל גופן: 24px;
     משקל גופן: 700;
    }
    

    a {
     גבול-תחתית: 2פיקסלים מוצקים #bf0d0b;
     צֶבַע: #bf0d0b;
     משקל גופן: 700;
    }
    

    א:לְרַחֵף {
     צֶבַע: #fff;
     רקע כללי: #bf0d0b;
    }
    חזק {
     מודגש;
    }
  3. סגור ושמור את הקובץ.
  4. הקלק על ה סמל גלגל השיניים בפינה השמאלית התחתונה של הממשק.
  5. לחץ על הגדרות.
  6. לחץ על הרחבות ואז Markdown.
  7. גלול מטה אל Markdown: סגנונות ולחץ הוסף פריט.
  8. היכנס לנתיב שלך CustomStyles.css קובץ, למשל:
    ג:\משתמשים\אדם\סגנונות מותאמים אישית.css
  9. נְקִישָׁה בסדר.

לאחר שתכין את אלה, אתה אמור לסיים עם חלונית תצוגה מקדימה שנראית הרבה כמו מאמר זה.

שוב, השגתי את הערכים האלה באמצעות כלי Inspect Element של הדפדפן שלי ב-MUO, אבל תרצה למצוא את הערכים עבור אתר היעד שלך.

ערכות נושא

ערכת הנושא VSCode המוגדרת כברירת מחדל מגיעה בחושך ובבהיר, עם גרסאות ניגודיות גבוהה של כל אחת מהן. אבל כמו כל עורך קוד טוב, יש המון ערכות נושא נהדרות זמינות של צד שלישי.

אם אתה מעדיף את המראה של מעבד תמלילים על פני זה של עורך קוד, אני ממליץ על ערכת הנושא של Office מאת huacat:

אם אתה מעדיף עורך קוד, ערכות נושא נפוצות כמו Dracula, Gruvbox, Material (ראה צילום מסך למטה), ו-Nord זמינים כולם משוק ההרחבות.

כדי להתקין ערכת נושא חדשה:

  1. הקלק על ה סמל גלגל השיניים בפינה השמאלית התחתונה של הממשק.
  2. לחץ על הרחבות.
  3. חפש כל אחד מהנושאים שהוזכרו לעיל או פשוט סנן את הקטגוריה ערכות נושא ועיין במה שזמין.

האם VSCode הוא עורך ה-Markdown האולטימטיבי?

אז האם VSCode הוא עורך ה-Markdown האולטימטיבי לתוכן אינטרנט? מחוץ לקופסה, כנראה שלא. אבל זה בערך ניתן להרחבה ככל שיכול להיות.

מוני מילים, בודקי איות, העתק סימון כ-HTML, תצוגה מקדימה של התאמות אישיות ועיצובים פשוט מגרדים את פני השטח. יש מערכת אקולוגית מלאה בהרחבות זמינות עבור VSCode, ואתה חופשי להפוך אותה לשלך.