Title

Create the document title with Heading 1

If you want to write a tutorial with a defined duration, add it right under the headline using Heading 5

Sections

Create leads using Heading 4

Create sections using Heading 3

All headlines using Heading 3 will show up in the navigation menu on the right-hand side.

The navigation will allow you to jump to a section of interest.

The visible section will be also highlighted in the navigation menu when scrolling.

Formatting

Formatting is limited by design to create a consistent output.

Only a few formatting options will be respected, all other formatting options will be removed.

Use plain text, lists and links in your text.

This is a bullet list

• Item 1
• Item 2
• Item 3

You can use bold text, italic text, underlined text and text with a highlighted background color.

Please note that the selected background color will always be replaced with a dedicated highlighting color which you may change in the stylesheet of your html.

Please note that any blank rows will be removed.

Labels

You can create labels using white text on different background colors:

This is default label (dark gray 1 #b7b7b7)

This is primary label  (blue #0000ff)

This is success label (green #00ff00)

This is info label (light blue 1 #6fa8dc)

This is warning label (orange #ff9900)

This is danger label (red #ff0000)

Links

Simple text with a link in it.

You can create links to external sites by adding [extern] to the link text.

Buttons

You can create buttons by creating a link with the button- prefix.

If your link text is  button-primary:My Button as text of the link it will render this button:

My Button

Icons

You can use all glyphicons from bootstrap out of the box.

Just type  and format it using Courier New.

If you are embedding your own icon fonts you may want to enter your own class names instead.

Notes and alerts

You can add important notes to your document by using a simple table with exactly one row and one column.

Please note that any blank rows will be removed.

All other formatting options in your table like the border color will be ignored.

Responsive images

All images will be transformed into responsive images. They will span the full-width of the content area and the height will adjust automatically.

Embedded videos

If you want to embed a video, create a link with a target URL starting with https://www.youtube.com/watch

You can specify the ratio of the link video (either 16by9 or 4by3) in square brackets in the text of the link:

Multiple columns

You can display parts of your content in two columns either side by side or on top of each other.

To create such a split section create a table with exactly one row and two columns.

This is suited for images like screenshots with step-by-step instruction on the other side

• You can add a simple table with two columns to split the content.
• On mobile devices the columns will be displayed on top of each other.

If you are using columns please note that they will be displayed below each other on mobile phones.

Four columns may be useful for an image gallery.

Source code

You can include source code into your document by creating a simple table with exactly one row and one column.

Set the background color to #f3f3f3 to turn add syntax highlighting to the code in your table.

// Javascript source code
var a = {
  test : 500
}

You can add multiple languages to your source code by starting the section with the language tag:

var a = {
  test : 500
}

int a = 500;

<h1>Headline</h1>
<p>This is a paragraph</p>

When applying Courier New to a selection, it will also be displayed as code in inline text.

Tables

You can use simple tables in your documents, but be careful as they may not fit on the screen properly.

You may want to use horizontal alignment and the background color for your columns.

All other table formatting like borders etc. will be ignored.

HTML

In the rare case that you need elements that are not supported you can enter HTML code right into the Google Doc.

Create a 1x1 table with background color light green 3 (#d9ead3) and type the HTML code into the table.

Please note that this is an expert feature and if you do not know exactly what you are doing, you can break the resulting site.

Questions and Feedback

If you have any comments on this page, feel free to add suggestions right to the Google document that we are using to generate this page.

Last Updated: 11.07.17