Σκοτεινή λειτουργία για εικόνες Github Markdown

Πώς να χρησιμοποιήσετε διαφορετικές εικόνες στο Markdown για φωτεινή ή σκοτεινή λειτουργία

Σκοτεινή λειτουργία για εικόνες

Εάν θέλετε να διακρίνετε τα στοιχεία πολυμέσων σας στο Github Markdown κατά συνδυασμό χρωμάτων, μια ενημέρωση στη σύνταξη το καθιστά δυνατό τώρα.

Μέχρι τώρα, μπορούσατε να χρησιμοποιήσετε την ετικέτα img για να δώσετε εντολή στον διερμηνέα markdown να αποδίδει εικόνες είτε από το χώρο αποθήκευσης σας είτε από απομακρυσμένο προορισμό. Για να προσαρμοστείτε στη σκοτεινή λειτουργία με τις εικόνες σας, μπορείτε πλέον να χρησιμοποιήσετε την πιο σύγχρονη ετικέτα εικόνας 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.