Negative and Positive blocks formatting

172 views
Skip to first unread message

ahmad.ta...@gmail.com

unread,
Nov 5, 2022, 11:35:44 AM11/5/22
to codelab-authors
Is anyone having an issue with the negative and positive blocks formatting? Using the latest claat version they no longer show on the final rendered view. 

Thanks!

Ria Galanos

unread,
Nov 30, 2022, 3:01:13 PM11/30/22
to codelab-authors
I also lost the formatting for these blocks.  I use them everywhere so I hope this can be fixed soon.

Marc Cohen

unread,
Nov 30, 2022, 3:14:11 PM11/30/22
to Ria Galanos, codelab-authors
If someone can share a (non-proprietary) markdown example, I can try to reproduce and debug.

--
You received this message because you are subscribed to the Google Groups "codelab-authors" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codelab-autho...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/6872f13a-356c-443f-9088-badee1e9d340n%40googlegroups.com.

Paul Eldridge

unread,
Dec 4, 2022, 8:55:10 PM12/4/22
to codelab-authors
I never did get those to work correctly -- a friend suggested I just use asides instead in the markdown and it works. Like this:

<aside class="positive">
Note: Your snappy text would go here.
</aside>


<aside class="negative">
Note: Your snappy text would go here.
</aside>


Then when you run claat export on the markdown file, it catches those asides and correctly renders the blocks.

Tamimi Ahmad

unread,
Dec 15, 2022, 7:05:55 PM12/15/22
to codelab-authors
yeaah the <aside class="positive"> works... I'll have to fix it in all our codelabs now unfortunately :/ and if we use this html notation then links in negative and positive blocks should now be changed to <a href="url">content</a>

Tony Beaumont

unread,
Jan 9, 2023, 8:14:15 AM1/9/23
to ahmad.ta...@gmail.com, codelab-authors
Yes, the negative and positive blocks no longer work with the current version of claat.

There is a workaround enclosing Positive or Negative sections in <aside class="positive"> or <aside class="negative"> elements, but all the internal markup also needs to be written in HTML.
The issue is reported on GitHub (https://github.com/googlecodelabs/tools/issues/627) but I'm not sure anyone is working on a fix.

On Sat, Nov 5, 2022 at 3:35 PM ahmad.ta...@gmail.com <ahmad.ta...@gmail.com> wrote:
Is anyone having an issue with the negative and positive blocks formatting? Using the latest claat version they no longer show on the final rendered view. 

Thanks!

--
You received this message because you are subscribed to the Google Groups "codelab-authors" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codelab-autho...@googlegroups.com.

Ria Galanos

unread,
Feb 7, 2023, 1:47:00 PM2/7/23
to codelab-authors
Thanks for the info about the <aside> tags.  They work nicely - though it's a bit annoying that I now have to change 100+ files.  The pretty green checkmarks are also not rendering in my "You will learn" section.  I will go and search for a fix to this but if someone happens to know offhand, please let me know.
Ria

Ria Galanos

unread,
Feb 7, 2023, 9:13:35 PM2/7/23
to codelab-authors
In my comment above, I meant to say in my "What you'll learn" section.  Regardless, I have had no luck finding out why the green checks stopped rendering.  The bullets aren't even rendering.  
Thanks!
Ria

Tamimi Ahmad

unread,
May 30, 2023, 12:57:32 PM5/30/23
to codelab-authors

I did some further investigation in this and went back to older versions of claat (when Positive: and Negative: were working) and confirmed that the issue is still there. I suspect that this broke when the css files hosting changed to storage.googleapis.com/claat-public/*.css. I cant find the old version of the css files that were hosted on storage.googleapis.com/codelab-elements/*.css to do a diff and investigate what changed. Can we look into the changes in these files to see what might be the issue?

The markdown to html parser is not converting Positive: and Negative: to <aside class="special"><p> text </p></aside> and <aside class="warning"><p> text </p></aside> respectively, instead its rendering it directly to <p> Negative: text </p>

Marc Cohen

unread,
Jun 8, 2023, 3:48:08 PM6/8/23
to Tamimi Ahmad, codelab-authors
Ok, that took only, what, a year and a half to debug? Sorry about the delay, I work on claat as a (very) part time thing.

So it appears this was broken not by the css change, but rather by this PR way back in 2020, which changed the markdown format for specifying infoboxes. Unfortunately, it didn't preserve backward compatibility and no one seems to have caught that at the time.  One interesting thing to note is this change introduced a different markdown syntax for specifying infoboxes:

> aside positive
>
>  Note: Your snappy text would go here.

> aside negative
>
>  Note: Your snappy text would go here.

So, point number one is you can use the above native markdown syntax (I verified it works for me) if you prefer that for specifying infoboxes over embedded html aside elements (which people realized upstream is another workaround).

Point number two is I'm sorry we broke this, didn't make it more clear what was changing. and took so long to figure out what happened.

Marc



--
Marc Cohen (he/him)
Web: mco.dev

Q: Why is this email three sentences or less?

Tamimi Ahmad

unread,
Jun 14, 2023, 1:02:21 PM6/14/23
to marca...@gmail.com, codelab-authors
Hmm thanks for the update on this Marc. Can we please update the documentation here as well to reflect this https://github.com/googlecodelabs/tools/blob/main/claat/parser/md/README.md?

I am not sure where there are references as well so this, I will check to see if we need to update it somewhere else. 

I confirmed on my end and it works 👍
--
Best Regards,
Tamimi, Ahmad

Marc Cohen

unread,
Jun 14, 2023, 1:17:08 PM6/14/23
to Tamimi Ahmad, marca...@gmail.com, codelab-authors
Thanks Tamini, PR submitted. Should be merged shortly.

Reply all
Reply to author
Forward
0 new messages