כיצד להפוך VSCode לעורך ה-Markdown האולטימטיבי

כיצד להפוך VSCode לעורך ה-Markdown האולטימטיבי

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





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



איפור של סרטון היום

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





הורד והתקן VSCode

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

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



מסך הפתיחה של VSCode ברירת המחדל.

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

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

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



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

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

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

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

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



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

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

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

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

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

הקובץ VSCode settings.json נפתח עם הוספת קוד מותאם אישית.

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

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

האם תוכל להחזיר משחקים ל- PS4

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

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

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

מסמך HTML מעוצב כהלכה פתוח ב- VSCode.

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

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

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

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

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

הגדרות VSCode > הרחבות > Markdown > תפריט Markdown: Styles.

התקן 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 : מאמר זה כקובץ סימון נפתח ב- VSCode עם התצוגה המקדימה מותאמת אישית להיראות כמו MUO.
  4. הדבק את ה-Markdown שהועתק בקובץ HTML חדש.

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

מסך הפתיחה של VSCode בעיצוב קל.

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

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

הסימון של מאמר זה נפתח ב- VSCode באמצעות ערכת הנושא של Office מאת huacat.

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

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

  1. צור קובץ חדש ושם לו משהו כמו ' CustomStyles.css '
  2. הדבק את קוד ה-CSS לדוגמה הבא בקובץ:
    body { 
      background-color: #fff; 
      color: #2c2c2c; 
      font-family: Roboto; 
      font-size: 18px; 
      font-weight: 400; 
      line-height: 1.7em; 
      max-width: 750px; 
    } 
      
    h1 { 
      font-size: 38px; 
      font-weight: 800; 
    } 
      
    h2 { 
      font-size: 34px; 
      font-weight: 700; 
    } 
      
    h3 { 
      font-size: 24px; 
      font-weight: 700; 
    } 
      
    a { 
      border-bottom: 2px solid #bf0d0b; 
      color: #bf0d0b; 
      font-weight: 700; 
    } 
      
    a:hover { 
      color: #fff; 
      background: #bf0d0b; 
    } 
      
    strong { 
      font-weight: bold; 
    }
  3. ושמור את הקובץ.
  4. הקלק על ה סמל גלגל השיניים בפינה השמאלית התחתונה של הממשק.
  5. לחץ על הגדרות .
  6. לחץ על הרחבות ואז Markdown .
  7. גלול מטה אל Markdown: סגנונות ולחץ הוסף פריט .
  8. היכנס לנתיב שלך CustomStyles.css קובץ, לדוגמה:
    C:\Users\Adam\CustomStyles.css
    הסימון של מאמר זה נפתח ב- VSCode תוך שימוש בנושא החומר מאת Equinusocio.
  9. נְקִישָׁה בסדר .

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

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

ערכות נושא

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

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

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

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

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

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

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

פורמט usb להתקנת חלונות 10

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