Is there a way to preview how pages will break in Markdown? - visual-studio-code

I am writing documentation in Markdown which I will need to convert into a PDF. However, when converting to a PDF using this Visual Studio Code plugin it adds pages and occasionally the pages will break at awkward moments.
Is there a way to view how these pages will break before converting to a PDF?

I don't see anything about previewing breaks in the docs, but you can manually insert page breaks:
Please use the following to insert a page break.
<div class="page"/>
Breaking before headings, for example, might be a good way to partly mitigate this issue.

There is also an alternative. You can use this css style directly as well:
<div style="page-break-before: always;" />
What can be useful, to fit more stuff in one page, is to change the font and figure scale by changing the scale in settings:
"markdown-pdf.scale": 1

Related

Adding mustache template variables while editing in TinyMCE

I'd like to use the TinyMCE editor to write text that includes Mustache template variables, specifically to include repeating groups. I'm willing to use the html code view within TinyMCE if I have to (this is definitely a rarer use case).
I can do it just fine with an ordered list. That is, in the code view I can write
<p>Blah blah blah</p>
<ol>
{{#info.courses}}
<li>{{course}} -- {{course_title}}</li>
{{/info.courses}}
</ol>
<p>All done!</p>
and I get a nice ordered list of all the courses and titles.
However, if I try the same thing with a table (replace <ol> with <table>, etc) TinyMCE rearranges the code when I exit the HTML code view. It removes the repetition tags and places both in a paragraph before the table.
Any way to get TinyMCE to leave my changes to the HTML alone?
I realize it is asking a lot to change the representation of what TinyMCE is working on, but thought I'd ask.
Alternatively, any suggestions on other approaches to include Mustache tags in the contents of the editor?
I'm currently using version 4.9.4.

GitHub Gist CSS

I've embedded a GitHub Gist in a website for the first time, and am having some issues with how it appears. It seems like something in my Hugo theme's CSS is adding space above line 1 and below line 13.
The problematic display can be seen here.
Anyone have thoughts on how I could remove that space? I've never see a Gist render like this before for, nor can I find any questions on here that get at what I am seeing.
Thanks for your help!
gist-embed adds a class of data to the table container. It is used to customize the look of the embedded gist. Adjust your CSS selectors to fix the problem. I am sure you are inadvertently styling the data class directly, when in actuality you want to style a compound selector article.data.
Revisit your CSS code and adjust your selectors to reflect what you desire.

Hidden markdown text on GitHub

Is there anything in markdown syntax specifically on GitHub to support hidden text?
I just want to put some to-do notes in README.md for myself, not to be visible.
EXTRAS
As a tribute to the great answer by Tamas, and what's also asked a lot of times, below is an example of how to write foldable sections within MD files:
<details>
<summary><b>My section header in bold</b></summary>
Any folded content here. It requires an empty line just above it.
</details>
Just use standard HTML comments:
<!-- This is commented out. -->
(This DOESN'T work on GitHub, which strips out CSS. But it can work in other Markdown viewers/editors. The reason I am adding it is because this question came up first when Googling hidden field markdown).
You can hide the field using CSS, if the rendering process respects it and doesn't strip it out:
Is this worth the hassle, as opposed to using an HTML comment? Probably not in most cases, though it does allow toggling visibility on and off.
#### hidden field with metadata 👇
<div class="meta_for_parser tablespecs" style="visibility:hidden">{"dataname":"environment","colvar":"varname","colval":"value"}</div>
#### hidden field with metadata 👆
glow a Rust-based terminal viewer
Typora, on macos
Macdown, on macos
But not GitHub

Why suddenly some things have disappeared from the body section?

I've been working on a website and from time to time some elements are disappearing from the document. I've figured out that it's because in CSS document the early lines are not fully commented. I would like to ask why if even such a tiny thing like Skeleton's default version text is not fully commented or some of the classes or id's don't have a closing bracket then the whole website has layout problems. What skeleton's version has to do with page's body color ? This is really confusing.
Here is the HTML and CSS :
http://codepen.io/anon/pen/vIchA
I would be glad with any help. Yours truly,
D.
Browsers have to guess how to render bad code. Sometimes they will guess and render it correctly, other times it will look weird.
Different browsers are likely to render it differently (though error handling standards are improving)
In this case, your demo lacks a "/" at the start, which means it is trying to render the comments as css. The comments are not css, so it gets confused and does the best it can.
A quick way to find any bugs in the css is to use this:
http://jigsaw.w3.org/css-validator/

Is it possible to control top & bottom page margins when using UIMarkupTextPrintFormatter?

I'm trying to use the printing stuff in iOS 4.2 to print from my iPhone app, but I'm having real trouble getting multi-page content to display nicely. As you can see in the attached screenshots of PDFs generated through the iOS printing API, UIMarkupTextPrintFormatter really likes to use a painfully small top-margin when rendering.
Additionally, it doesn't seem to try to split block-elements too nicely either ... it's tough to see in the screenshot but the page break actually occurs halfway through a table row, rather than on a border between rows.
I've tried using the CSS #page directives to specify page boundaries, however iOS Webkit doesn't seem to support these at all.
Does anyone know of any techniques, either in HTML or through the iOS SDK to make these top-margins bigger?
I really don't want to write a custom UIPrintPageRenderer class because I'm trying to give my users the ability to customize their printouts through HTML templates ... going with a custom renderer would almost certainly make this impossible (or really difficult).
Any help is much appreciated!
You're on the right track with UIPrintPageRenderer, but fortunately you don't need to write a custom subclass to do this. All you need to do is instantiate a vanilla UIPrintPageRenderer, set the headerHeight and footerHeight properties, and add your HTML formatter to the renderer using addPrintFormatter:startingAtPage:. It only takes a few extra lines of code, I have posted my method here: Print paper size and content inset