Ah, Typora. It is a very nice editor. What happens in their themes however can be a bit complicated. You can experiment to an extent by downloading a Typora theme and unzipping it. You’ll see something like this
All the .woff documents are web fonts (Web Open Font Family), which are fonts that are compressed and can be included in a web page. You could experiment with using the Typora CSS files’ content in a Tinderbox document. I suggest doing this with HTML export / preview, not with Markdown. The .woff calls may or may not work – if I have time I will experiment with that aspect, but the point is that what Typora does actually has very little to do with .css. It is using Markdown to render HTML and then using the CSS and embedded fonts to style the HTML. A two-step process - rather complex and requires study and experimentation, and is intended for use inside their editor.
There are articles in this forum about using CSS with HTML. Also in the legacy Tinderbox forum (the old forum that froze a few years ago and will die eventually). And Howard Oakley has several example Tinderbox files that used CSS. Howard seems to be burying his Tinderbox work in his site so it’s not easy to locate, so that source might also be vanishing.
I believe so. Make a new template and add that code, then set the new template for the desired note(s). Whether that works with Markdown (about which I know little) I’ll leave for someone else to try.
It doesn’t render Markdown in that case. So far the only time I’ve seen it using the $HTMLPreviewCommand to preview Markdown is if $HTMLExportTemplate is not set.
Notes containing markdown $Text are assigned the “Markdown” prototype – either the built-in prototype or a prototype of one’s own invention
The “Markdown” prototype contains the $HTMLPreviewCommand, which can be the built-in preview command (from the Tinderbox.app package) or any other you choose
The “Markdown” prototype is assigned a “Markdown template”
The “Markdown template” contains the desired styling – the built-in HTML template can be modified to add CSS, if desired.
The $HTMLPreviewCommand generates HTML
The “Markdown template” assigns styles for the generated HTML
The last sounds useful. It would be helpful to hear feedback on how the process described in the last post works in practice. I ask as if it proves to be ‘the’ solution I’ll incorporate that into the aTbRef notes on use of Markdown.
I’ve tried every possible combination and I can’t get it to work. It’s really frustrating that I am having such a hard time figuring out something that shouldn’t be that complicated. All of the material I have found on the subject is explained in a manner which assumes knowledge of steps 1-8 to get to step #9. It seems to me that even the simplest concepts require some other kind of knowledge. Mystery seems to arrive within the first couple of steps, at least in my case. Marks reference page is great but I do not have the knowledge to apply it in any way. After all it is a a reference guide.
In any markdown editor you can drop a .css theme and see your text stylized in the preview pane. I’ve replaced, added, tweaked the theme. I’ve Followed Paul’s every step and glared at Pat’s attached .tbx document for the past couple of days…we’ll, nothing is stylized when I open it).
If this is possible and if and when time allows, can someone provide tinny toddler steps - assuming no knowledge of any other steps - or maybe even a document that produces the .css style found in all of the other markdown editors? That would be really nice.
I can assure you that the steps listed above work, as is. So, perhaps another try is in order. Ensuring, first, that you have Tinderbox 7.5.x installed, and are using the built-in Markdown prototype?
Tinderbox is not a “markdown editor”. One cannot “drop a .css theme” onto it. Also, “producing the .css style found in all the other markdown editors” cannot be done – we don’t know what “all the other editors” are not what their styles are. Sorry, I don’t mean to sound challenging – but I believe if you stand back, try the example, and use Pat’s file you’ll find success.
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”.
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
use the built in markdown & HTML Template Prototypes and assign the HTMLPreviewCommand to both of them.
the Markdown Prototype should link to the Markdown.pl in your Resource/Markdown folder
find the style.css file assigned to HTML Template in step #1
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!?
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!!!
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:
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.
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.
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).
