2

I am trying to create a Codelab, but I can't get syntax highlighting to work. I am following the instructions and examples from this repo: https://github.com/googlecodelabs/tools

This will look messy here on StackOverflow, but I am formatting it like this.

```javascript
function testFunction() {
  return 0;
}
```

Three backticks followed by the language name, followed by my code, and then finally ended with three more backticks. I've tried it with and without a space between the initial backticks and the language name. I've also tried it without the language name at all.

I'm sure that I've tried to example correctly, and every variation I can think of but it doesn't work. Is there another step involved in getting syntax highlighting to work properly?

EDIT: I've also noticed that only the first step appears. Steps are declared using double "##" Markdown headers, but only the first one actually shows up. The second header isn't even shown at all. Here is what I'm working with. This is basically just the sample code straight from Google.

author: Me
summary: Create a CodeLab Using Markdown
id: 1-java
categories: codelab,markdown
environments: Web
status: Published
feedback link: https://github.com

# CodeLab to Create a CodeLab

## CodeLab Overview
Duration: 0:02:00

Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now. 
When creating a Codelab you have two authoring options: 
1. Using a Google Doc
1. Using a markdown file

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. 



**Resources:** 
* This codelab's original home is located here: [Link to Codelab](https://www.marcd.dev/codelab-4-codelab)
* The markdown for the original codelab is located here: [codelab.md](https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md)
* [Google CodeLabs Tools Github](https://github.com/googlecodelabs/tools) - The repo that contains the claat tool we'll be using today
* [Google Group for CodeLab Authors](https://groups.google.com/forum/#!forum/codelab-authors) - great forum for asking questions about codelabs and discussing future functionality
* [A blog that I used when getting started with Google Codelabs](https://medium.com/@mariopce/tutorial-how-to-make-tutorials-using-google-code-labs-gangdam-style-d62b35476816)

## Environment Setup
Duration: 0:04:00

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](https://github.com/googlecodelabs/tools/tree/master/claat) 

#### Install Go 

Install [Go](https://golang.org/dl/) if you don't have it.
You can use Homebrew if you have it on mac 
``` bash
$ brew install go
```

#### Setup Go Environment Variables
Below is what I set on mac, but instructions are [here](https://golang.org/doc/install) for other OS options

``` bash
$ 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
``` bash
$ go get -u -v -x github.com/googlecodelabs/tools/claat
```

You should now have the *claat* command available to you. 
``` bash
$ claat
```

I am running claat export 1-java.md (my file name). I am then running gulp serve. I've verified that npm install works without issue.

MattC
  • 21
  • 2

0 Answers0