I found a way to get colored plain text without html in GitHub-flavored Markdown, by using inline LaTeX math expressions, but it would either put every line on one line, or on multiple lines according to opinionated LaTeX/MathJax formatting, or I could do one per line, but each line was subject to the same (centering, etc) even after I found a way around the fact that the \mathtt 'teletype' font was not monospace by multiplying by a ratio to the number of space characters surrounded by sentinel characters in my plain-text-to-GFM() routine, and further, when I entered each inline LaTeX line on its own, a blank line was required between them in order to render a newline, but it added some larger <P />- equivalent between successive lines when rendered, so I used the Markdown bullet-point syntax to preface each of my lines of text, because the vertical space between items in a bulleted list is smaller than between two latex lines with a newline between them. shrug.

If you want to skip straight to an example, you can and if you want to read more about how I came to that, you can come back up here to find all the stuff you you skipped by clicking that link.

As I was tossing around some ideas stemming from someone asking for phart to add mermaid script to its list of text formats it handles (and I have to admit, that's another one of those things that sounds ludicrous - a tool that takes graph objects and renders visualizations of them, using plain text to illustrate charts and diagrams in a lo-fi way, could output more compact text language describing the graph, that is then consumed by another tool that outputs a Scalable Vector Graphic - AND, while ludicrous, does actually sound useful.)

Oh, just in case you arrived here by chance and fortune and have no idea what this is about, and should you wish to know whether you will have in any interest in reading this before you do so, this is a Text Adventure (no, sorry. Not that kind) with Python Hierarchical ASCII [Representation|Rendering] Tool.

So, I'll get to the mermaid topic later, and I'll skip a lot of the exposition that I want to give, and instead will just say that phart now can output SVGs - but they're essentially virtual framebuffers for a terminal display, and instead of drawing the text to your tty, it draws them to an SVG of what would be on your screen. So that's silly and all, but sillier is that the first SVG style it output was really cheating, because it just captured the text output, and wrapped it in <PRE> tags, and embeded the html inside an svg container. Voila! :-)

Cuz then of course, instead of just writing pretty, styled HTML of the Graph, I wanted to capture the full ASCII glory - and ANSI glory too - just within a different text presentation system. So... Yes, phart now - instead of directly outputting colorful HTML as one might assume the solution should be - captures any ANSI ESC sequences along with the text, and then does a little translation to convert the codes from their ANSI Named Color to their HTML color equivalents.

So, not quite through with doing silly things, I also wanted to be able to somehow paste a <pre>-tagged, or fenced-block of a diagram straight from my terminal ( without having to take a screenshot of the ones with color), and paste the text right into these GitHub Markdown pages. I know I said I'd be skipping a lot of explanation, sorry... I'm almost there. Long story a little less long than it could be, GitHub-Flavored Markdown (GFM) - ("GHFM"? "GHFMD"? Something of the sort.) while it does allow embedding of, wouldn't-cha-know, mermaid syntax, which then converts your short little text-symbolic description of the flow to an SVG in your markdown using the mermaidjsAPI, that is not what I wanted. I wanted the text, as it came out of phart.

So, I also learned that GHFM supports a GitHub-Flavored subset of MathJax while trying to see how I could use HTML/CSS or somesuch to add color to text in GHFMx (or is that GHFMDMJ?) Having been playing with LaTex for the last year or so, by which for a moment I thought there might be a solution therein - and there sorta was, insofar as it can be exploited for text-colorization, so long as you want to make that text inside of pretty-looking math-formulas, centered on the screeen and otherwise styled in ways that you cannnot control - anyway, I decided I wasn't just going to take "no" for an answer.

Fast-foward a few hours and here we are, with what I arrived at: a hacky, glitchy method to paste plain ASCII text in a GHMD document, and to have it display in a fixed(ish)-width font, and in colors of one's own choosing. A glimpse inside of the grueling frustration that ensued: You may notice that the diagram, while it is text and in color and all of the things I described, it is also strangely situated within a Markdown bullet-list, one bullet per screen row. The reason for this, not that any of this is justified within reason, is that without an extra newline at every row, GHMD-MathJax Flavors will either 1) display your LaTex equation in Math-mode, with automagic typesetting and centering, which works against my goal of a fixed width alignment, or 2) it will put a very thick blank line (like a Paragraph indicator <P />) between every line of Tex, or perhaps Both, or even more unwanted things.

The bulleted list, as it turns out, takes up less vertical space than the blank line between such GHFMDMJTeXOMGLOL lines. It all fits very well within the generally unnecessary constraints within which phart deliberately does its work, though, doesn't it? It's also a little glitchy and kludgy; no comment on whether that also correlates to some properties of PHART as well.

Now, if you're still with me this far.. Here bear Witness to phart's new output target markdown-latex as it was meant to be seen, which is to say, under very narrow constraints in suboptimal conditions:

• ${\mathtt{\textbf{\textcolor{#111111}{depth:~~~~5~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{max-depth:~~~~5~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{max-val~~~~32~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~┌─────┐~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~│~~~~001~~~~~│~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~└─────┘~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}{┌───}}}\mathtt{\textbf{\textcolor{#111111}{┤~~~~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}{│}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#A00000}{└────┐}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#A00000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~┌─────┐~~~~~┌─────┐}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~│~~~~002~~~~~│~~~~~│~~~~-Z1~~~~~│}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~└─────┘~~~~~└─────┘}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}{┌───}}}\mathtt{\textbf{\textcolor{#111111}{┤~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}{│}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#A00000}{└────┐}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#00A000}~~~~~{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#A00000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~┌─────┐~~~~~┌─────┐~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~│~~~~004~~~~~│~~~~~│~~~~-F1~~~~~│~~~~~~~~~.}}}}$
• ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~└─────┘~~~~~└─────┘~~~~~~~~~.}}}}$

One unintended side-effect of the Bullet Magic to get narrower vertical line-spacing, is that if you view this document on a portrait-oriented phone-screen where the entire diagram does not fit within the screen-space, you can side-swipe each line/row individually to scroll horizontally. I spent more time than I should have briskly swiping the rows of text to the left and watching pieces of the nodes bounce off the edge of the frame.

OK so, the diagram is not perfectly aligned, and I have some tweaking to do on the calculation I came up with to account for the fact that the teletype font being used by the GFM+MJ backend is not actually a monospaced font. I had to stop-gap for now with an actual napkin-math equation (as opposed to just some ascii art that I managed to get colors on in the manner describe by masquerading as several bullet-pointed individual math equations) that alllows the diagram to look close-ish to correct as you see here now, which is to say it has been long enough since the start of my first attempt at pasting a phart diagram in here, just a few - ok several - short, sleepless hours overnight. It's not a highly complex "solution", but it did take some tedious, error-filled exploration of a system I knew nothing about, and allowed me to get a bit creative in the process.

FWIW, and utilizing a GHMD feature as intended, by just using straight-up markdown fences for a pre-formatted block here, I can show you this:

That's the lilttle equation I'm using to accomplish getting around the many obstacles to having what I wanted from that GH/MD/MJ/Latex/Tex/HTML pipeline you're reading this through.

What's funny - especially in light of the preposterous process I just described for getting that nonsense phart graph to display in color, centered, in a teletype font on this page without using an embedded graphics file format, and which really, really wanted to collapse any two-or-more consecutive whitespaces down to one, a la html, and which, coupled with the bulleted list and what I'm calling here now the tilde-space narrow-space compensation factor, along with a judicious application of . as a sentinal character at the beginning and end of each run of such whitespaces (Yes, I see now that I should add an exception for the case when the run of spaces entirely completes a row, when it is ok to elide them completely. Then we won't have the distracting dots on the right-hand side to worry about aligning. I digress), where they're all working together so that some strange, finicky, not-well-publicized security and style-compliance policy doesn't suddenly appear 20 rows in to wreck it all to hell by printing the raw LaTex math block quoted text to the screen like some explosion in a punctuation factory... No, that's not what's funny. I mean, it is funny, but it's not what I was leading up to when I said "what's funny is..."

What's funny is that the strange, complicated looking math syntax where I pasted the equation I'm using for compensating for the strangely-varying glyph-widths to get that almost-"right" diagram to display here in text and in color, not centered, and all that other stuff ... No. What's funny is that the strange mish-mash of mathematical notation above is not the complicated equation it appears to be; but it is a corollary to a theme of this document: displaying text with non-intuitive or ill-fitting lexical formatting can yield surprising (and sometimes useful) results.

That "equation" is actually just this, in a markdown fenced block. that just happened to appear that way when for grins I thought I'd see what would appear if I typed the word math instead of python inside the triple-ticks for automatic lexxing and syntax highlighting. All I actually pasted in that area above with the squiggly math letters was not complicated math, just code copied straight from my IDE:

_TILDE_SPACE_RATIO = 32.0 / 15.0
run_len = max(4, int(math.ceil((j - i) * _TILDE_SPACE_RATIO)))

Yeah. Its just the ratio describing the width of the whitespace for each tilde character that coerces the LateX renderer behind the mathjax/ghfm backend system to actually predictably spit out space characters and respect them (so long as they are surrounded by sentinal dots.) It seems fitting somehow that then I'd paste some straightforward text into a fenced block designed to display it just right, and I'd end up getting properly typeset-as-math nonsense out of it. I had to work so hard for the nonsense I wanted. That is fittingly IRONIC, man.

The obvious finishing move is going to be to make one of those "SPACE_RATIO"s for all characters, and not just the - or whatever I measured, I don't remember now but I do recall there was an even larger discrepency between the displayed letter 'M' and the width of the space and the -both, so I'll want to generate a map of all the characters in phart's character set and put each character * 80, one per row, measure that against what's actually displayed on the screen, and auto-generate a mapping, so all images will be square and true instead of slightly disheveled like in this first attempt.

Curious if anyone thinks up any other tricks similar to abusing bullet points to get a better vertical resolution out of *GFM. Honestly, that was the first thing other than newlines, <BR />, div and span that I tried, so there may be a better way than I have found, but, also honestly, this hacky display technique is well-aligned with phart's aesthetica - "part's principles", if you will... so I'm ok with it.

Anyway, as you see... Phart is exploring New Media to express itself through Math, Science, and Visual Arts!

We hope you'll join us again for our next adventure through needless ASCII Adventures!

** You may be the astute observer who notices that throughout the code and the supporting documentation, I repeatedly swap the words "Rendering" and "Representation" interchangeably as if I don't know the name of my own tool, or that perhaps the name has changed but the documentation updates lag behind the truth.

So which is the correct word in phart's expanded name? I'm not sure, but at least I've been unsure and consistent about being ambiguous unintentionally, just using whichever word comes to mind at the time of writing since day one. It's obviously less important now that the acronym is for all intents its full name, but it seemed a gift when I asked myself "So, what should I call a Python Hierarchical ASCII [Representation|Rendering] Tool, anyway?" and the acronym just came as a freebie.

And just for fun, if you scrolled this far: here is the text inside the Markdown that creates that diagram in the bullet points up above.
For the sake of not making you read something ludicrous and silly ;-) I only reproduce the bottom layer of nodes here; you can click to view the source of the page if you really gotta see it all:

- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~┌─────┐~~~~~~~~~~~~~~~~~~~~~~~~┌─────┐~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~│~~~~032~~~~│~~~~~~~~~~~~~~~~~~~~~~~~│~~~~005~~~~│~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~└─────┘~~~~~~~~~~~~~~~~~~~~~~~~└─────┘~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{┌───}}}\mathtt{\textbf{\textcolor{#111111}{┤~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{┌───}}}\mathtt{\textbf{\textcolor{#111111}{┤~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{│}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#800000}{└────┐}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{│}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#800000}{└────┐}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#800000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#008000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~.}}}\mathtt{\textbf{\textcolor{#800000}{v}}}\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{┌─────┐~~~~~┌─────┐~~~~~┌─────┐~~~~~┌─────┐~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{│~~~~-L1~~~~│~~~~~│~~~~-L2~~~~│~~~~~│~~~~-L3~~~~│~~~~~│~~~~-L4~~~~│~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{└─────┘~~~~~└─────┘~~~~~└─────┘~~~~~└─────┘~~~~~~~~~~~~~~~.}}}}$
- ${\mathtt{\textbf{\textcolor{#111111}{.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.}}}}$