I have just been getting started with Grav and really impressed so far. My site is almost good to go, although have had problems with getting spaces between paragraphs on default pages with the Chalk theme. When I write blog posts, they appear with line breaks / paragraph breaks with no problem so I am a bit confused.
I checked both markdown guides and the Grav instructions which mention to do 2/3 spaces followed by return / yet neither of these will work. I also looked at both the blog post and default template although couldn’t see anything obvious (although realise I might be missing something!
I don’t know if anyone else has experienced this, but any suggestions would be really appreciated. For reference, I have included a screenshot of a default page where you will see there are no spaces between paragraphs. The menu bar is badly formatted on the screenshot as I created a new page, so it normally looks normal / this isn’t part of the problem.
A single <newline> (\n) inside a text has no effect.
<space><space><newline> creates an html <br> element inside a paragraph <p>
Two <newlines> are treated as a paragraph break </p><p> and hence a margin shows between the paragraphs depending on the stylesheet applied.
Three, four, five, … <newlines> is seen as a single new paragraph. No extra space between the two paragraphs.
In Grav, html can be used inside Markdown, therefore, you can use <br> to force extra empty space within a paragraph
Extra empty paragraphs <p></p> do not create extra empty lines.
Extra <p> </p> does create extra empty lines.
By the way…
If a particular paragraph needs extra leading space (margin-top), it might be better to embed that paragraph manually inside a paragraph element like <p id="my-id">My paragraph</p> and use the stylesheet to add extra space above the paragraph using #my-id {margin-top: 2 rem;}
This way, the paragraph can be better adapted to responsive layouts (using media queries) while adding extra breaks <br> or <p> do not play nice in responsive layouts.
My bad i pasted br + br/ but it didn’t show / just created a line break. Don’t quite understand why blog post pages do line break automatically / default pages don’t but will continue to use it when I need.
@coll88 I can see two reasons why paragraphs appear differently in different pages, or different templates.
Auto Line Breaks configuration setting for Markdown.
This Mardown setting controls the interpretation of linebreaks in Markdown. This can be set globally in ‘system.yaml’, or in the header of a page. As far as I know the only difference this settings makes, is that the 2 spaces before a line-break isn’t required anymore.
Note, that this setting will not make any difference between page templates like ‘default.html.twig’, ‘blog.html.twig’, or ‘item.html.twig’
The docs for global settings can be found here and docs for page headers here.
These are the settings copied from the page headers documentation:
extra : Enable support for Markdown Extra support (GFM by default)
auto_line_breaks : Enable automatic line breaks
auto_url_links : Enable automatic HTML links
escape_markup : Escape markup tags into entities
special_chars : List of special characters to automatically convert to
Stylesheets can make a difference
Since templates can wrap the content of a page in different html elements, it could be that margins/padding for paragraphs appear differently in different templates. For example:
p {
margin-bottom: 1rem;
}
#wrapper-used-by-blog p {
margin-bottom: 2rem;
}
