[SOLVED] How to get Zen-Like Markdown Preview


#1

I use Markdown to take notes on a wide variety of things and while it is excellent for that purpose, especially when coupled with Zen, viewing my notes with the markdown-preview package is a suboptimal experience. All that I am really missing is the ability to center the text in markdown-preview the way that Zen and typewriter do with the editor. Is there anything I can add to my stylesheet to make this possible?


#2

I don’t think markdown can center stuff. However, the Atom markdown preview will center all the content included in a <center> tag:

<center>This content will be centered</center>

Hope this helps!


#3

Sorry but how exactly would I be implementing this tag in my stylesheet? I’d like all of the content to be centered.


#4

I am sorry, I misunderstood the question obviously.
I checked some community packages like markdown-preview-enhanced or markdown-preview-plus, but unfortunately they don’t seem to support such feature.
If what you’re trying to achieve here is to align to the center everything that is displayed in the markdown preview, the dirtiest thing that comes into my mind is to add this to your styles.less:

.markdown-preview > * {
  text-align: center;
}

I’m not sure it could render properly in every situation anyway, but still, I think this could be a starting point.
Does this help?


#5

The markdown-preview-plus package uses Pandoc which takes a CSS file as a command line option (configured in Settings). So you could probably add the centered styles there.


#6

Thanks for the suggestion. It does center things but in the manner that word processors do when you pick the option to center while what I am seeking is more along the lines of margins that will narrow the width of the line. Doing what you suggested still lets the lines span the width of the monitor.


#7

Doesn’t the inbuilt markdown-preview package also offer support for styling with CSS? That is how I switched the typeface used in the preview.


#8

Only if you modify styles.less, I think. I can’t find an option to supply a CSS file.


#9

Yeah, the styles.less file is what I was referring to. But is there really any advantage in getting to supply a separate CSS file? Can’t anything I add to that be added to my stylesheet itself?


#10

I suppose if you were converting Markdown to HTML/PDF/whatever as part of your build then you could set it to use the same CSS - so your preview would be more representative.


#11

If I understand the question and subsequent comments, what you want is a wide margin on the left and right, not center-aligned text.

.markdown-preview > * {
  margin: 0 20%;
}

#12

Thank you so, so much! This is all I wanted!

Can somebody tell me how I can mark this as solved or can mark it as solved if they are a mod?


#13

@Loki, I’m glad that helped!

I see other questions where the asker edits the question to begin with [Solved]. You might also clarify the question since “centered text” has a specific meaning that is not what you were after. Perhaps “[Solved] How to get zen-like markdown preview” would be most helpful to future users.

HTH