Two additional <p> tags generated in content

Hi.

Why does Grav generate two additional <p> tags in the HTML output of the page.
Example:

<p>{{page.content|raw}}</p>

Output (you can see it in the attached image):

<p></p>
<p>Lorem ipsum pain sit amet, consectetur adipiscing elit.</p>
<p></p>

Screenshot from 2021-12-09 09-25-11

The code in the Twig template is as follows:

<h2> {{page.title}} </h2>
<p> {{page.header.subtitle}} </p>
<p> {{content|raw}} </p>

If I disable Process Markdown in Admin, it doesn’t add them.
Why is this happening?

Thanks.

I assume, because your page.content already has <p>Content</p>

If you were to look at the proper source instead of inspector, I’d bet you will see something like <p><p>Content</p></p>. Inspector/Browser closes tags for you, that’s why you see <p></p><p>Content</p><p></p>, because <p> is not allowed inside another <p>

1 Like

HI @Karmalakas

This is my code in twig:

{% block content %}
    <div class="wrapper">
          <section class="container">
            <header class="major">
              <h2>{{page.title}}</h2>
              <p>{{page.header.subtitle}}</p>
              <p>{{ content|raw }}</p>
            </header>
            <div class="row features">
              {% for child in collection %}
                  {% include 'partials/blog_list.html.twig' with {blog: page, page: child} %}
              {% endfor %}
            </div>
          </section>
    </div>
  {% endblock %}

And this is my blod.md file:

---
title: Blog
visible: true
content:
    items:
        - '@self.children'
    limit: 5
    order:
        by: date
        dir: desc
    pagination: true
    url_taxonomy_filters: true
subtitle: 'Últimas entradas de Blog'
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 

The block content in base.html.twig is:

{% block content %}{% endblock %}

without <p> tag in anywhere.
There isn't addiontal p tag.

Could you dump your content|raw and see what’s there? I believe Grav wraps every paragraph into <p/> - and that would make sense, because otherwise you wouldn’t have a separation between your content paragraphs

Ok.
This is the debugger output:

Routed to page /blog (type: blog)
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Without p tag, it shows correctly the paragraph, but with p tag, it still shows two paragraphs.
This is the source in browser:

<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis venenatis vehicula. Morbi ultrices finibus neque, ac vestibulum ante pharetra cursus. Nullam faucibus leo non dui porttitor, a sodales quam pharetra. Aliquam viverra, purus sit amet dictum rhoncus, sapien arcu vestibulum lacus, a...
</p>
</p>

If I write the text in Editor with <p>any text here

, it shows correctly.

Definitely, Grav wraps the content in the p tag, adds it automatically.
I have added {{content | raw}} and the output is this:

<span> <p> Any text here </p> </span>

Is there a way to prevent it from adding the p tag by default?

Not that I know of. Also can’t find anything quickly by looking at the code.

What’s your use case, if I might ask? I don’t see any benefit of not wrapping it. Maybe you should consider using other (custom) input rather than content then?

Isn’t it just because the content is in Markdown?

A line of text is compiled to a paragraph in Markdown.

It is. That’s why I’m suggesting custom input

Hi @AmauryH and @Karmalakas

The problem is that I am customizing a theme in which its P tag comes with some defined css classes. I don’t want to use those classes, so I must use my own. If I do this, and in the Twig code I write something like
<p class ="custom"> Text </p>, Grav wraps it in another additional <p> tag, making it have two paragraphs, and in this case the <p> tag has a large padding, causing two very separate paragraphs to appear.
I don’t know if I have explained myself very well, but that is more or less the problem.

Can’t you just use like this?

<div class="custom">
  {{ page.content|raw }}
</div>

Didn’t try it, but there is a filter that seems to allow you to not wrap your content:

I don’t think this will work on page.content, because it’s always parsed. Even if it worked, then you wouldn’t get paragraphs separated. I see only two options here:

  • wrap in <div/>
  • use custom input

Definitely the best option is to wrap the content in a div tag. The markdown filter does not remove the p tag from the content.