Django формы - отображение HTML <pre>фрагментов кода внутри рендеринга {{ form.text }}

У меня есть блог, настроенный на Django, который я использую для публикации некоторых своих заметок и личных рекомендаций. У меня есть модель articles, которая получает данные из form, отображаемого в template. Приложение отображает мои статьи, размещенные динамически в шаблоне. Моя цель - включить фрагменты кода в виде <pre> tag в данные формы, которые я размещаю, написав при этом как можно меньше HTML.

models.py

from django.db import models
from django.contrib.auth import get_user_model
from django.db import models
from django.urls import reverse

class Article(models.Model):
    title = models.CharField(max_length=100)
    body = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    author = models.ForeignKey(
            get_user_model(),
            on_delete=models.CASCADE,
        )

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('article_detail', args=[str(self.id)])


views.py

from django.shortcuts import render
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.views.generic import ListView, DetailView
from django.views.generic.edit import UpdateView, DeleteView, CreateView
from django.urls import reverse_lazy
from .models import Article 

class ArticleListView(LoginRequiredMixin, ListView):
    model = Article
    template_name = 'article_list.html'

class ArticleCreateView(LoginRequiredMixin, CreateView):
    model = Article 
    template_name = 'article_new.html'
    fields = ('title', 'body',)
    
    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

templates/article_new.html

{% extends 'base.html' %}
{% block title %}New article{% endblock title %}

{% block content %}
<h1>New article</h1>
<form action='' method='post'>
    {% csrf_token %}
    {{ form.as_p }}
    <button class='btn btn-success ml-2' type='submit'>Save</button>
</form>
{% endblock content %}

templates/article_list.html

{% extends 'base.html' %}
{% block title %}Articles{% endblock title %}

{% block content %}
<br/>

    <div class='row'>
        <div class='col-8'>
            {% for article in object_list %}
                <div class='card' style='background: #292b2c'>
                    <div class='card-header' style='background: #292b2c;'>
                        <span class='font-weight-bold'>{{ article.title }}</span> &middot;
                        <span class='text-muted'>by {{ article.author }} | {{ article.date }}</span>
                    </div>
                    <div class='card-body' style='background: #1a1a1a;'>
                        <p>{{ article.body|linebreaks }}</p>
                        <a href="{% url 'article_edit' article.pk %}">edit<a> | <a href="{% url 'article_delete' article.pk %}">Delete</a>
                    </div>
                    <div class='card-footer' style='background: #292b2c'>
                        {% for comment in article.comments.all %}
                            <p class='font-weight-bold'>
                            <span class='font-weight-bold'>{{ comment.author }} &middot;</span>
                            {{ comment }}
                            </p>
                        {% endfor %}
                    </div>
                </div>
                <br />
            {% endfor %}

Есть ли способ отобразить фрагменты кода в виде тега <pre> внутри формы, которую я разместил для обучающих целей?

Я пробовал обернуть {{ articles.body }} в теги <pre> внутри самого шаблона, но это просто превратит весь текст в <pre>. Я успешно сохранил пробельные символы из моей оригинальной записи, используя {{ articles.body|linebreaks }}

Я не обязательно хочу использовать RichTextField(), потому что хочу сохранить его простым, но я буду использовать, если придется.

Если вы хотите, чтобы все было просто и коротко, вы можете добавить в тело шаблона тег safe. Это позволит вам выводить HTML из вводимых данных: https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#safe

...
<div class='card-body' style='background: #1a1a1a;'>
    <p>{{ article.body|safe|linebreaks }}</p>
    ...
</div>
...

Затем, когда вы пишете блог, вы можете обернуть код внутри тега <pre>:

Hello this is my tutorial
This is a piece of code:
<pre>my_function()</pre>
Hope you enjoyed it!

И это будет отображено.

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