Markdown custom themes

I reinstalled Tinderbox and I will give it another try. Maybe my computer wasn’t in order.

If you want to make a document and try to set it up, but that doesn’t work, then send it to me in a PM and I will look at it for you.

1 Like

The problem might lie with my limited understanding of CSS. For instance in a markdown editor there will always be a folder where you can drop a .css file and change the styling of your text (markdown or dropped from html). It seems that you can use the same style sheet across all markdown editors and the styling is exactly the same. You edit your text in markdown format and preview your markdown with the .css you’ve used. That could be rendered as HTML, pdf, etc.
Now, in tinderbox, I learned that markdown is supported then I saw that the markdown text is styled with a .css file. Hold and behold, it also has a preview pane. Conceptually, to my intuitive (intuitive nonetheless) reasoning, this seems to work on the same principle as a a markdown editor. Markdown in text pane and style sheet in preview pane. Again, I’m very limited to the nuances of Tinderbox and more so when it comes to CSS. I believe that I am not understanding The difference (under the hood that is) between a markdown editor and Tinderbox and how they operate in rendering markdown and styling their text.
Is the css file language syntax used in a markdown the same as the one used in tinderbox? I think that would be a start for this challenge. Regardless I will try all the steps again. Thanks a bunch for the input.

We’re getting a kilometer or two down the rabbit hole, but suffice to say that Tinderbox is not a markdown editor. Comparing Tinderbox to a generic “markdown editor” (whatever that is) is somewhat apples and bananas. You’ll be frustrated if you wonder “why is this not like that”.

You might be right here. Thanks for your patience.

Alright, after all it does seem to function in a similar way to a markdown editor and/or previewer. I couldn’t get the tables to format properly - there’s a post where it explains how that can be achieved- and overall it looks pretty neat.

I am relatively clueless to Tinderbox and I’ve beaten my had for quite a few days trying to figure how this can be done; and although it might not seem complicated it surely was for me. The beauty and structure capability of using markdown in the text pane is something to explore!

IT would be great if someone can figure out how to incorporate other markdown flavors and maybe extra functions such as web fonts, code fences, LaTeX, flowcharts and the like. Before all that, it would be great if someone can help with properly integrating and preserving all the data in these .css styles. Font size and colors does not always translate when bringing inside TBX.

anyways here are the steps

  1. use the built in markdown & HTML Template Prototypes and assign the HTMLPreviewCommand to both of them.

  1. use the Markdown Prototype for your Markdown notes.

  2. find the style.css file assigned to HTML Template in step #1

  3. open (save original in some other place) the file with any text editor (BBEdit…) and paste your new .css syntax and save. it seems that using a name other than style.css will not work!?

  1. Ignore the Markdown Template container you see in these pics. You don’t need it (unless someone proves me wrong :P)

5 a’ish) I can’t get larger amount of text to work. TBX will not preview it and gets stuck without scrolling. Crashes quite a bit as well.

  1. RESULTS:

I am pretty sure this all works just using the Markdown Prototype with HTMLPreviewCommand Attribute and changing the style.css file :), I think.

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!!!

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

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:

body{
	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.


Sidenotes:

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.

1 Like

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 ```markdown.pl`` 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).

1 Like

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="https://raw.githubusercontent.com/markdowncss/retro/master/css/retro.css">

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.

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.

5 Likes

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…

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.

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.

2 Likes

Such a neat resource, thank you Paul.

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.

Yesy yes yes, even better. Only if people understood the power of markdown. I was one of those for many many years. Thanks Pat!

1 Like

I was using the markdown file and it just occurred to me I never thanked you for it. Muchos Gracias!!!