Fixed the font issue by loading the Nunito google font stylesheet with javascript.
Added this, load-nunito.js, JavaScript in preferences.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://fonts.googleapis.com/css?family=Nunito';
link.media = 'all';
head.appendChild(link);
}
Would be simpler if it were possible to directly include the stylesheet link from preferences, but this works.
Using Google Fonts is one way to solve the font problem. Though instead of using their JavaScript, I’d rather specify the font(s) with their URLs inside the CSS.
Alternatively, you could download Nunito to your machine and install it via the Fontmanager. Which, of course, would not display the documents in the intended way on another machine. But it would save on roundtrips, Google snooping and internet failures. In that case you could refer to the font as “Nunito” as you did before, iirc.
After a cursory look at your stylesheet I’d say it is a bit overengineered. Probably coming from somewhere else? Usually, you would not have that many classes in a HTML document converted from MD.
In your declarations for h elements, you use font: 100 <size> var(--font); That seems a bit unusual as 100 would be a lightweight font – for a headline?
I’d drop that and instead start from scratch with a CSS that you build up in the way you need it. Re-using stuff that was apparently made for another purpose (classes like .\36 make me cringe) is, in my opinion, not a good idea. Just write those rules you need. Then you know what you’re doing and why.
My intention is to base my style off of lit. There is much in that stylesheet that is new to me. One example is the .\36. Using variables like var(--font) should be unnecessary because my sources are scss SASS files. I will take your approach of dropping and then re-applying styles. I would like to do that after I sort out the font issue.
Using Google Fonts is one way to solve the font problem. Though instead of using their JavaScript, I’d rather specify the font(s) with their URLs inside the CSS.
The JavaScript is not my preferred approach. It is only the one that has worked so far. My concern is having the font(s) work on my local machine. I would like to prevent the latency introduced by fetching fonts from the Internet. I would also like my CSS to work while disconnected from the Internet.
I downloaded the Nunito fonts and installed them with (macOS) Font Book. I do not know Fontmanager.
What do I need to do to correctly provide the Nunito fonts locally?
Right. My mistake, I translated the name literally from German
That (downloading and installing) should be sufficient. I never did anything else with Avenir and Century Schoolbook, which I use for headlines and running text.
Then font-family: Nutino should work.
I suggest that you have a look at the series of posts on CSS and Markdown here in the forum.
Fonts: I tried it here, and there’s no need for this @font-face stuff. A simple font-family: Nunito is sufficient if you installed the font using Font Book (!). The src attribute is not needed.
To test your CSS, you can use a relative file link. So, copy the path of your CSS as shown in the inspector and paste it at the top of your MD file like <link rel="stylesheet" href="../../<path>">. In the final HTML, this will appear in the body element, but so be it – good enough for testing, I guess.
Your sample “Markdown” element on GitHub is (in my opinion) a weird mix of HTML and MD. While HTML is perfectly legal in MD, I do not understand why one would want to use an HTML table inside an MD document – MD was meant to make HTML easy, and tables are the more difficult things in HTML. If HTML is in such a dire need, I’d simply write HTML.
Several list elements seem to be indented by one space. Is that intentional, and if so, what is the intention? It seems that this leading space is badly translated into HTML (i.e. as a leading space, too).
If you’re using code fences etc., you might want to include a highlighter (JavaScript and CSS) that formats the code nicely. Doing that yourself in your CSS for several languages might be challenging.
Thank you. I will experiment more with just the font-family. I had that first and it seemed like it was not working, but I retested and that is working fine now.
Good idea. Right now it is not a hardship to change it globally for DEVONthink. Once I get this stylesheet the way I want it, I will set it globally anyway.
Yes, I will replace this. There are two questions I want to work out and the existing test file does not address either.
The first question is what syntax can I use with DEVONthink that can also be made to work with my other destinations. One example destination is wikijs. I want what wikijs calls blockquote stylings to work in both places. More about that later. I think what I will try is to build a Markdown document for DEVONthink that will show all the styles that I can use that can be made to translate to the other destinations. I can then convert to HTML and adjust the CSS so this looks the way I want in DEVONthink and Marked 2.
The other question is “How is DEVONthink converting the Markdown markup to HTML and what extensions work”? It looks like DEVONthink is using something like MultiMarkdown where some extensions can be selected in the DEVONthink preferences.
Examples include:
MathJAX
Mermaid
Prism
There are Markdown test tools like mdtest but I think I need to make something myself.
I may see what I can do with JavaScript to take over the Markdown rendering, or part of it, using Pandoc. Better would be to somehow use AppleScript to hook into DEVONthink, letting DEVONthink handle some of the conversion, like transclusions, etc and proprietary DEVONthink things, then process the result with Pandoc. The goal here being that I could use Pandoc extensions for blocks, LaTeX, etc.
That was directly from another Markdown test page. I will replace the list section. It might be useful to show what syntax works and what does not so I know what to use.
This is how wikijs defines these blocks as styled blockquotes. See wikijs markdown blockquotes. My preference is to use a DIV, for the reason you mention. When using Pandoc it is possible to style a DIV for these block as well. Like shown here. I have not found a way to style Markdownblockquotes outside of wikijs. My temporary solution is to simply use blockquote HTML in DEVONthink styled with the necessary classes. I have been making a proof-of-concept Pandoc filter to replace styled DIVs with with styled blockquotes for wikijs but it is not complete. It is still an HTML solution but more sensible. I can ask wikijs if they will alter there styling a bit so that the styles can be applied to either a blockquote or a div.
It should be a fairly minor and non-harmful change to their CSS.
Yes. I will add Prism or something after I sort out the other items. I want to see which highlighter will be most compatible with the other destinations.
Thank you for your feedback. It is really helpful.
