Markdown custom themes

(Alvin) #22

Ha! I’ve also noticed that pasting the css syntax in the markdown template is effectively the same as changing the css style. A very interesting markdown day!!! Big thanks for implementing this feature, this is GIGANTIC!!!

(Kay Krämer) #23

Sounds very interesting…
I am also a big fan of markdown. Especially for short notes. Very practical thing!

(Mark Anderson) #24

Most likely this wasn’t an envisaged use case. Original Tinderbox design was for small notes, albeit ones which could be composited to larger notes during export. Here, we are talking about internal web-previewing large un-exported notes which is a significant difference when it comes to how/where styling information is accessed.

The styles.css in the App Support folder is pretty simple:

	font-family: HelveticaNeue,Helvetica,Arial,sans-serif;
	margin-left: 7.5%;
	margin-right: 7.5%;
	line-spacing: 1.4;

This just gives some minimal non-web-browser-default setting, most importantly a bit of left/right margin whitespace. My hunch is thus that the app’s ‘built-in’ Markdown engine expects/uses a styles.css and that this is loaded before any CSS added in-line or loaded from other CSS files. Unless using inline <style> CSS tags (now a generally deprecated HTML usage) the options are to add to or replace the content of styles.css. I’m not sure how you link to a different CSS file form within your TBX, i.e. before doing any export.


I can’t agree enough with @PaulWalters post about making (unintentionally) false steering assumptions about what Tinderbox app is simply based on what we wish it to be—normally based on heavy use of different apps—rather than what this app is. A hammer is good for nails, but not screws: not all sharp pointy things put into wood are nails, even if one is very used to using hammers. It’s easy to misread that as snark, which it isn’t - most of the unhappiest thread starts here are to do with untested false assumptions about how the ‘should’ work.

I’ve not contributed much in this thread simply as I’m no Markdown expert whilst other regular contributors are. That said, I’ve done some fairly gnarly export work with Tinderbox export code. Once the basic Markdown set-up is agreed, along with sensible modification alternatives like different CSS, I’m happy to add to my currently limited aTbRef documentation on this.

(Paul Walters) #25

A “solution” that causes crashes or works only with sample text isn’t a solution is it? If you have crashes, send them to Eastgate to determine the source and provide guidance.

The cleanest way to style text, markdown or HTML, is to embed the CSS code in the template for those notes.

All of these things are the function of the external command pointed to in $HTMLPreviewCommand, as discussed elsewhere. You can point to other parsers or executable scripts in /usr/local/bin/... rather than the default ````` located in the Tinderbox app package. YMMV – Tinderbox is calling those external scripts as a convenience. Some may work, others will not.

As mentioned here in step #4.

CSS is a very advanced technique. Readers should be aware that merely copying CSS from another source (e.g., the Typora example at the head of this thread) may not work because CSS can invoke external code, including from the web, that Tinderbox has no ability to execute. I recommend working through the CSS examples at W3 Schools (free).

(Pat Maddox) #26

fwiw when I tried to download and use my own file on a different computer, it didn’t work - because I had created it using a downloaded-but-not-installed copy of Tinderbox, so it set the markdown path as being something under /Volumes (the mounted disk image). Sorry for throwing people off with that.

Anyway, the principle behind my document is simple: all HTML is valid markdown. So, embedding a <style> tag directly in the Markdown note (via its template) will “pass through” the markdown renderer and stay as HTML, whereas the markdown gets converted to HTML. The resulting HTML file is rendered with the style tags, causing the HTML to be styled.

There’s no separate CSS file to deal with. But… you can use a separate CSS file if you’d like, using the <link> tag. I replaced the <style> tag in my template with:

<link rel="stylesheet" type="text/css" href="">

and that produces:

and I can use a file:/// based reference, if I’ve saved the file locally:

<link rel="stylesheet" type="text/css" href="file:///Users/pat/Desktop/retro-pat.css">

which would let you link to a CSS path on your computer (say for a markdown preview application you really like) or custom-build your own CSS file using a text editor more suited to it.

(Pat Maddox) #27

btw since someone mentioned Typora, I downloaded it to see if I could use its theme. Using the technique I showed in the above post, I changed my template to include:

<link rel="stylesheet" type="text/css" href="file:///Users/pat/Library/Application Support/abnerworks.Typora/themes/newsprint.css">

(you’ll have to change the path to suit your own system)

and it got styled as

so you can definitely use CSS from other Markdown editors if you want.

(Kay Krämer) #28

The question is: Is TB a hammer, a saw or a screwdriver? It is a very versatile tool, why not also a markdown editor? Besides being an outliner, mind map, HTML export tool, GTD planner or whatever…

(Mark Anderson) #29

Actually, Tinderbox is a toolbox with a wide range of tools. This is often confusing to someone who generally uses a lesser set of tools. Much of the toolset is ignored and emphasis placed on the fact that [some other] app has better support for that single feature.

There are people who want to, and do, make art in Excel. Given their interest in this aspect of use they might argue for improving the drawing/painting features of Excel, when compared to say Illustrator or Photoshop. Whether it’s worth the ROI for the dev is a different matter.

Bear in mind that this is a user-to-user forum: we forum members can’t fix the app in the way you seem to want. Thus, if you think MD support is needed then you should contact tech support with your request for improvements and the rationale (the latter makes the former more likely to get traction - though ‘because app X does it better’ isn’t a rationale).

It’s not my role here to argue for a particular view - I’m just giving you the options.

(jmm) #30

This is a problem I had also faced. Templates with paths to CSS files in one computer are not located when used in another computer. Additionally, if the CSS path in the template is to a file generated inside the folder Tinderbox is exported to, they are not rendered inside Tinderbox’s Preview until the notes are exported.

Those two issues can be addressed either by including the CSS script inside the HTML files, or by including two paths in each template, one to a preferred and and another to an alternate stylesheet.

Since I can hardly ever contribute to this forum with solutions instead of doubts, I attach a small sample file with the above solutions, for what is worth -it may have wrong assumptions, I am no advanced user. The attached sample file also solves the inconvenience of having to change paths to the new CSS inside each template (let’s say, all templates for html export) when wanting to change stylesheet, as a aTbRef does.

The file attached regarding the location of stylesheet paths applies to any kind of templates (markdown, html…), but I use mardkdown as an example to stick to the topic of this thread.CSS-included_alternate.tbx (173.6 KB)

As for the markdown vs rtf debate, I have pushed for markdown in this forum before. Nowadays, I have given up taking notes in markdown in Tinderbox. I take them exclusively in Tinderbox’s rtf. I export them to HTML, and easily convert HTML to markdown with pandoc.

Nevertheless, I use Tinderbox not only to store notes but to write drafts. I also write drafts in rtf and, once exported to _HTML, I convert them to markdown with pandoc. I haven’t tested it extensively but, given the capability of Tinderbox’s Preview, I don’t foresee problems for using Tinderbox just for final corrections in raw markdown if needed.

(Alvin) #31

Such a neat resource, thank you Paul.

(alj ) #32

Regarding the default style.css in the Tinderbox Markdown resource folder. Here’s the current CSS:

body {
    font-family: HelveticaNeue,Helvetica,Arial,sans-serif;
    margin-left: 7.5%;
    margin-right: 7.5%;
    line-spacing: 1.4;

But, line-spacing doesn’t seem to do anything, nor do I think it’s a real CSS property. I think it’s a mistaken combination of letter-spacing and line-height. If you update your style.css to this (updated to line-height):

body {
    font-family: HelveticaNeue,Helvetica,Arial,sans-serif;
    margin-left: 7.5%;
    margin-right: 7.5%;
    line-height: 1.4;

… it looks a little nicer in the note preview.