Preparing a Google Doc for the Enterprise Bot CMS
Pasting a Google Doc into the Hubspot CMS can lead to some weird formatting that needs to be corrected.
Some formatting can be done through the UI but some needs to be done through the source code. Edit source code by clicking Advanced > Source code.
Empty lines
Remove empty lines added from conversion.
Line height
Apply 1.5 line height to the entire document.
Lists
Sometimes lists are formatted incorrectly when converting Google Docs.
If you see strange spacing in a list, check the source code and you might find a list within a list like this:
<ul>
<li aria-level="1"><a href="https://groq.com/"><span>Groq</span></a></li>
</ul>
<ul>
<li aria-level="1"><a href="http://together.ai/"><span>Together AI</span></a></li>
</ul>
Fix it like by making them all fall within one <ul> or <ol>:
```html
<ul>
<li aria-level="1"><a href="https://groq.com/"><span>Groq</span></a></li>
<li aria-level="1"><a href="http://together.ai/"><span>Together AI</span></a></li>
</ul
Headings
Top level heading styling
Use the Hubspot editing tools to format the headings.
- Heading 2 style
- Arial font
- 20px font size
- Not bold
Sub-heading styling
- Heading 3 style
- Arial font
- 20px font size
- Not bold
Paragraph text
- Paragraph font style
- Arial font
- 16px font size
Links
Links won't get the arial font when applying the font through the UI.
Apply a style to all links clicking Advanced > Source code and then adding a style specifying the Arial font to all anchor tags:
style="font-family: Arial, Helvetica, sans-serif; font-weight: normal;">
Images
Centering images
Centre align all images.
Rounded corners
If you add any images without rounded corners, edit the source code for img tag and add this styling:
style="height: auto; max-width: 100%; width: 1516px; margin-left: auto; margin-right: auto; display: block; border-radius: 8px;"
Dropshadow
If an image is white you can make it stand out from the background with a drop shadow. Edit the img tag by adding this styling:
style="height: auto; max-width: 100%; width: 636px; margin-left: auto; margin-right: auto; display: block; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);"
Call to action
Add a call to action through the Hubspot UI.
Code blocks
If the guide uses code blocks, add Prisma to the header HTML by clicking Settings > Advanced then adding the following to the Additional code snippets section:
<!-- Add PrismJS CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />
<!-- Add PrismJS JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
````
This adds PrismJS to the guide which will enable code blocks, a copy button for users to copy code, and syntax highlighting for Bash and Python.
If you want to add more support for syntax highlighting just add more to this code snippet section similar to this:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
With PrismJS installed now we can style any code block text as follows:
<pre><code class="language-python">
import sys
import os
</code></pre>
The class specifies the language syntax highlighting.
Quote block
Make a section of the text stand out with a quote block:
<blockquote style="background: #f5f5f5; border-left: 4px solid #2196F3; padding: 20px; margin: 20px 0;">OpenAI is the company that is famous for ...</blockquote>