In this codelab we are going to use the second option and author our codelab using a markdown file. This gives us the flexibility of using our markdown file for other things and also storing it in our github repo with any code that might be used for a tutorial.
-Here is an example image of another CodeLab that I created:
Here is an example image of another CodeLab that I created:
Resources:
-
-
- The markdown for this codelab is located here: codelab.md +
- This codelab's original home is located here: Link to Codelab +
- The markdown for the original codelab is located here: codelab.md
- Google CodeLabs Tools Github - The repo that contains the claat tool we'll be using today
- Google Group for CodeLab Authors - great forum for asking questions about codelabs and discussing future functionality
- A blog that I used when getting started with Google Codelabs @@ -49,16 +50,21 @@
- List -
- using -
- bullets -
- List -
- Using -
- Numbers -
In order to create a CodeLab you need Go and claat (the codelabs command line tool) installed.
The instructions below are what worked for me on Mac, but you can also find instructions here
-Install Go & claat
+Install Go
+Install Go if you don't have it.
You can use Homebrew if you have it on mac
$ brew install go
-$ go get -u -v -x github.com/googlecodelabs/tools/claat
Setup Environment Variables
+Setup Go Environment Variables
+Below is what I set on mac, but instructions are here for other OS options
$ export GOPATH=$HOME/Go
$ export GOROOT=/usr/local/opt/go/libexec
$ export PATH=$PATH:$GOPATH/bin
$ export PATH=$PATH:$GOROOT/bin
Install claat
+Install claat
+$ go get -u -v -x github.com/googlecodelabs/tools/claat
+You should now have the claat command available to you.
$ claat
Setup Environment Variables
Now that we have the environment setup let's go ahead and create a markdown file where we'll create the actual codelab.
+$ vim codelab.md
Fill-in the header metadata
@@ -101,8 +109,8 @@Add the Title
Next add your title using a single ‘#' character
# Title of codelab
Add Sections & Durations
-Then for each section use Header 2 or ‘##' & specify an optional duration beneath for time remaining calculations
Optional section times will be used to automatically total & remaining tutorial times
In markdown I've found that the time is formatted hh:mm:ss
Add Sections and Durations
+Then for each section use Header 2 or ‘##' and specify an optional duration beneath for time remaining calculations
Optional section times will be used to automatically total and remaining tutorial times
In markdown I've found that the time is formatted hh:mm:ss
Example
## Section 1
Duration: 0:10:00
@@ -111,10 +119,10 @@ Add Sections & Durations
Duration: 0:05:00
Add Section Content
-Now that we have 2 sections to our titled codelab let's go ahead and add some content to each section.
Make up your own or copy & paste the example below:
Now that we have 2 sections to our titled codelab let's go ahead and add some content to each section.
Make up your own or copy and paste the example below:
Copy into section 1 (Below Duration and above Section 2):
### Info Boxes
-Plain Text followed by green & yellow info boxes
+Plain Text followed by green and yellow info boxes
Negative
: This will appear in a yellow info box.
@@ -131,23 +139,34 @@ Add Section Content
* World
You created bullets!
+
+### Numbered List
+1. List
+1. Using
+1. Numbers
+
+You created a numbered list!
+
Copy into section 2 (Below Duration):
### Add a Link
-Let's add a link!
+Adding a link!
[Example of a Link](https://www.google.com)
### Add an Image
-Let's add an image!
+Adding an image!
+
+### Embed an iframe
+
See the "Markdown Syntax Backup" section for more examples of what can be done.
More Markdown Parser examples can be found here.
More Markdown Parser examples can be found here.
Now that you have an initial codelab defined in your markdown file let's go ahead and generate the static site content.
We can export & serve the content locally using the claat command that we installed earlier.
Now that you have an initial codelab defined in your markdown file let's go ahead and generate the static site content.
We can export and serve the content locally using the claat command that we installed earlier.
$ claat export codelab.md
$ claat serve
Add Section Content
public static void main(String args[]){
- System.out.println("Hello World!");
- }
-Adding an inline code snippet
Adding an image
-
-
-
-