Η απλή σύνταξη του Markdown το καθιστά μια εξαιρετική εναλλακτική στην HTML. Η γλώσσα πάντα υποστήριζε την ενσωμάτωση HTML, αλλά τώρα μπορείτε να πάτε αντίστροφα και να ενσωματώσετε το Markdown σε HTML.

Χρησιμοποιώντας μια απλή βιβλιοθήκη, μπορείτε να φιλοξενήσετε το ενσωματωμένο Markdown στις ιστοσελίδες σας και να το μετατρέψετε σε σωστό HTML αμέσως.

Τι κάνει το md-block;

Η τρέχουσα διαδικασία μπορεί να περιλαμβάνει τη δημιουργία αρχείων Markdown με το χέρι και στη συνέχεια τη μετατροπή τους σε HTML. Έτσι λειτουργούν πολλές σύγχρονες εφαρμογές CMS. Ή μπορείτε να χρησιμοποιήσετε ένα πλαίσιο όπως Angular για απόδοση του Markdown σε σελίδες.

Η βιβλιοθήκη md-block δεν είναι αυστηρά εναλλακτική. Αντίθετα, πληροί μια ελαφρώς διαφορετική περίπτωση χρήσης. Μετατρέπει το ενσωματωμένο Markdown στο αντίστοιχο HTML του. Μπορείτε να ενσωματώσετε το Markdown στα αρχεία σας HTML και να το αποδώσετε στον πελάτη, τη στιγμή που θα ζητηθεί.

Δείτε πώς μπορεί να μοιάζει:

<html>
<κεφάλι>...</head>
<σώμα>
<md-block





instagram viewer


>
# Επικεφαλίδα
Κάποια *ενσωματωμένα* Markdown τα οποία μπορεί να μετατρέψει το "md-block" για εσάς!
</md-block>
</body>
</html>

Είναι καλή ιδέα να ευθυγραμμίσετε αριστερά τον ενσωματωμένο κωδικό Markdown, χωρίς καμία κύρια εσοχή. Αυτό οφείλεται στο γεγονός ότι το κύριο κενό διάστημα μπορεί να είναι σημαντικό στο Markdown, σε αντίθεση με την HTML.

Η βιβλιοθήκη εισάγει το δικό της προσαρμοσμένο στοιχείο HTML, md-block. Αν και αυτό το στοιχείο δεν είναι μέρος του προτύπου HTML, αυτή είναι μια έγκυρη τεχνική. Το πρότυπο Web Components (MDN) περιλαμβάνει ένα API που ονομάζεται Προσαρμοσμένα Στοιχεία. Αυτό το API υποστηρίζει δυναμική καταχώρηση προσαρμοσμένων στοιχείων χρησιμοποιώντας JavaScript.

Πριν φορτώσετε τη βιβλιοθήκη md-block, αυτή η σελίδα θα αποδοθεί με οικείο τρόπο:

Φυσικά, μπορείτε να διαμορφώσετε το στοιχείο md-block έτσι ώστε να μοιάζει περισσότερο με ένα πρόγραμμα επεξεργασίας κειμένου. Με προδιαμορφωμένο κενό διάστημα και γραμματοσειρά μονοδιαστήματος, είναι τουλάχιστον λίγο πιο εύκολο να το διαβάσετε:

<στυλ>md-block { white-space: pre; γραμματοσειρά-οικογένεια: monospace; }</style>

Μπορεί να θέλετε αυτό το είδος εξόδου εάν γράφετε ένα σεμινάριο για το Markdown. Σας επιτρέπει να εξηγήσετε τη σύνταξη Markdown ενώ σας επιτρέπει να επεξεργαστείτε εύκολα το δείγμα Markdown:

Αλλά το κόλπο του md-block είναι να μετατρέψει αυτό το Markdown σε τελικό HTML.

Ακόμη και με τα προεπιλεγμένα στυλ προγράμματος περιήγησης, το περιεχόμενο εμφανίζεται τώρα ακριβώς όπως το κανονικό σας HTML, παρόλο που το στείλατε στο πρόγραμμα περιήγησης ως Markdown:

Πώς να χρησιμοποιήσετε το md-block

Αφού προσθέσετε τη βιβλιοθήκη md-block στη σελίδα σας, μπορείτε να γράψετε το Markdown σας md-block στοιχεία. Στη συνέχεια, η βιβλιοθήκη θα μορφοποιήσει αυτόματα το Markdown σας και μπορείτε να συνεχίσετε την ενσωμάτωση του Markdown όπως θέλετε.

Υπάρχουν, ωστόσο, μερικές παραλλαγές σε αυτή τη διαδικασία.

Προμηθευτείτε το σενάριο εξ αποστάσεως ή εγκαταστήστε το μόνοι σας

Ο ευκολότερος τρόπος για να ξεκινήσετε είναι να αναφέρετε τη βιβλιοθήκη από τον επίσημο ιστότοπο md-block:

<τύπος σεναρίου="μονάδα μέτρησης" src="https://md-block.verou.me/md-block.js"></script>

Αυτή μπορεί να μην είναι η πιο αποτελεσματική προσέγγιση, αλλά είναι σίγουρα η πιο γρήγορη. Απλώς προσθέστε αυτόν τον κωδικό στο δικό σας κεφάλι και η σελίδα σας θα αποδώσει αυτόματα οτιδήποτε σε ένα στοιχείο md-block σε HTML:

Μπορείτε, φυσικά, να κάνετε λήψη αυτού του αρχείου JavaScript και να το φιλοξενήσετε στον δικό σας ιστότοπο. Ή μπορείτε να το εγκαταστήσετε μέσω npm:

npm εγκαθιστώ md-ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ

Markdown Blocks vs. Inline Markdown

Το προεπιλεγμένο στοιχείο, που πήρε το όνομά του από την ίδια τη βιβλιοθήκη, είναι md-block. Αλλά μπορείτε επίσης να χρησιμοποιήσετε ένα md-span στοιχείο για ενσωματωμένο Markdown, όπως κείμενο στη μέση μιας πρότασης:

Η περίπτωση χρήσης για το inline Markdown είναι πιθανώς λιγότερο συνηθισμένη, αλλά μπορείτε να τη χρησιμοποιήσετε παρόλα αυτά:

<Π>Μια παράγραφος HTML που περιέχει <md-span>*πλάγια γραφή*</md-span> κείμενο.</Π>

Πώς να επισημάνετε τη σύνταξη μπλοκ κώδικα Markdown με το Prism

Πρίσμα είναι ένα εργαλείο επισήμανσης σύνταξης που συνδημιούργησε η Lea Verou, δημιουργός του md-block. Μπορείτε να το χρησιμοποιήσετε για να επισημάνετε προδιαμορφωμένα μπλοκ κώδικα σε μια ιστοσελίδα, συμπεριλαμβανομένων εκείνων που δημιουργεί το md-block.

Λοιπόν, με αυτό το HTML:

<html>
<σώμα>
<md-block>
```javascript
λειτουργίατετράγωνο(αριθμός) {
ΕΠΙΣΤΡΟΦΗ αριθμός * αριθμός;
}
```
</md-block>
<σενάριο src="πρίσμα.js"></script>
</body>
</html>

Θα δείτε όμορφα μορφοποιημένο κώδικα με συντακτική επισήμανση:

Οι επιλογές σας για γραφή στο διαδίκτυο μόλις αυξήθηκαν

Το πώς θα χρησιμοποιήσετε το md-block εξαρτάται από εσάς, αλλά υπάρχουν πολλές δυνατότητες για εφευρετικές λύσεις που το χρησιμοποιούν. Θα μπορούσατε να το χρησιμοποιήσετε για να εκτελέσετε ένα πολύ ελαφρύ CMS για συγγραφείς που έχουν αυτοπεποίθηση χρησιμοποιώντας Markdown, αλλά όχι HTML.

Η Markdown είναι μια τέλεια γλώσσα για ένα ευρύ κοινό. Η υιοθέτησή του από εργαλεία όπως το Slack πιθανότατα θα αυξήσει τη χρήση ακόμη περισσότερο.