מצב כהה עבור תמונות Github Markdown

כיצד להשתמש בתמונות שונות ב-Markdown עבור מצב בהיר או כהה

מצב כהה לתמונות

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

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

כיצד להתאים את Github Markdown למצב כהה

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

<!--
 Note we're using the same HTML-sytnax for
 constraint-based assets as you would do on 
 the web.
-->

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://path-to-your-dark-mode-image.webp">
  <img alt="A single image caption for both variants" src="https://path-to-default-light-mode-image.webp">
</picture>

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