How does TW translate wikitext to HTML

[Surge]

Hi Eric,

Resurrecting this old thread for a somewhat related issue. Here’s the wiki text I have (i replaced the triple quotes with ticks because it messes up the formatting here):

<<.warning "HELLO
'''bash
some code
'''
">>

The html renders as:

<p>
  <div class="doc-icon-block">
    <div class="doc-block-icon"><svg><path></path></svg></div> HELLO
  <code>`bash
  some code
  </code>
  <code>
    &lt;/div&gt;
  </code>
  </div>
</p>

Using the code widget works, i’m just trying to understand the mechanics here, how does TW arrive at that?

[pmario]

Have a closer look at: Create Code-Blocks Using Backticks in Discourse Threads to see how to create code blocks in discourse

[pmario]

For me your code does not make too much sense.

You wrote: “(i replaced the triple quotes with ticks because it messes up the formatting here)”

I think you meant: you replaced tripple backticks ``` with tripple single-quotes '''
But if I do replace the single-quotes with backticks tiddlywiki.com produces this.

<p>
  <div class="doc-icon-block doc-warning">
    <div><strong>Warning</strong></div>
    <div class="doc-block-icon"><svg><path></path></svg></div>
    HELLO
    <code>`bash
    some code
    </code>
    <code>
    </code>
  </div>
</p>

Which is different to your HTML output. And it produces an inline code block, which is probably not what you expected. right?

I assume, what you want to have a “warning box” that contains some text and a code block with some BASH commands. – right?

I think the <<.warning>> macro can not do what you expect at the moment. We will have to have a closer look at the code.

[Surge]

Thank you for the link on the syntax for this in discourse and sorry for the confusion caused. So the code in question looks like this:

<<.warning "HELLO
```bash
some code
```
">>

My interest is purely scientific here. I’d like to understand why that html is produced. But if it’s not immediately obvious, I’m good with that.

[Scott_Sauyet]

@pmario

I think the <<.warning>> macro can not do what you expect at the moment. We will have to have a closer look at the code.

I think you can get somewhat close with

<<.warning """HELLO
<pre><code class="language-bash">some code</code></pre>
""">>

But you won’t get the language-level highlighting for the code-block. I don’t know if there is a setting somewhere to enable that.

I don’t know if your question was more general and this happened to be your example, or if you were just trying to format that warning correctly. If you’re asking how the wikitext → HTML conversion happens, I’m sure it’s a substantial and intricate answer. I would love it if Jeremy, Eric, Saq, or Mario could shed some light on that. But I really want to know too, and it’s probably the next thing I’m going to dig into for TW after I clear some other work off my plate. If I do figure out something significant, I will try to post my findings in a thread here, hoping for corrections from the core team.

[Scott_Sauyet]

Thank you @pmario!

This was the sort of thing I was thinking of doing… except that I wanted to also go further into the weeds and determine where in the code all these things are happening. Perhaps I’ll get into that at some point.

I believe this answer would be a useful addition to TW documentation, if not at tiddlywiki.com, then at least in a community wiki entry here.

[linonetwo]

Have a look at how TW translate wikitext to wikitext …

feat: serialize AST node back to wikitext string

to HTML have 2 more steps, it will new widgets like new ListWidget() to based on ast, and each widget’s render method will create HTML for its part.