Export to HTML addon
This addon is open-sourced - see it here.
What is it?
Google Docs addon that converts Google Doc to simple HTML that can be used in various blogs.
Installation
To install this addon, navigate here
Versions <= 48 were deployed to the Chrome Web Store, as it was required by Google for Google Docs addons. Newer versions are deployed to the G-Suite Marketplace, as it’s required by Google now. Old installations should be automatically updated to newer versions starting from 07.05.2020.
Migration
Versions <= 52 updated to the latest version:
- You do hot have any custom templates in
g2html_settings.json
file:- Close all opened Google Documents
- Open Google Drive and search for
g2html_settings.json
file - Delete it
- You have some custom templates in
g2html_settings.json
file:- Close all opened Google Documents
- Open Google Drive and search for
g2html_settings.json
file - Download it from the Google Drive
- Delete it on Google Drive
- Open any Google Document and perform a single conversion.
- Add your custom templates to the newly created
g2html_settings.json
file.
Without these steps [html][/html]
tags added in version 52 won’t work.
Configuration and folders
This addon automatically creates the following files and folders:
G2HTML
folder to store generated HTMLs (so you can download them as a single file if you don’t want to copy HTML contents via “Copy to clipboard” button)g2html_settings.json
file where all addon settings are stored and custom replacements can be configured (see the Customization section below).
Markup reference
- Text with
Consolas
font =<code>text</code>
[d]Title[/d]
=<p><a class="jb-download-button" href="some url"><i class="download-icon"></i>Title</a></p>
. Changesome url
to your IDE’s download url ing2html_settings.json
.[e]http://youtube_link[/e]
=<iframe width="560" height="315" src="http://youtube_link" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
[more]
=<!--more-->
- Select image →
⌘⌥Y
→ SetAlt
orDescription
for image =alt
attribute for image. - Select image →
⌘K
→ Set link =src
attribute of the image having this link. [html]<html part>[/html]
=<html part>
part inserted into rendered HTML without any changes. Great for a custom markup.
Tip: you can define your own tags, see the Customization section below.
Working with images
The following workflow should be used to deal with images inside the Google Doc to use this addon efficiently:
- Upload various images to have final links
- Insert them to Google Doc
- Set alt and image link using the approach from Markup reference section
- For GIFs: have the same name and links for the GIF preview and the GIF itself, e.g. upload them at the same time. Set only link to the GIF image itself and turn on
Generate | Gifs
in settings. After that, GIF player markup will be generated automatically.
General workflow
- Write the Google Document
- Execute Add-ons → Export to HTML → Convert
- Change settings if needed and press “Convert”
- Empty warnings / errors list is displayed if everything is OK
- List with warnings/errors is displayed if there are some problems. Click the warning or error description to navigate to the place in the document and fix it. Navigation uses bookmarks to jump to the specific place in the document (there is no other way to implement it), and as soon as warning / error is fixed, corresponding bookmark is removed.
- As soon as all problems are fixed, copy rendered HTML to clipboard and paste it to the blog post.
Toolbar controls (from left to right)
- Re-run conversion with previously selected settings
- Copy generated HTML to clipboard
- Clear all bookmarks, warnings and errors
- Open settings
- Help link
Settings
Generation
- Paragraphs - wrap each paragraph in
<p></p>
. - id attributes for headings - automatically generate
id
attribute forh
tags based on the tag content. You can add your own custom regexps for transforming heading content into id inidtemplates
sections ing2html_settings.json
file. - Images - generate image markup for images in Google Document.
- Gifs - generate specific markup for GIFs (preview, JB-specific site markup), see Working with images section.
Transform
- Always make image width /= 2 - useful when you don’t have images with @2x postfix.
- Limit max image width to - limits max image width to the specified value.
Inspections
- Image alts - check if each and every
alt
image attribute is not empty - 404 errors (slow) - tries to load the content for each url in the document (including images) and reports if there is a problem with loading the content.
- Marketing tokens in links (UTMs, etc) - checks for various marketing tokens in URL and warns you (since you don’t need them in original text)
- Empty links - shows errors for empty links.
- TODOs - shows warning for every text or link containing
TBD
. Tip: if you don’t want to insert the link to some resource right now, enter “TBD” instead of the URL. - Shortcuts - detect shortcuts that do not have “Consolas” font (
<code>
tags) set. - Multiple spaces - detect several spaces instead of a single one in text.
- Title Case - checks document title for so-called “Title Case” rules and suggests a correct title
Behavior
- Always open settings before conversion - by default addon does not show the Settings screen when making a document conversion. This option forces it to always show this screen.
Customization
To customize any settings that are not visible in the addon UI, download the g2html_settings.json
, edit it and replace your current settings file with it. After that addon should use your own settings.
Settings reference
Generate
paragraphs
. Value:true
orfalse
. Stores Paragraphs option.heading_ids
. Value:true
orfalse
. Stores id attributes for paragraphs.gifs
. Value:true
orfalse
. Stores Gifs option.generate_images
. Value:true
orfalse
. Stores Images option.
Transform
transform_image_width
. Value:true
orfalse
. Stores Always make image_width /= 2 option.max_image_width
. Value: integer, 800 by default. Stores Limit max image width to option.
Inspections
image_alts
. Value:true
orfalse
. Stores Image alts option.url_tokens
. Value:true
orfalse
. Stores Marketing tokens in links (UTMs, etc) option.fetch_links
. Value:true
orfalse
. Stores 404 errors (slow) option.empty_links
. Value:true
orfalse
. Stores Empty links option.tbd
. Value:true
orfalse
. Stores TODOs option.shortcuts
. Value:true
orfalse
. Stores Shortcuts option.spaces
. Value:true
orfalse
. Stores Multiple spaces option.title_case
. Value:true
orfalse
. Stores Title Case option.open_settings_on_start
. Value:true
orfalse
. Stores the behavior option.idtemplates
. Array of templates for replacing certain characters for headerid
attribute. Each template has the following format:{ "regexp": "c\\+\\+", //escaped RegExp "replacement": "cpp" //text to insert instead of characters matched by regexp }
templates
. Array of templates for text transformations. First accepted template format:{ "attributes": { "LINK_URL": true }, "replacement": "<a href=\"LINK_URL\">$TEXT$</a>" }
Each text element in the Google Docs a) contains a text b) has some markup attributes (background color, foreground color, font family etc).
attributes
map contains key-value pairs. The key is one of the text attribute names. Value is the value of this attribute.<attribute>:null
pair means that there should be no such attribute for the text.replacement
is the replacement markup to be inserted into the HTML. The$TEXT$
variable contains the text of the text element. You can use various text attributes in the markup. To do that, just insert the text attribute name.In the example above, we match all the text elements having non-empty link (
LINK_URL
attribute). In the resulting HTML, each of such elements is wrapped in<a>
tag with a link from theLINK_URL
attribute.Second accepted template format:
{ "regexp": "\\[d\\](.*)\\[\\/d\\]", "replacement": "<p><a class=\"jb-download-button\" href=\"some url\"><i class=\"download-icon\"></i>$1</a></p>" }
regexp
is a regular expression that matches the text of the text element. Nothing else, no attributes are accepted here. You can define matcher groups and use them inside thereplacement
attribute. Example below shows how we can use the following custom text in our Google Document:[d]Download My IDE![/d]
This text is transformed into the following HTML markup:
<p><a class="jb-download-button" href="some url"><i class="download-icon"></i>Download My IDE!</a></p>
Suggestion: as some typical text elements (like links) are handled by the general parser logic, it’s not recommended to alter them via templates for now. There is no easy way to simplify the example above - the only way to have the correct template for you is to configure it once for your product.
Checklist for custom templates:
- Check regexp escaping.
- Check if your json is valid at all.
- If something does not work, please ping me.
Limitations
Sometimes bookmarks generated for errors are not removed from the document because of Google Docs bug.
Third-party libraries
- ImgApp
- GoogleDoc2Html - borrowed initial version from here.
Note about privacy policy
This page has Disqus comments and you may be confused that the link “Disqus’ Privacy Policy” is a privacy policy for “Export to HTML” addon. No, it’s a privacy policy of a comment block on the webpage. It’s not the privacy policy of the “Export to HTML” addon. Here is the privacy policy for “Export to HTML” addon.