A CSS to embellish *MultiMarkdown* rendering

+1 for Live Scrolling

Not syncing wastes too much time and confuses when having side open, which is the most likely setting for those of us who are learning to work with markdown and have come from a world of graphic interfaces (word, pages, libreoffice, etc).

1 Like

indeed. live scrolling and folding of text (on headings and bullet points) in markdown text and preview would be a great addition. some day … hopefully.

4 Likes

Great CSS, thanks!

@OlivierPS This is amazing work. You did a great job building this out. I am trying to edit for my sake, how do I make the content the full width of my screen? I know some people like it centered but I prefer a full-screen consistent layout. I just can’t figure out how to make that happen. Specifically for HTML content for my RSS feeds that are newsletters.

Without having had a look at the CSS: I’d go with something like

body {
margin: 0;
padding:0;
width: 100%
}

Although I’m not sure that that’s what you really want, since you said you do not want your content „centered“.

Centered means that the left and right margin are equal, which is also true for the example above. And having text run the whole width of the browser window tends to make it hard to read.

Thank you, @chrillek. I’ll give it a try and see what it looks like.

I am trying to fill in more of the white space on the sides in the viewer using the CSS on this thread from @OlivierPS.

To give a little more context, this is an incoming feed to display HTML. I think the issue is the HTML container. On normal Markdown documents, the text is full-width, just not HTML feeds with containers.

There may not be anything I can do about it but other services can display in full-width.

Well, you have to adjust the style sheet so that it does what you need. The simplest way to figure out what to tweak, in my experience, is this:

  • convert the MD file to HTML in DT
  • open the HTML file in your preferred browser
  • using said browsers web developer console, find out which properties/selectors determine the margin(s) and fiddle around with them
  • change the CSS according to what you figured out in the browser’s web developer console

Regardless of these technical issues: Lines longer than 50 characters are more difficult to read. As long as it is about reading (as opposed to winning a “my beautiful HTML document” contest), I’d suggest to keep that in mind.

2 Likes

I appreciate that, @chrillek. I’ll give that a shot and see what I can find out. Thank you again for your replies.

1 Like

Hello,

Thank you for the lovely work on this css!

After installing it there’s one issue happening: Devonthink’s setting is set to import all markdown images to a DT folder (when the image is dragged to the DT MD file), and they aren’t rendering. They show up fine if the image is stored somewhere other than DT.

I’ve read the readme files, and looked through the css… but not having knowledge of CSS (or anything similar) I still wasn’t able to figure out what’s up. Would someone be able to help please?

Thanks in advance.

For reference, it renders like this:

Your screen capture didnt work. Please fix your post.

That has nothing to do with the CSS, it’s only related to how you reference the images in your Markdown and where they are stored in DT.

Both of which you should have a look at. And perhaps feed the forum search…

Re-uploaded it now, sorry. it’s a blue little square with a “?”.

This is a picture of my DT’s markdown settings, which haven’t been changed prior to installing:

It was working fine before I installed this, can you tell me what you’re referring to please?

Feeding the forum search for a while was fruitless. Likely because I kept feeding it the wrong fruit :slight_smile:

Show the source of the MD. Otherwise one can’t see what’s happening.

This?

1 Like

Yes. Of course.
Try replacing the %20 with (a single space). Your choice of a group name to store the images is a bit awkward with the spaces and parenthesis.

Swapping the %20 didn’t work, but I followed your observation and changed the folder name to a single word. It’s working fine now, thank you kindly!

Me again. Good to see that it works now for you, somehow. However, I tried it out here with this MD document

# Headline 1

first paragraph

![Default-styling](Neuer%20Name/Default-styling.jpg)

And that did exactly what it was supposed to do, i.e. the image appeared in the preview:

So, apparently it is not a problem to store images in a group (not “folder”) whose name contains spaces (nor are parenthesis, as I just figured out). Therefore, it might actually be a good idea to post more of your MD content than just a single line. And please POST THE CODE, not an image (much less an inverted one) of it. Simply copy it from your MD file and then paste it here fenced with three backticks like so:
```
MD code goes here
```
Please copy/paste several lines before and after the image link. Thank you.

Ok, here it is. I reverted the group name, and left the link as it’s created.

This is about the second half of the file, it’s a diary entry… so if you’d like all of it, it’s more comfortable to send you through private message.


sem poder fazê-a!) e com uma vertebra partida pela segunda vez...  hoje já conversa, reconhece, está presente, e mexe o corpo todo?

Que força vital, inspiração e luz.

Amo-te avó, aceito o caminho que escolhas trilhar. Seguimos juntas.


![Screenshot 2023-05-16 at 20.31.35](Attachments%20(Markdown%20media)/Screenshot%202023-05-16%20at%2020.31.35.png)

Na foto não se vê... já estavas bem sonolenta! mas hoje bem me apertaste a mão,  e bem tocaste na minha bochecha. Recebeste logo um beijinho na mão, claro.


Guardo o olhar ternurento que acompanhou o momento* espero que ao ler isto, o possa sempre recordar.


Edit: Looking at your preview, it doesn’t look like you have the OP’s css style installed? The issue only happens with it installed. Otherwise, it works fine.