Default template

Supported formats

By Ben Koski and the Library Team.

Last edited by michael.andre. Created .

Table of Contents:

Basic Formatting

Basic text formatting like bold, italic, and underline are supported. These can be combined. Links are supported, both to external pages and other docs in the folder. Text color and highlighting are not supported. (You won’t see them being colored!)

You can use bulleted lists:

Numbered lists:

  1. Item 1
  2. Item 2
  3. Item 3

And nested/combined list styles:

  1. Item 1
  1. Item 2
  1. Item 2.2.1

Tables

Tables are supported and can contain text formats. Coloring and highlighting, however, is removed. See the example below:

Growth in Unique Visitors

May 2010

April 2017

June 2017

nytimes.com

32 million

89 million

121 million

washingtonpost.com

17 million

77 million

88 million

theonion.com

1.3 million

6 million

11 million

Code Blocks

function megaHoverOver(){
 $(this).find(".sub").stop().fadeTo('fast', 1).show();
         
 //Calculate width of all ul's
 (function($) {
         jQuery.fn.calcSubWidth = function() {
                 rowWidth = 0;
                 //Calculate row
                 $(this).find("ul").each(function() {                                        
                         rowWidth += $(this).width();
                 });        
         };
 })(jQuery);

 if ( $(this).find(".row").length > 0 ) { //If row exists...
         var biggestRow = 0;        
         //Calculate each row
         $(this).find(".row").each(function() {                                                           
                 $(this).calcSubWidth();
                 //Find biggest row
                 if(rowWidth > biggestRow) {
                         biggestRow = rowWidth;
                 }
         });
         //Set width
            console.log(Setting width: ${biggestRow});
         $(this).find(".sub").css({'width' :biggestRow});
         $(this).find(".row:last").css({'margin':'0'});
         
 } else { //If row does not exist...
         $(this).calcSubWidth();
         //Set Width
         $(this).find(".sub").css({'width' : rowWidth});
 }
}

// Special characters are of course allowed in code blocks
var specialChars = " ";

// Smart quoting inserted by Google Docs is scrubbed
// If you need a smart quote inside a code block literal,
// you'll need to use HTML entity instead ("“")
var singleQuotedStr = 'str'; var doubleQuotedStr = "str";

Here is a code word. Perfect for explaining technical reference, such as file or folder name extension.js, or maybe a path to something /docs_old/src/server/getAndParseGoogleDoc.

Images

As are inline images:

Images will shrink to fit the column width, but won’t be scaled up if they are smaller:

Gifs are also supported.

(image created by Marvel, Wikipedia)

The full set of headers are supported. Please note that any text styled under Heading 1 and Heading 2 will be automatically inserted into the Table of Content sidebar. However, this does not apply to Heading 3, Heading 4, and Heading 5. You might want to be mindful on structuring your page so that it looks great as a guide.

Heading 1

Some text under heading 1.

Heading 2

Some text under heading 2.

Heading 3

Some text under heading 3.

Heading 4

Some text under heading 4.

Heading 5

Some text under heading 5.

Comments will be stripped from the reader-facing page.

Advanced Features

If ALLOW_INLINE_CODE is enabled, you can add fenced code into your google doc to be rendered directly to the DOM.

<%- codeblocks will not be rendered%>

<%-

<style>

.purplePapyrus {

font-family: papyrus;

color: purple;

}

</style>

<div class="purplePapyrus">But this custom style will!</div>

%>