Is there any way to preview text using custom css theme styles other than the basic one that comes with Tbx? I’ve looked around and even tried to replace the style.css file in the Markdown Tbx resource folder and nothing really happens (most likely due to the fact that I don’t really know what I’m doing). I’ve tried fiddling with the markdown prototype template but I am also to inexperienced with using Tinderbox to really grasp its functionalities.
I love Tbx’s ability to transform all kinds of data into structured information using all the different views (Maps, Outlines, Atribute browsers, charts…) and their amazing capability to collect (such as Agents), analyze (links, aliases, hover captions…) and visualize (adornments, shapes, you name it) all sorts of information. However, there is a very powerful way to structure, analyze, and visualize information in the text pane as well using custom markdown css styles, at least in my personal experience. I know Tbx focuses more on its function capabilities rather than “looks” (as I’ve read in some other post) but I find custom css themes tremendously helpful when structuring, visualizing, and analyzing information in the standalone text pane. Just as shapes/adornments can be customized in so many ways in Map view to better make sense of higher level information, so can customizable markdown styles can be used to visualize and make sense of lower atomic text level data in the standalone text view pane.
I don’t know maybe there is a way to actually do all of that, and if there is one, then maybe someone could be kind enough to give me a little guidance? maybe there are other ways to preview text in interesting and helpful ways? Below are some screenshots showing some styles and how they can be implemented in so many ways.
Your examples: did you copy pages from the Tinderbox manual and style them by hand? Or did you generate them in HTML with CSS? Or something else?
You are on the right path of modifying style.css, but you’ll want to get familiar with how CSS works. Since the web is full of examples of using CSS with markdown, there should be good advice to be found.
I would be happy to write up some examples, but I’m not sure what you want to accomplish. Do you want to style text like your examples? Do you have a particular sample Tinderbox file you want to work with?
Be aware, styling (with CSS) is far more effective – and easier – if you export and/or preview with HTML. Markdown wasn’t developed for using stylesheets – in particular the Gruber version that’s built into Tinderbox which is the original and somewhat minimalistic engine. There are other CSS-friendly markdown rendering flavors that can be made to work with Tinderbox.
But before diving into that, I suggest it would be helpful to know more about your particular requirements.
Copied the local printable HTML manual from tinderbox’s resource folder and paste it straight into Typora. They have built in css themes (some of which I’ve posted here) so no I haven’t changed any features. I’ve changed some font styles and colors using BBEdit but that’s about it. Typora last content page is a webpage and serves as both editor and preview at the same time - really nice feature.
I think I got the basics of modyfing css styles but like you’ve mentioned, I do need to get familiar with how css works. As far as Typora is concerned I just copy and paste text with a chosen theme and do minimal theme changes in BBEdit. Very straight forward process but I do not understand the intricacies of using css files if you’d take me in a diff app, so you are correct there.
All I want to achieve is for the text in tinderbox to look like the text in Typora when using various styles, that’s it. And I really would of like to see it styled directly in tinderboxs text pane and not use another markdown viewer to render it. The purpose here is visualizing and structuring data. Using custom css styles helps me achieve that much more effectively in the text pane ( besides the other solid views with their powerful features tinderbox offers. Thanks Paul.
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!?
