DEV Community

Cover image for Convert Google Docs to Markdown – With Git Integration & Image Hosting
Vikram Aruchamy
Vikram Aruchamy

Posted on • Originally published at Medium

Convert Google Docs to Markdown – With Git Integration & Image Hosting

Google Docs is a free web-based word processor known for its robust and collaborative writing features. But when it comes to publishing the content, Markdown stands out as a good choice.

While Google Docs automatically detect some Markdown formats and converts them into formatted text, it lacks native support for exporting content back into Markdown format. It also doesn't offer functionalities to validate the accessibility structure of documents, such as ensuring proper heading level hierarchy.

In this tutorial, you'll discover how to effortlessly convert Google Docs into Markdown format using the Docs to Markdown Pro Add-on. We'll also explore its powerful features such as seamless GitHub or GitLab integration and robust image handling.

My image

Features at a Glance

Accessibility checks: Checks for missing titles, proper heading levels across and missing image alt text for inclusive and SEO-optimized content

Generate Markdown output: Easily create Markdown output and copy it as text or download it as a file, ready for publishing. If your content includes images, get a publish-ready output as a Zip file containing both Markdown and images

One Click to GitHub/GitLab: Easily push images and Markdown to GitHub or GitLab with one click, streamlining your publishing process and preventing potential errors that might occur during manual uploads

Images optimized for speed: Automatically compresses images before uploading them to Git. This makes web pages load faster and saves space in the Git repository

Static site ready: Automatically generates front matter for Hugo, Jekyll, MkDocs, or Docusaurus when publishing to Git

Blocks Library: Save time and maintain consistency with reusable blocks for inserting boilerplate code and text into your documents

Cloud image hosting for speed: Seamlessly hosts images on the AWS cloud and generates a URL that delivers your images from 600+ AWS CloudFront locations

AI-powered caption generation: Effortlessly creates descriptive image captions using AI

Read further to find out how each feature of Docs to Markdown Pro can enhance your content creation journey.

Accessibility Check Feature

The add-on ensures accessibility from the start of Markdown creation with automatic WCAG checks for title availability, heading levels and image alt text.

Proper heading levels enhance accessibility by structuring content for screen readers, aiding navigation. Additionally, for SEO, they optimize content hierarchy, improving search engine understanding and user experience.

The tool verifies the hierarchy of headings used and flags errors if any headings are incorrectly leveled as shown in the following image:

Incorrect heading level warning

Image alt text is vital for accessibility, offering descriptions for visually impaired users and improving SEO by providing context of images for search engines.

Additionally, when the internet is slow, the alt text helps readers grasp image content as it loads, making sure they understand what's in the images.

When converting to Markdown, if an image is missing alt text, the add-on shows the image's position and the section heading where the image is present. This makes it easy to add the alt text to that image.

Details about image that is missing alt text shown

These checks make your content inclusive by ensuring everyone can access it and optimize it for search engines, so more people can find it.

AI-Powered Image Caption Generation

Optionally, the add-on can automatically generate AI captions for images, saving time for the writers.

Download Markdown And Images as Zip

Once your content is converted to Markdown, the add-on creates a Zip file containing both the Markdown file and its images. The Markdown file is updated with the correct image names and paths, making it publish-ready.

Output zip file containing Images and Markdown file

You can upload the images in the appropriate location, upload the Markdown file, and hit publish.

Publish to GitHub or GitLab

The add-on seamlessly integrates with both GitHub and GitLab, enabling effortless publishing of your Markdown files onto Git-powered sites. (For example, the GitHub Pages site built with static site generators).

You can push your Google Docs content as Markdown, including images, to GitHub or GitLab with one click. This ensures error-free handling of the image path, image file names and Markdown filename.

Pushing images and Markdown to Git

This also works for updating previously published Git content.
You can make the necessary updates in Google Docs and click push. The updated content will be pushed as Markdown to Git seamlessly.

Automatic Image Compression

When users include screenshots or images in Docs, these images might take up more space due to their higher quality or resolution.

In this case, the tool automatically compresses these images before uploading to GitHub or GitLab, saving space in Git repositories.

Image compression

This optimization significantly enhances the website's overall speed and user experience.

Cloud Image Hosting

While converting Docs to Markdown, the tool allows you to upload images to the AWS cloud and generates cloud URLs in your Markdown automatically.

This eliminates manual image uploads to your server and image path updates in Markdown files, ensuring streamlined workflows, and efficient image storage.

There are two main advantages of Cloud image hosting:

  • Hosting images on the Cloud ensures faster image delivery to users through global edge locations (600+), reducing latency and enhancing accessibility.

  • Uploading images to Cloud storage instead of Git repositories prevents bloating Git repositories with binary files.

AWS CloudFront locations

Reusable Blocks

The Blocks library allows you to add boilerplate texts and codes as reusable blocks. You can insert those blocks into your document with a single click.

Advantages of using blocks

Using reusable blocks ensures consistent style in all your content, keeping everything looking uniform and cohesive.

Streamline Your Process with Google Docs to Markdown Pro

My image

Conclusion

The Docs to Markdown Pro Add-on makes Google Docs to Markdown conversion seamless. With accessibility checks, smooth GitHub/GitLab integration, and robust image handling, it streamlines your workflow and ensures content accuracy.

Simplify your workflow and speed up content creation now with the Docs to Markdown Pro Add-on.

Top comments (0)