Washed out colour for in-line backtick slices in Markdown PDF v1.0+

[jvarghe]

PDF Generated by pre-1.0 version of MarkDown PDF.pdf PDF Generated by 1.2.0 version of MarkDown PDF (Deja Vu Sans font).pdf

I've attached two files, one generated with Markdown PDF pre-1.0 and the other with v1.2.0. In the older file, text that is annotated with backticks have a vivid red colour, but this is replaced with a very washed out colour in documents generated with post 1.0 versions of this addon. The colour is so washed out I can't even describe what it is.

I assume that this was caused by the switch to Chrome Puppeteer. Is there any way to get the old red colour back? Or replace the washed out colour with another?

[HolisticDeveloper]

I found where the color is set. In ~/.vscode/extensions/yzane.markdown-pdf-1.2.0/styles/markdown-pdf.css, there is this block:

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #C9AE75; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

I changed the color to #A31515 which seems to be closer to what is shown by the VS Code preview window. I suppose there is probably a more official way to override this but it will do for now.

[jvarghe]

Oh thank you very much. I'm sorry, I don't know who you are, so forgive this question: Is this change to be added to the next release or is it is something I have to set in VS Code's settings?

[HolisticDeveloper]

@jvarghe I'm just another user of the Markdown PDF extension, and this was the workaround I found until the author can make an adjustment. If you want to make the same adjustment, edit the markdown-pdf.css file. The path I gave in the previous comment is relative to your home directory, so on Windows 10 that would be C:\users<username>.vscode\extensions\yzane.markdown-pdf-1.2.0\styles\markdown-pdf.css.

Replace

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #C9AE75; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

with

/* for inline code */
:not(pre):not(.hljs) > code {
	color: #A31515; /* customized value */
	font-size: inherit;
}

Or, use a different color code of your choosing.

[aaronjcl]

thanks for saving my same issue

[LuisJoseSanchez]

Thanks a lot 👍

[codeblazar]

Cool. Even 4 years later :)

[jgribonvald]

Thanks ! The default color choice isn't a good one, the contrast isn't good enough for readers

[SomervilleTom]

I'm disappointed that this hasn't been patched in June of 2023.

The reason I export to PDF is so that I can print the result. In the absence of this patch, the printed color on a black-and-white printer is nearly invisible.

Sadly, I'm also unable to find the needed file in my local Windows 10 Pro installation. I'm still searching, I'll add another comment here if I find it.

[SomervilleTom]

I've just installed v1.4.4.

According to the DOS command prompt, there is no markdown-pdf.css anywhere on my C: drive.

Am I missing something?

[Retr0Hax894]

@SomervilleTom I'm using v1.4.4 too and I found the file in C:\Users\name.vscode\extensions\yzane.markdown-pdf-1.4.4\styles Maybe take a look there, just to be sure?

[SomervilleTom]

I appreciate you reminding me that I have not updated this thread as I promised after finding the file in my technology stack.

I do all my development on a remote server (using Remote-SSH) and I solved my issue by installing Markdown PDF on the remote server (an AWS EC2 instance running Rocky Linux).

I was able to find the needed file in the ~/.vscode-server directory on that system:

~/.vscode-server/extensions/yzane.markdown-pdf-1.4.4/styles/markdown-pdf.css

I edited that file (using VSC!) to contain the following:

/* for inline code */
:not(pre):not(.hljs) > code {
	/* color: #C9AE75; *//* Change the old color so it seems less like an error */
	color: #000000; /* Change the old color so it seems less like an error */
	font-size: inherit;
}

The effect of this change is to use the standard "black" color -- #000000.

This works fine for both .html and .pdf exports.

Now if there was only a way to configure the "title" exported by Markdown PDF, my documentation would be even more perfect.

[bradthurber]

Thank you all for the fixes shared in this issue. I stole some CSS from GitHub styles to get the nice (I think) rounded light-gray background on the inline code. There may be bugs - I'm not a CSS guru. Here's my replacement block

/* for inline code */
:not(pre):not(.hljs)>code {
	color: black;
	background-color: #afb8c133;
	padding: .2em .4em;
	margin: 0;
	border-radius: 6px;
	font-size: 85%;
}

[adrbmdns]

@HolisticDeveloper Thank you this really helps a lot!!!