The guggesites client app uses the Google Document class to collect content pass it through my paser to generate Github Flavoured Markdown . The Google Drive API is used to collect image urls for the Markdown parser to publish documents on the Github pages server. This page is to demonstrate the current capabilities of the script for converting Google documents to Markdown. {: style="font-size:14px;margin-bottom:8px;"}
You can checkout the Google document used to create this post and the Github Markdown file{: style="font-weight:normal; color:#0000ff;"} . The Google document will be updated as features are added or improved. {: style="font-size:14px;margin-top:8px;"}
This is an example of coloured text{: style="font-weight:normal; color:#ff0000;"} and sized-text{: style="font-weight:normal; font-size:24px;"} within a paragraph. Background colour{: style="font-weight:normal; background-color:#00ffff;"} is supported. {: style="line-height:1;"}
How about using a different font family in a paragraph. In this paragraph we are using Arial Black. {: style="font-size:14px;line-height:1;margin-top:8px;font-family:Arial Black;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="width: 356.91px; height: 66.18px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"}{: .img-responsive }.
{: style="font-size:14px;"}
{: style="font-size:14px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:27px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:27px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:18px;margin-top:8px;margin-bottom:8px;color:#000000;"}
{: style="font-size:15px;margin-top:8px;margin-bottom:8px;color:#000000;"}
{: style="font-size:13px;margin-top:8px;margin-bottom:8px;color:#000000;"}
{: style="font-size:12px;margin-top:8px;margin-bottom:8px;color:#000000;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
The parser supports Google Document font selection. The font family styling is added to the style tag of the paragraph. Web safe fonts can be easily used other fonts will need to be linked to in the html header. However not all browsers have the same level of support for web safe fonts. Arial is the default font and does trigger font family selection. Adding non web safe fonts does impact page load speeds. {: style="font-size:14px;"}
This is Garmond. {: style="font-size:14px;margin-top:8px;font-family:Garamond;"}
This is Time New Roman. {: style="font-size:14px;margin-top:8px;font-family:Times New Roman;"}
This is Comic Sans. {: style="font-size:14px;margin-top:8px;font-family:Comic Sans MS;"}
This is Arial Black. {: style="font-size:14px;margin-top:8px;font-family:Arial Black;"}
This is Droid Serif. {: style="font-size:14px;margin-top:8px;font-family:Droid Serif;"}
This is Syncopate. Not web safe but it’s linked to in the header. {: style="margin-top:8px;font-family:Syncopate;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
Text colouring and highlighting is support. {: style="font-size:14px;"}
This text is red. {: style="font-size:14px;color:#ff0000;"}
This text is blue. {: style="font-size:14px;color:#0000ff;"}
This text is highlighted yellow. {: style="font-size:14px;background-color:#ffff00;"}
This text is coloured blue with grey highlight. {: style="background-color:#efefef;color:#0000ff;"}
This text is highlighted orange. {: style="font-size:14px;background-color:#ff0000;color:#980000;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
Headings, images and paragraphs can be aligned on the page. This paragraph is left aligned. {: style="font-size:14px;margin-top:8px;"}
Paragraphs can be right aligned. {: style="font-size:14px;text-align:Right;margin-top:8px;"}
Paragraphs can justified. Another Paragraphs can justified. More Paragraphs can justified. All Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. Paragraphs can justified. {: style="font-size:14px;text-align:Justify;margin-top:8px;"}
Images can be aligned as well. {: style="text-align:Center;margin-top:8px;"}
{: style="width: 216.00px; height: 134.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"}{: .img-responsive }
{: style="font-size:12px;text-align:Center;margin-top:8px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
{: style="width: 216.00px; height: 134.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"}{: .img-responsive }
{: style="margin-top:8px;"}
{: style="font-size:22px;margin-top:8px;margin-bottom:8px;"}
This a simple table using css for styling. {: style="font-size:14px;margin-top:8px;"}
| Header{: style="font-weight:bold; font-size:14px;"} | Header | Header |
| New col | one | two |
| six | Another row |  {: style="width: 96.91px; height: 161.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"}{: .img-responsive } |
| bold text in a table | Images and links can be used within a table. | This should be a link within a table. |
| {: style="border-color:#000000;border-width:1.5px;"} | ||
| {:.table} |