Markdowns for Official Google Codelabs?

[Paul Eldridge]

Hey folks! I'm looking to replicate some style elements of some nicely formatted official Google Codelabs. 

Most of the format guides I find online are all oriented around the Google Doc workflow, not a native markdown editing workflow. 

Are there any markdown examples, or places where the codelab markdown itself is hosted, for official Google codelabs? 

For instance, if I want to replicate the nice lighter grey font in this one:

https://codelabs.developers.google.com/codelabs/cloud-deploy-website-on-gke?hl=en#0

Or is this all in the .CSS files themselves?

Or the buttons here:

https://developers.google.com/codelabs/pwa-training/pwa05--empowering-your-pwa?hl=en&authuser=1#1

Or the embedded survey in this one:

https://github.com/googlecodelabs/tools/blob/main/FORMAT-GUIDE.md

^ Again these seem to assume the author is using the Google Doc workflow, talking about "Cells" with certain colors. 

Where do I change that in the markdown? Is there a templated example with all possible elements?

-- Apologies for the n00b question, but if I could easily find the source markdown for that codelabs, I could replicate any code elements that change coloration, Google Survey, and other style elements. 

Thanks!

[Marc Cohen]

Hi Paul,

The differences you see when you compare Google's public codelabs with the codelabs you get when you generate your own with the claat tool are due to different css files used by each. You have complete control over the styling of your generated labs but you'll need to do the work to get the look you want.  You can get pretty far by using Chrome devtools to examine styling of certain elements, as a learning tool to inform your own css.

But the bottom line is to fine tune the look, you want to modify your css files, not your markdown.

Marc 

--
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/25d8656a-bdce-484c-aeb2-fb8340cadea8n%40googlegroups.com.

[Paul Eldridge]

Got it, thanks. :)

How about the embedded survey? Is there a markdown example of that somewhere? 

I kind of wish the code labs chrome extension had a reverse direction "reverse engineer" function that would generate a markdown file or Google doc based on a code lab your browser currently had open. 😬open

.

[Marc Cohen]

I can't tell - I think you might have included the wrong link for the embedded survey (your link points to the formatting guide). But even without seeing that, I'm suspecting it's a Google internal thing, which you can try to emulate but I'll take a look if you point me to the codelab.

--

Marc Cohen

Web: mco.dev

Email: m...@google.com

Q: Why is this email three sentences or less?

A: three.sentenc.es

[Marc Cohen]

Ah, I understand, you want to know how to do the embedded survey advertised in the formatting guide via markdown. I'll take a look.

[Marc Cohen]

For these items, try including html in your markdown doc (html is legal markdown), like this...

button:

<button>[Download Zip](https://www.google.com)</button>

survey:

<form>
  <name>How will you use this codelab?</name>
  <input value="Only read through it"/>
  <input value="Read it and complete the exercises"/>
</form>

[Paul Eldridge]

Ah hah! Looks like there's a whole different .CSS called "devsite-content" in an "app.css" file for Google's coloration? Interesting. Man I had no idea what I was getting into just wanting to make the font grey. 😅

Thanks so much for the Survey Markdown! It works! 

 

^ Where's that survey answer data stored btw? 

The FORMAT GUIDE.md says "The participants' answers will automatically be added as custom variables in Google Analytics" -- asking some colleagues here:

• It looks like one would need a Google Analytics Account
• Pass the GA-###### ID as a parameter to claat to embed
• Then look at the results in Google Analytics?

^ If we're using these Codelabs internally for custom training, our Security team would flip at passing that information externally. Is there no other way to capture that form data? :( 

[Marc Cohen]

Honestly, I'm not sure how the form is wired up to pass the feedback to Google Analytics but since you're writing html and you can insert javascript as/where you like, you're in control over that process. I mainly wanted you to know how you can insert a survey type form into your codelabs via markdown.

To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/CAKGmzC9d7n4WE3dW0hXjWn3yV64nzqEgWMT4Yos7nYX-%2BRdAWw%40mail.gmail.com.

--

Marc Cohen

Web: mco.dev

Email: ma...@mco.dev

[HUMBLE FISTON JOSHUA]

Salut Dear 

 Excuse me sir 

I need help me please

 

Je change ma vie partagez avec vos amis et dans d'autres groupes

 Regarde ma page sur Facebook

 Je vous aide à promouvoir d'autres groupes Votre soutien est toujours nécessaire

 Aidez-moi, s'il vous plaît

https://www.facebook.com/groups/2058336801111771/

I change my life share with your friends and in other groups 

Look at this my page on Facebook

I help you promote other groups Your support is still needed

please help me

https://www.facebook.com/groups/2058336801111771/

Get Outlook for Android

---

From: codelab...@googlegroups.com <codelab...@googlegroups.com> on behalf of Marc Cohen <marca...@gmail.com>
Sent: Wednesday, November 2, 2022 7:05:03 PM
To: Paul Eldridge <eld...@gmail.com>
Cc: Marc Cohen <m...@google.com>; codelab-authors <codelab...@googlegroups.com>
Subject: Re: Markdowns for Official Google Codelabs?

 

To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/CAPmrbqp4CxwXKnCXvpQjjypYSRzUV8A03MXaJLAr_XMgu%2BFBnw%40mail.gmail.com.

[Paul Eldridge]

Hey that's already a gigantic help. :) 

Thanks so much! It's exceedingly difficult to find straightforward "This markdown becomes this" example, we need a whole fleet of "Codelabs to create codelabs". 

[ahmad.ta...@gmail.com]

Totally agree on the codelab to create codelabs! In fact we created one for our community at Solace to show how to create a codelab that follows some conventions we set place. 

Thanks for asking questions - I just found out about the embedded html in markdown! 

[Paul Eldridge]

Yeah! Your Codelab to Create a Codelab pretty much is a semipermanent open Chrome tab as I build these. 😄

You received this message because you are subscribed to a topic in the Google Groups "codelab-authors" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/codelab-authors/DH78qsmEMHQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to codelab-autho...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/f6b81a8b-b0be-49a4-b65e-b5ab3435d843n%40googlegroups.com.

[Wu-chang Feng]

I have this screencast from when I helped a student group set up a codelab site of their own.

https://youtu.be/pDpptrDcwgM

Wu

To view this discussion on the web, visit https://groups.google.com/d/msgid/codelab-authors/f6b81a8b-b0be-49a4-b65e-b5ab3435d843n%40googlegroups.com.