How to Render External Markdown in WordPress

With markdown being such a convenient and distraction-free format that is loved by especially publishers coming from programming background, we need to look at plugins that allow us render our external markdown content in our wordpress site.

You may have for example some content hosted in sites like Github or Bitbucket. In such sites you tend to write content only in markdown format. What if you want to render that content in your wordpress site. Or let's say you want to render somebody's else public repository in your site. It doesn't make sense to copy paste the repository since tomorrow they may change the content or update it. Instead you may wish to just render their content since it's public and also the license allows for it.

In situations like these you need a good plugin that is able to allow to render such external markdown content without lots of effort. In this article we look at such plugins, their features and how to use them.

1. Use Mytory Markdown

Mytory Markdown enables you fetch markdown file from a URL.

The plugin then converts the markdown content into html, and saves it as post content in the database.

You can also use the plugin as a markdown editor, to write posts in markdown.

Step 1: Install it

You install it from within the wordpress dashboard like other plugins, by searching for it and clicking install. Then activate. You can also install by download it from here.

Step 2: Use it

After installation , just head over to the post editing page and start writing in markdown.

Reference

You can find more about this plugin here.

2. Use Documents from Git plugin

Documents from Git is a wordpress plugin that allows you easily publish, collaborate on and version control your [Markdown, Jupyter notebook] documents directly from your favorite remote Git platform, even if it’s self-hosted.

The advantages are:

• Write documents in your favorite editor and just push to your remote repository to update your blog instantly
• Use the power of version control: publish different versions of the document in different posts, i.e. from another branch or commit than latest master
• Easy to update by your readers via pull requests, minimizing the chance of stale tutorials

The following document types are currently supported by this plugin:

• Markdown
• Jupyter notebooks (only for public repositories)

The following platforms are currently supported:

• Github
• Bitbucket
• Gitlab

Step 1: Install it

Search for this plugin in the wordpress plugins repository within your wordpress dashboard and click install to install it. Then activate and proceed to usage section below.

Step 2: Use it

This plugin uses shortcodes primarily to allow you insert external content in wordpress posts or pages.

Publishing documents

The document-specific shortcodes follow a pattern of [git-<platform>-<action>], where

• <platform> can be one of
  • github: if you use Github as your VCS platform
  • bitbucket: if you use Bitbucket as your VCS platform
  • gitlab: if you use Gitlab as your VCS platform
• <action> can be one of
  • markdown: Render your Markdown files hosted on your VCS platform in Github’s rendering style
  • jupyter: Render your Jupyter notebook hosted on your VCS platfrom (only for public repositories)
  • checkout: Renders a small badge-like box with a link to the document and the date of the last commit
  • history: Renders a <h2> section with the last commit dates, messages and authors

You can find more shortcodes here.

Reference

Read more about this plugin here.

3. Use External Markdown plugin

External Markdown is a plugin for WordPress that you can use to embed Markdown files from external web sources (e.g. GitHub, GitLab, etc) into WordPress content using the shortcode [external_markdown].

A possible use case for this is to show content from a single source of truth (like a GitHub repository) on your WordPress website.

Here are it's features:

• Embed any publicly accessible markdown file from other websites
• Uses the public and free GitHub API to transform Markdown to HTML (there is a rate limit – so don’t overdo it)
• Caching support (so you can configure how often the file is being fetched from the source – default is a once per hour maximum)
• Customise the CSS class of the markdown container to adjust styles

Step 1: Install

In your site's dashboard go to Plugins -> Add New then search for this External Markdown and click install to install this plugin. Then click activate to activate the plugin.

Step 2: Use

Next after activation simply head over to the post or page and use the shortcode [external_markdown] to embed external content. For example check the below examples:

Simple embed

The url parameter takes the URL to the Markdown file you want to embed. Make sure to use the “raw” URL when you use GitHub, GitLab, etc.
[external_markdown url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]

Adjust caching duration

The ttl parameter controls how long the cached version is used, before it’s fetched again. The value is given in seconds. So 24 hours (24* 60 *60) result in a value of 86400.
[external_markdown ttl=86400 url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]

Adjust container CSS class

The class parameter takes your desired class name for the external markdown container. The default class name for the container is class='external-markdown'.
[external_markdown class="my-classname" url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]

Reference

Read more about this plugin here.