Rendering of Markdown document is corrupt in DEVONthink

Make from the following code block a Markdown doc with the name Hymn.md.(*)


<div style="text-align:center">

### Hymn: *All things bright and beautiful*

***

*All things bright and beautiful,  
All creatures great and small,  
All things wise and wonderful,  
The Lord God made them all.*

1\.  
Each little flower that opens,  
Each little bird that sings,  
He made their glowing colours,  
He made their tiny wings.  

*All things bright* ...  

2\.  
The rich man in his castle,  
The poor man at his gate,  
God made them high and lowly,  
And ordered their estate.  

*All things bright* ...  

3\.  
The purple headed mountain,  
The river running by,  
The sunset and the morning,  
That brightens up the sky; --  

*All things bright* ...  

***

Words: *Cecil Alexander*, Music: *William Monk*  
(in the Public Domain)

</div>

Import it into DTP and look at the HTML view in DEVONthink: All lines run together although in the source each line ends with double-space.

Converting the document directly with Multimarkdown (the converter DTP uses under the hood) to HTML gives you a beautiful centered song sheet as expected (attached as Hymn.html)

Why’s that? Is this a bug? And how can I avoid it? I found a drastic workaround: Getting rid of the center-div (opening and closing div). A hacky workaround is just to remove the closing . But why does this work?

As mentioned when using Multmarkdown outside DEVONthink it all works smoothly. Maybe a version issue of Multimarkdown? I use Multimarkdown 6.


(*) Sorry for the convoluted way to get you to a Markdown doc, but I didn’t find a way to attached a Markdown doc here - neither as a .md, nor as a .txt, nor with a .png extension. :frowning:

The current version of MultiMarkdown in DEVONthink is version 5.

The “workaround” of removing the ending div works because HTML is a forgiving (read “sloppy”) language that allows for ignoring much faulty code. When you explicitly close the div, version 5 will not render the Markdown in an HTML block.

I’m curious why you’re bothering to try and wrap this in a div for something as simple as a text-align. This accomplishes the same thing with no need of inserting raw HTML…

<style type="text/css">
body {text-align:center;}
</style>

Thanks Jim.

That explains it all: Mmd5 does not render Markdown inside HTML tags, while mmd6 apparently does.

And, yes, using CSS for the centering is the much better way to do it and keeps me here fully out of trouble.

Thanks for the prompt response!

No problem. :smiley:

Just one more question about using CSS for the centering:

How can I center, let’s say, only the first two paragraphs of the document?

Can I attach a CSS class to a markdown paragraph without using a HTML tag?

No, you can’t specify a class in Markdown.

Regarding styling the first two paragraphs, you should look into pseudo-selectors. It’s a powerful but sometimes confusing subject, but worth the effort to learn.

Not sure how I can use CSS pseudo-selectors here.

If I understand it correctly, they can be used to decorate elements in special states like clicked or hovered over

How can I use them to mark, say, the first two paragraphs of a document as entered?

You need to examine the document object model (DOM) of the rendered page (and you’ll eventually just become familiar with it without having to convert as often). This is most easily done by converting the Markdown document to HTML, then looking at the markup.

The answer to your question is definitely on the page you linked to. In fact, you have three important words in the second phrase of your sentence.

PS: Ignore the obvious wrong answers, like :hover, :focus, etc. as they’re unrelated to your request (though you can do cool things with them too, in other circumstances!)

Ups, my bad, Jim! Yes, the first-child can probably do the trick. Thanks.

As you mentioned it is a quite confusing (and convoluted) approach, but better than nothing! :slight_smile:

No problem.

Actually, I think the approach of sibling / child pseudo-selectors is not “convoluted or confusing”. I think it’s a powerful and highly logical approach. But the subject of :nth-child iterators takes some getting used to.

By the way, if I understand what you’re trying to accomplish, I think nth-of-type would work, while :nth-child(n) wouldn’t. I’m interested in your results.

Well, I foudnd a way to do it with DIVs. Much easier. See the topic Style parts of Markdown documents with CSS.