How to truncate content for Mdeditor (content as markdownx) - Django

Question

I installed Mdeditor and everything works fine. My problem is when I want to truncate the content of my BlogPost in template and this is how it looks.

This is my model blog/models.py

class BlogPost(models.Model): # blogpost_set -> queryset
    # id = models.IntegerField() # pk
    user    = models.ForeignKey(User, default=1, null=True, on_delete=models.SET_NULL)
    image   = models.ImageField(upload_to='image/', blank=True, null=True, height_field='height_field', width_field='width_field')
    height_field = models.PositiveIntegerField(default=0)
    width_field = models.PositiveIntegerField(default=0)
    title  = models.CharField(max_length=120)
    slug   = models.SlugField(unique=True) # hello world -> hello-world
    content  = MDTextField(default=' ')
    # content  = models.TextField(null=True, blank=True)
    publish_date = models.DateTimeField(auto_now=False, auto_now_add=False, null=True, blank=True)
    timestamp = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    category = models.CharField(max_length=255, default='issue')
    private = models.BooleanField(default = False)
    tags = TaggableManager()
    
    objects = BlogPostManager()

This is the template's code for the page in the image:

<article class="blog-item heading_space wow fadeIn text-center text-md-left" data-wow-delay="300ms">
    <div class="image"> <img src="{{ blog_post.image.url }}" alt="blog" class="border_radius"></div>
    <h3 class="darkcolor font-light bottom10 top30"> <a href="{{ blog_post.get_absolute_url }}">{{ blog_post.title|capfirst }}</a></h3>
    <ul class="commment">
        <li><a href="#."><i class="fas fa-calendar"></i>{{ blog_post.publish_date }}</a></li>
        <!-- <li><a href="#."><i class="fas fa-comments"></i></a></li> -->
        <li><a href="#."><i class="fas fa-user"></i>{{ blog_post.user }}</a></li>
    </ul>
    <!-- <p class="top15">blog_post.content|linebreaks|truncatewords:50</p> -->
    <div id="content"><textarea>{{blog_post.content}}</textarea>
    </div>
</article>

Is there any way to make it show content with truncatewords as markdown ? Or something that is gonna look fine also as markdown?

Documentation:

• Mdeditor
• Issue found on internet
• Template example

Answer 1

I found the solution.

I used this in my template:

<div id="content"><textarea> {{blog_post.content|truncatechars_html:500}} </textarea></div>