Auf dieser Website und einigen anderen Projekten verwende ich aktiv Markdown, um Text zu schreiben und daraus dann HTML-Code zu generieren. Und am Ende habe ich ein paar Erweiterungen geschrieben, die bestimmte Funktionen ausführen, was die Unterstützung für die Generierung von HTML-Code in meinen Projekten etwas erleichtert.
In einem der Projekte werden beispielsweise Bilder zum Text hinzugefügt, der der Site hinzugefügt und an den Beitrag angehängt wird. Dementsprechend haben Bilder eine bestimmte URL, an die Nginx dieses Bild sendet. Aber ich habe dafür gesorgt, dass der Markdown-Bildeinbettungscode für Bilder, die auf die Website hochgeladen werden, einfacher aussieht.
Beschreibung des Bildeinbettungscodes
Das heißt, der Bildeinfügungscode sieht in diesem Fall so aus
![](e272ed2bca9e46e8b017c20eddd1e5b2.webp)
In diesem Code gibt es nur den Namen der Bilddatei e272ed2bca9e46e8b017c20eddd1e5b2.webp . In dem Projekt, in dem dies implementiert ist, werden alle Bilder mit einem eindeutigen generierten Namen mithilfe von uuid in ein Verzeichnis geladen, und das Bild wird komprimiert und in das WEBP-Format konvertiert. Weitere Informationen hierzu finden Sie im Artikel So konvertieren Sie ein Bild beim Speichern in einem ImageField in das WEBP-Format .
Wenn also Bilder an einen Beitrag angehängt werden, werden sie in diesem Projekt als Galerie unter dem Text angezeigt, können aber auch innerhalb des Beitragstextes hinzugefügt werden. Um Benutzer jedoch nicht mit einer langen URL zum Bild im Markdown-Markup zu verwirren und auch die weitere mögliche Änderung von Bildpfaden zu vereinfachen, wurde eine Funktion implementiert, um aus diesem vereinfachten Bildcode ein HTML-IMG-Tag zu generieren.
Python-Markdown-Erweiterung hinzugefügt
Generieren Sie HTML-Text mit Python-Markdown
Zur Generierung des HTML wird das Paket Python-Markdown verwendet. Der Generierungscode könnte so aussehen:
def generate_html(markdown_text): return markdown.markdown( markdown_text, extensions=['markdown.extensions.attr_list', 'markdown.extensions.tables', 'markdown.extensions.fenced_code', 'markdown.extensions.nl2br', 'markdown.extensions.toc'], output_format='html5' )
Wie Sie sehen, ist es beim Generieren möglich, Erweiterungen aufzuzählen, die das Ergebnis der Codegenerierung beeinflussen können. In diesen Erweiterungen werden wir unsere Erweiterung hinzufügen.
Erweiterung hinzufügen
Nehmen wir an, wir haben in einem Django-Projekt eine App namens Core. Erstellen wir darin ein Verzeichnis extensions mit einer Datei __init__.py , die das Verzeichnis als Paket initialisiert, sowie einer Datei mit dem Namen der Erweiterung. Es sollte so aussehen.
-
core/
-
extensions/
- __init__.py
- image.py
-
extensions/
Image.py-Datei
Fügen wir nun den Inhalt der Datei image.py hinzu.
# -*- coding: utf-8 -*- import markdown from markdown.util import etree class ImageExtension(markdown.Extension): def add_inline(self, md, name, klass, re): pattern = klass(re) pattern.md = md pattern.ext = self md.inlinePatterns.add(name, pattern, "<reference") def extendMarkdown(self, md, md_globals): self.add_inline(md, 'internal_image', InternalImage, r'!\[\]\((?P<internal_image>[a-zA-Z0-9]+).webp\)') class InternalImage(markdown.inlinepatterns.Pattern): def handleMatch(self, m): return render_image(m.group('internal_image')) def render_image(internal_image_name): img = etree.Element('img') img.set('src', '/media/photos/{}.webp'.format(internal_image_name)) img.set('class', 'd-block mx-auto mw-100 mvh-75') return img def makeExtension(**kwargs): return ImageExtension(**kwargs)
In diesem Fall erstellen wir eine
ImageExtension
-Erweiterung, die das
Markdown
-Markup mithilfe der
InternalImage
-Vorlage erweitert.
Dieses Muster wird auf alle Bild-Tags angewendet, die mit dem regulären Ausdruck übereinstimmen, der an die Methode add_inline übergeben wird, die das Muster letztendlich mit dem Markdown-Code-Handler zur Liste der Muster hinzufügt.
Die Funktion makeExtension wird unter der Haube von Python-Markdown aufgerufen und registriert die Erweiterung.
Abschluss
Als letztes Wort fügen wir Ihre neue Erweiterung zur Generierung Ihres HTML-Codes hinzu.
def generate_html(markdown_text): return markdown.markdown( markdown_text, extensions=['core.extensions.image', 'markdown.extensions.attr_list', 'markdown.extensions.tables', 'markdown.extensions.fenced_code', 'markdown.extensions.nl2br', 'markdown.extensions.toc'], output_format='html5' )
Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку:
подменять ее на свою типа: