In reference to the preview HTML → print action, I would like to change the print background color of text between backticks from light grey to yellow and change the font from menlo to arial, so that I can use backticks to basically highlight.
Below is the HTML preview script taken from the preview HTML → print action. I was looking for the word precode in the script which is what is between backticks if I understand correctly, but could not find precode in the script below.
thank you
————-
Preview
@charset "utf-8";
html {
font-size:100%;
font-family: “Helvetica Neue”, “Helvetica”, sans-serif;
}
body {
margin:0;
padding:1em;
}
@media (max-device-width: 480px) {
}
@media (min-device-width: 481px) {
body {
margin:auto;
max-width:600px;
}
}
blockquote {
font-style: italic;
}
code, pre {
border-radius: 3px;
padding: .5em;
background-color: #F8F8F8;
color: inherit;
}
table {
margin: 1em 0;
border: 1px solid #aaa;
border-collapse: collapse;
}
th {
padding:.25em .5em;
background: #efefef;
border: 1px solid #ccc;
}
td {
padding:.25em .5em;
border: 1px solid #ccc;
}
%%[[draft]]%%
it is there. Can you see “pre” in the first line of this CSS?
code, pre {
border-radius: 3px;
padding: .5em;
background-color: #F8F8F8;
color: inherit;
}
1 Like
thanks very much.
How I missed that after going through it a number of times remains a mystery.
I changed the background backtick color successfully.
I notice that the pre code font is different in the preview (looks like menlo) but is not defined in the script which would have suggested to me that it would have been inherited, thus helvetica. Why not ?
May I ask you : where in the script do I define the single, double and triple hash font and color ?
thanks again very much
If you have Markdown like this:
```
foo
```
Then transform that to HTML, you get this:
<!DOCTYPE html>
<html dir="auto">
<head>
<title>```</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@charset "utf-8";
html {
font-size: 100%;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
}
body {
margin:0;
padding:1em;
}
@media (max-device-width: 480px) {
}
@media (min-device-width: 481px) {
body {
margin:auto;
max-width:600px;
}
}
blockquote {
font-style: italic;
}
code {
border-radius: 3px;
background-color: #efefef;
color: inherit;
}
pre>code {
width: 100%;
padding: 0.5em 1em;
}
table {
margin: 1em 0;
border: 1px solid #aaa;
border-collapse: collapse;
}
th {
padding:.25em .5em;
background: #efefef;
border: 1px solid #ccc;
}
td {
padding:.25em .5em;
border: 1px solid #ccc;
}
img {
max-width: 90%;
}
</style>
</head>
<body>
<pre><code>Foo
</code></pre>
</body>
</html>
That should fall back to the default, but I believe it should be a special case (I’m not a CSS expert) and use monospace as the default font for display of this type of tag as it is purposefully a fixed-width font display tag.
1 Like
I changed the backtick precode background to yellow.
If I HTMP preview then print: the background color between backticks is
- HTML preview yellow
- print white
but if I HTML preview → share → copy as rich text → the background is yellow if I paste in an email , in Scrivener etc
I imagine that there is no way to be able to get the yellow background to print directly from drafts ?
thanks very much
The print step can use the same template as the preview.
Now if I take some appropriate Markdown and preview it, it looks good. Tap continue and go to the print and for me it loses the colour. But this is a monochrome printer, not colour. Force touch and switch to the PDF preview and the colour is back.
My guess is either you are missing out on setting up your print action CSS, or you have a non-colour printer selected when previewing.
Hope that helps.
1 Like
Thank you for all your work
I installed the action
At first all I got was a spinning wheel. I quit and restarted drafts and it works like a charm
Thank you so much! You are truly brilliant !!!
