Passage "header" messes up # headings (Twine 2, Harlowe 3.1)

Authoring Twine
1

Hi there, I just started learning Twine.

I start all story passages with a ### Heading, which tells the room the player is in, as in:

### Kitchen
You see blah blah blah...

It renders perfectly:

Kitchen

You see blah blah blah…

However, when I try to add a header to every passage, the rendition gets messed up.

So, I made a passage and added the tag “header.” It contains:

Score: $score
---

(With a blank line after the ---.)

Then, the Kitchen passage turns out:

Score: 0

### Kitchen
You see blah blah blah…

In other words, the ###-styled header gets cancelled when I add the header.

The only way to save it is if I insert a blank line before every ###-heading, in every passage.

Any ideas why this happens?

Thanks!

Twine Version: 2
Story Format: Harlowe 3.1

2

[personal opinion] Harlowe’s support for using Markdown to style the page is flaky at best, so I would advised using actual HTML elements instead. For instance the --- markup in your example doesn’t produce a horizontal ruler <hr> element for me in the test project I created.

I would change your header tagged Passage to use a <hr> element like so…

Score: $score
<hr>

… and replace the Header Markup in your Passage with the HTML equivalent…

<h3>Kitchen</h3>
You see blah blah blah...

warning: If you manually add block based HTML elements (like <h1>, <hr>, <p>, or <div>) to a Passage then you will notice an issue that some content will appear instantly while other content will appear using the standard (fade in) transition effect. To overcome this behaviour you need to use CSS like the following within your project’s Story Stylesheet area to change those block based elements to be inline-block based instead.

h3,hr {
	display: inline-block;
	width: 100%;
}

If you wish to use a block based HTML element that isn’t current in the list of the above (h3,hr) CSS selector then just add the type of the element to the list.
eg. If you want to include both Header 1 and Header 2 you could change the list like so…

h1,h2,h3,hr {
	display: inline-block;
	width: 100%;
}

…the order of the items in the list is not important.

3

Oh, I see. That’s a shame—I love Markdown :grin:

I notice that when I use <h1>Title</h1> instead of Markdown, the line space under the title is huge.

Anyway, your answer makes sense. Thanks!