Как правильно отобразить RenderedMarkdownField() в шаблоне, если "безопасный" не "работает"?

На моем сайте django я использую RenderedMarkdownField() для создания причудливо выглядящего текста описания к моим сообщениям. Моя модель выглядит следующим образом:

# Portfolio project overview model
class Work(models.Model):
    title = models.CharField(max_length=100)
    # description = models.TextField()
    description = MarkdownField(rendered_field='description_rendered', validator=VALIDATOR_STANDARD)
    description_rendered = RenderedMarkdownField()
    image = models.ImageField(upload_to="work_app/media/images/", null=True, blank=True)
    video = models.FileField(upload_to="work_app/media/videos/", null=True, blank=True)
    pdf = models.FileField(upload_to="work_app/media/documents/", null=True, blank=True)
    
    # To show the title in the Admin page
    def __str__(self):
        return self.title

Тогда моя work_index.html страница выглядит следующим образом при рендеринге каждого проекта из моей базы данных (личная идентифицирующая/важная информация вычеркнута):

OriginalRender

Как вы видите, символы Markdown в тексте описания (*) видны в этом описании. Чтобы исправить это, мы используем тег Django safe и вместо него выводим поле work.description_rendered, поэтому мой код при итерации каждого поста выглядит так:

    <div class="row">
        {% for work in works %}
            <div class="col-md-4">
                <div class="card mb-2">
                    <a href="{% url 'work_detail' work.pk %}">
                        <img class="card-img-top" src="{{ work.image.url }}">
                    </a>
                    <div class="card-body">
                        <a href="{% url 'work_detail' work.pk %}">
                            <h5 class="card-title project-title-link">{{ work.title }}</h5>
                        </a>
                        <p class="card-text">{{ work.description_rendered | safe | truncatechars:200 }}</p>
                        <a href="{% url 'work_detail' work.pk %}" class="btn btn-primary">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

... НО, как только я вношу эти изменения с добавленным тегом safe и изменяю work.description на work.description_rendered в соответствии с django-markdown, моя отображаемая страница становится испорченной и выглядит так:

NewRender

Заметьте, как "строка" теперь по какой-то причине меняется на "колонку" постов, а также текст описания нижнего поста выделен жирным шрифтом, когда это определенно НЕ так, как у меня в описании в формате markdown. Интересно, может ли кто-нибудь объяснить мне, что здесь происходит, или мне нужно использовать другой тег, а не safe?

Проблема заключается в том, что вы преобразовываете рендеринг уценки в тег <p>, что приводит к недопустимому HTML. Вместо этого используйте <div>.

Markdown обернет абзацы внутри своего содержимого в теги <p>. Однако спецификация HTML не позволяет тегу <p> содержать другой тег <p>. Поэтому следует обернуть содержимое в тег <div> или другой общий тег уровня блока.

<div class="card-text">{{ work.description_rendered | safe | truncatechars:200 }}</div>

Я предлагаю использовать инструмент "inspect" вашего браузера, чтобы увидеть, как браузер отображает HTML страницы. Это поможет при отладке проблем, подобных этой.

Вернуться на верх